はじめに
Vue.jsをさて始めようと思ったときに、そもそもいろんな種類がありすぎて混乱しました。どれも似たような名前だし、何から始めればいいのかわからない。
それでもいろいろと手を出していくに従って「これはこのためのものかー」というのがわかってきたので、過去の自分のような初学者の頭が整理されればいいなと思い、Vue関係のあれこれをまとめることにしました。
想定読者
- Vueにチャレンジしてみたいけど、何から始めればいいの？
- 使ってみようとしたけど、インストール方法が多くて何を選べばいいのかわからない。
- Vueほにゃららシリーズ多くない？
Vue.js
Vueはユーザーインターフェイスを構築するためのプログレッシブフレームワークです。
Vue.jsはJavaScriptという言語のフレームワークの一種です。
JavaScriptの上位（見方によっては下位？）に位置し、React、Angularと同じ階層です。
ちなみに、Vueの公式サイトでは他のフレームワークとの比較もしています。
jQueryは？
jQueryはライブラリなので、フレームワークとは少し違います。ちょっとした動きをつけたい場合や、一部だけ非同期処理をしたいときには使い勝手がいいです。
この図に関しては雰囲気だけなんとなくのイメージで捉えていただければと思います。
（追記）
Reactは公式でライブラリと書かれていました。
が、実際はフレームワークとしてVue.jsやAngularと同列に扱われがちです。
インストールの仕方
公式サイトを見ると、インストールの方法もさまざまです。npmは少し特殊な立ち位置のようです。
初心者はどれから始めればいいのか、というと、私個人の意見としては「1ファイルで済むならCDN、そうでないならVue-cli。npmは自分が行けると思うならどうぞ」です。
参考：CDN版で大きなアプリ作れるの？
CDN
普通のHTMLにタグを埋め込むだけで使えます。
一番簡単なので、初めてVueを使って何か作りたいという人にはおすすめです。
CDN版を使う利点
・Node.jsをインストールしなくて済む
・npmについて知らなくても済む
・jQueryを使ってた時と同じノリで使えて分かりやすい
・Rails等のサーバサイドフレームワーク使ってるときに、構成で悩まなくて済む
・webpackまたはvue-cliではまらない
VueのCDN版を使おう
Vue-cli
全部載せお得パック。とりあえずこれに乗っかっておけば間違いないというもの。作成時に下記のプラグインなどを使うかどうか選択できます。
いわゆる.vueファイル（単一ファイルコンポーネント）にコードを記述し、コンパイルされたものを読み込むという原理です。コンパイラが必要ですが、作成時に選択できるのでそれほど考える必要はないと思います。
npm
npmというパッケージツールを用いてインストールします。
Node.jsを使ってごりごり書くときに使うという印象。設定ファイルなどを自分でカスタマイズする場合はこれでインストールするようです。
Vueを使おう、という文脈で使われているのをあまり見たことがないので、学習ロードマップからは外れているようです。多分、これを理解できる人はこの記事は不要です。
プラグインなど
上記でVue.jsを使えるようになったことを前提として追加できるプラグインです。
参考：Vueの拡張
必要に応じて自由にプラグインを追加できるのが、Vueが「他の一枚板(モノリシック:monolithic)なフレームワークとは異なり、Vueは少しずつ適用していけるように設計されています。」と謳う理由なのかなと思います。
Vue-router
Vue RouterはVue.js公式ルータです。これはVue.jsのコアと深く深く統合されており、Vue.jsでシングルページアプリケーションを構築します。
すべての画面をルートページだけで完結するなら不要ですが、大抵はそうではないのでこれを使います。
ルーティングによってURLを変更できるので、ページ遷移しているような挙動にできます。
コンポーネントの表示を切り替えることでページ遷移のようなものを再現することはできますが、更新ボタンを押すとページがリセットされます。
Vuex
VuexはVue.jsアプリケーションのための状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。
「状態」というのが自分の中でしっくり来なかったのですが、例えば、ログインしている状態、〇〇のページを開いている状態とイメージするとなんとなくわかるような気がします。
私が勉強会などで聞いた限りでは、単純なデータの受け渡しのショートカットとしてVuexを使うのはアンチパターンとされています（公式は推奨していますが）。propsやemitを使って愚直にデータのバケツリレーをしたほうがいいという意見が多いようです。
参考：Vuexで何をするか、しないか
「使いどころ」からはじめるVuex
Nuxt.js
Vueのプロジェクトで必要になるであろうプラグインが標準で全部入っているフレームワークです。Vue-cliよりもっと全部載せで、規約に従うことでよしなにしてくれます。
ディレクトリ構造を見ると分かる通り、「これはこのディレクトリに入れてね」というのがかなり明確に決められています。
また、ディレクトリ構造から推測して勝手にルーティングを設定してくれます。（Vue-routerもいらないというのはこういうこと）
SSRを選択できるというのも大きな特徴です。
参考：NUXTいるのかどうか(Vue CLI 3との比較)
UIフレームワーク
コンポーネントフレームワークのテンプレート。コンポーネントを指定するだけでいい感じのデザインにしてくれます。
例えばVuetifyでは<v-btn>ボタン</v-btn>と書くだけで以下のようなボタンができます。
種類としては、以下のようなものがあります。
おわりに
初見の目線で説明をしました。Vue.jsに初めて触れる人が少しでも理解がしやすくなると幸いです。
また、やわらかVue.jsには初心者向けの情報がたくさんあるのでおすすめしておきます。
ちなみに、ここに挙げた全ての技術を使ったことがあるわけではないので、把握しきれていないところもあります。
