カテゴリー: JavaScript

勉強した内容をMermaid.jsでマインドマップ形式でまとめる

はじめに この記事を読まれているエンジニアの皆様は日々多くの本やネットの記事をお読みになり、自己研鑽に励んでいることと思います。 テキストに限らず学習した内容を何らかの形でまとめることは記憶に定着させたり、理解を整理したり、思い出しやすくしたりとたくさんの意味があると自分は考えています。恐らく同じ様な考えを持つ方は少なくないかと思います。 そこで今回はMermaid.jsを使いマインドマップ形式で保存することで、見やすく手軽に管理する方法を紹介したいと思います。 準備 今回はMermaid.jsを使用するので予めインストールしておいて下さい。以前Mermaid.jsをインストールする方法や、ガントチャートを作成する方法をこちらで紹介しているので必要に応じて参考にして下さい。 マインドマップとは マインドマップとは下図の様なものです。思考を整理する時などに便利です。 これは「SQLアンチパターン」という本にある、「ジェイウォーク」についてまとめたものです。 この画像は元々テキストで書いているだけです。先程インストールしてもらったMermaid.jsを使うことでマークダウン記法のように書くだけで簡単にマインドマップを作成することが出来ます。 ちなみに「SQLアンチパターン」はとても良い本なので読んでいない方は絶対に読むべきお勧めな本です。 マインドマップを書いてみる 実は解説する程のことはほとんどなく、最初のノードをroot()で囲むだけで、あとは階層毎にインデントを深くしていけば自然とマインドマップが作られます。 mindmap ... 御覧になる | 御シェアする

RailwayとNetlifyで無料ホスティング

はじめに ポートフォリオや勉強の一環として作成したWebサービスを無料で公開したいというケースはよくあるかと思います。 少し前までならHerokuがありましたが、生憎無料で使えなくなってしまいました。そこで今回はHerokuと似た無料ホスティングサービスのRailwayとNetlifyに、それぞれバックエンドとフロントエンドをホスティングする方法をまとめてみました。 ここでは主にRailwayやNetlifyの設定方法を説明します。※アプリケーションについては解説しませんのあしからず 構成 RailwayバックエンドRubyOnRailsMySQLNetlifyフロントエンドVue.js リポジトリは一つにまとめておりディレクトリ構成は下記の様な感じとなっております。 $... 御覧になる | 御シェアする

ビデオ会議で役立つタイマーJavaScript〜コンソールから叩く〜

はじめに 自分たちのチームでは振り返りや意思決定などをオンラインで行う場合、miroやGoogleDocumentなどの複数人で同時編集が可能なサービスを画面共有しながら会話をしています。 「時間を決めて各々で少し考えてみましょう。」みたいな時に、ブラウザを使いながらタイマーがあると便利な瞬間があります。Chromeの拡張機能でもいいのですが、これくらいなら生のJavaScriptを書いたり、ブックマークレットで実装してしまった方が早いかなと思い今回作ってみました。 JavaScript版 コードは下記の通りです。 let... 御覧になる | 御シェアする

VimのaleプラグインでVueへのESLintを非同期で実行する

はじめに 今回はVueファイルを編集する際にESLintでコード分析をして、ALEというVimプラグインで警告メッセージを表示する設定を行いたいと思います。ついでにPrettierでファイルの保存時に自動フォーマットをさせる設定もまとめておきます。 手順 ESLintインストール まずはESLintをインストールします。 $... 御覧になる | 御シェアする

Vue.jsとRailsをDocker上に構築

Vue.jsは良いぞ Vue.jsはSPAを作るのに非常に良いフレームワークです。学習コストが低くパフォーマンスは高く、そして自由があります。サードパーティの開発も盛んでVuetifyというUIを提供しているフレームワークも併せてお勧めです。 今回はバックエンドにRailsを使いAPIサーバを立てて、フロントエンドにはVue.jsを使ってAPIを叩いてシェルスクリプトを実行出来る環境をDocker上に構築してみたいと思います。フロントエンドのUIにはVuetifyを使用します。 環境構築にはこちらの記事を参考にさせて頂きました。https://qiita.com/Kyou13/items/be9cdc10c54d39cded15 Vue.jsとRailsのコンテナを作成 Dockerfile作成 適当なディレクトリを作成して下さい。その中身を下記のような構成にすることが目標です。 $... 御覧になる | 御シェアする

ブックマークレットでURLからJavaScriptを実行出来る

はじめに ブックマークレットというものを耳にした事はありますでしょうか。先日Chromeのコンソールからjsを実行する事でCORSの試験を行う方法についてまとめました。今回はURLからjsを実行してみたいと思います。 URLにjsを記述したブックマークの事を界隈ではブックマークレットと呼んでいます。手軽に便利な機能を作れるのですが、存外知られていないテクニックですので、是非ともこの記事を機に覚えてみて下さい。 作ってみる 今回作りたいブックマークレットは下記の様なページから見出しの数を数えるというものです。取得したい見出しはHTML的にはh2要素になります。 実装をより明確に言語化すると、ページ内のh2要素数を計算して、その内の不要な固定のh2要素数を差し引きする事で算出できます。固定のh2要素とは例えば、「検索」とか「少しだけよく読まれる記事」などの事です。ちなみに合計で7個です。 実は下記のコードをURLバーに入力するだけでjsが実行されます。但しコピペをすると頭のjavascript:がカットされてしまうので、そこだけ手入力をする必要があります。 javascript:(function(){ var... 御覧になる | 御シェアする