最近、Vue.js + Vuex + Vue-router + axiosを触ってみました。今回はそのお話し。
読んだ書籍：基礎から学ぶ Vue.js
まず最初にVue.jsを触るに当たり、下記の本で一通り感覚をつかむことに。
今年の5月末に出た本で、新しい本です。
Vue.jsに関する書籍を検索してみたのですが、そもそも日本語の書籍があまり出回っていないようでした。そんな中でチョイスした本がこのネコの表紙の本。イメージ通り、カジュアルな感じで書かれているとっつきやすい入門書でした。
本の選び方ついて：とっつきやすい本が良い
最近、頻繁に技術書を読むようになって思っているのは、未経験技術に触れる際、「最初に読む本は易しい本が良い」ということです。もっと正確に言うと、「離脱する可能性が極力低い本」。挫折せずに続けられることが大事。
最初にざっと大枠を掴んでしまえば、後はある種の慣性に従って、自然に先に進んでくれます。人間の脳は、一度始めてしまえば辞める方が逆にコストと感じることがあるようなので、まずは坂の上に立って転がり始めることを考えたほうがいいかな、と。
他に気をつけていることは、1回で全部覚えようとしないことでしょうか。そもそも、1回では覚えきれません。なので、じっくり読むよりはサッと読むほうが良い（勿論、気になったトピックスはじっくり読んでもよいかと）。
1個の本を3時間かけて読むよりも、ザーッと流して1時間で読み、これを3回繰り返す方が定着するように思えます。同じ時間をかけるのであれば、流し読みで回数を増やす方がおすすめです。
Vue.jsを触ってみた感想
Vue.js + Vuex + Vue Router + axiosを使った感想を書いてみます。まだ、触ってみて1～2週間かそこいらで書いた見解なので、見当はずれのことを書いていたらご容赦を。
結論から言うと使いやすかったです。
学習コストが低い
これは感覚的な比較にはなりますが、「Vue.js」を使ってHallo World!!を表示しようと思った場合、割と早かったです。
既存の実装に適応する場合、部分的に適応できる
Vue.js自体で扱うのはその名の通りViewの部分だけであり、また、コンポーネント同士を疎結合な状態で実装させようという思想が垣間見えます。なので、既存の実装に組み込もうとする場合でも、ある程度、既存実装と独立した状態で組み込みやすいのかと思います。
部品のコンポーネント化の概念が導入しやすい
個人的に思ったVue.jsの一番の強みかここかな、と。
例えば、webシステム実装時に大抵は出てくる「ボタン」や「カード」といった画面の構成部分を表す部品。これらを、「コンポーネント」ととして1個のvueファイルに閉じ込めて実装することができます。
この1ファイル = 1コンポーネントにできるというのがポイント。1ファイルにタグの構成・挙動を定義したスクリプト・スタイルを押し込めることができる。単一ファイルコンポーネントと呼ぶようです。（他の言語でもできると思いますが、Vue.jsの場合は特に推奨しているように思われます）。
Vuexの利用で、fluxの考え方を簡単に導入できる
Vuexって強いですね！！
というのが素直な感想。
Vue.js簡単に、簡単にfluxの考え方を導入できます。
よく見るfluxの図
Vue.jsではViewの部分しか扱ってくれませんが、Vuexを用いることで状態管理をすることができるので大変便利。fluxのメインの概念である、「フローを一方通行にする」というのも、割とスムーズに実装できます。
Vuexの場合はこうなる。fluxのものと、名称が多少異なるが、概念は同じ
設計観点でいえば、Storeに何をどこまで管理させるかが設計の肝になりそう。
Vueの単一ファイルコンポーネント自体にも変数や状態を管理はできるので、神様（Store）が知っていたほうが良いことと、万物（各Vue）が知っておいたほうが良いことをうまく設計していくのが腕の見せ所なのかなぁ、と。
その他
Vue Routerとaxiosも使いやすかったです。簡潔に書くと下記のような感じ。
- Vue Router ： ルーティング用のライブラリ。SPAが簡単に導入できます。
- axios ： クライアント・サーバ間の通信用ライブラリ。Fetch APIとの使い勝手が比較されているようですが、axiosの方が良いという声がやや多いように感じます。公式もaxios推しのようです。
※公式の記事
まとめ
ポイント
- とっつきやすい技術書から読むのが良い（まずは転がり始める）
- Vue.jsは周辺ライブラリもそろっていて、とっつきやすい
というわけで、皆様も快適なVue.jsライフを送ってみてください！！