HTML,CSS,JavaScriptはすこし書けるようになってきたな〜
何かフレームワーク触ってみたいなとお考えの方にVue.jsをおすすめさせていただきます。
Vue.jsは他のフレームワークと比較して学習コストが低いとされています。
本記事では私がVue.js（Ver2.x）を学習し始めてから小中規模のアプリケーションを実装するようになるまでどのように学習してきたのかまとめました。
これから勉強したいなと言う方の助けに少しでもなればなと思います。
STEP1 Vue.jsとは？
Vue.jsとは、webアプリケーションのUIを構築するためのJavaScriptフレームワークです。2014年にVer.1が登場し２０１６年に登場したVer.2で飛躍的にパフォーマンスが向上したことから人気が急上昇しました。
フレームワークって？
端的に言うとアプリケーション開発をより効率的にするための枠組みです。各フレームワークには独自のルール（ディレクトリ構成など）があり、その通りに実装を行うと、これまで開発者が記述していたコードを書くことなく、効率的な開発ができます。
【参考資料】
Vue.jsのツボとコツがゼッタイにわかる本
STEP2 基本的な機能の把握とコーディング
以下で紹介するように、いずれかの方法で環境構築をしていただき、手を動かしながら学習していきます。
【手っ取り早く環境構築】
->Codesandbox
【しっかり自分のローカル環境でやりたい人】
->NPM
->より早く構築したい方はCLI
環境構築ができたところで、Vue.jsにはどんな機能があるのか把握していきましょう。
主な機能例
- テンプレート構文
- HTMLとよく似た構文でDOMのテンプレートを定義する機能
- データバインディング
- アプリケーションのデータとDOMを結びつける機能
- リストレンダリング:v-for
- 複数のデータに基づいてDOMを繰り返し描画する機能
- 条件付きレンダリング:v-if/v-show
- データの状態の応じて表示・非表示を切り替える機能
Vue.jsはコンポーネント指向と言うものであり、Webアプリケーションを上記のような機能を使用して定義された、コンポーネントの集合体として構成します。コンポーネント化することのメリットについて深くは触れませんが、設計・開発・テストをコンポーネント単位で行えることや、構造や見た目、動作で共通管理することができます。
コンポーネントが持てるプロパティ例
- data：保持するデータを定義
- methods：保持するメソッドを定義
- filter：フィルターを定義
- computed：算出プロパティを定義
- watch：ウォッチャ、監視メソッドを定義
この他にもprops等のプロパティがありますが、アプリケーションの構築にあたり必要になった場面で学習すると良いかと思います。
【参考資料】
基礎から学ぶ Vue.js
Vue JS入門決定版！jQuery を使わない Web 開発 - 導入からアプリケーション開発まで体系的に動画で学ぶ
STEP3 VueRouter、Vuexを使ってみる
VueRouter
VueRouterはVue.js公式のルータで、一般的にVue.jsでSPA（シングルページアプリケーション）を構築する際に使用されます。
【参考資料】
VueRouter公式 （まずはこちらを読みましょう！）
今さら聞けない？Vue Router （非常に参考にさせていただいた記事）
Vuex
Vue.jsではコンポーネント間でデータのやりとりをする際にpropsや$emit()を使用することができますが、この方法はいわゆるバケツリレー方式です。コンポーネントの階層が深くなればなるほどそのやりとりは複雑になってしまいます。
Vuexではこういった複雑なデータの受け渡しを解決できる”状態管理パターン + ライブラリ”です。
Vuexに関しては公式ドキュメントが非常にわかりやすかったので熟読すると良いかと思います。
【参考資料】
Vuex とは何か？
STEP4 簡単なアプリケーションをつくってみよう
ここまで学習したあなたはもうVueRouter,Vuexを使用した小中規模のSPAの構築はできるはずです。
さらにFirebase等を使ってサーバの構築をせずにDBの機能を使用することでより実践的なアプリケーションの実装をしてみたり…
【参考資料】
Vuexの基本をTodoリストを作って学びましょう
超Vue.js 2 完全パック - もう他の教材は買わなくてOK！ (Vue Router, Vuex含む)
Vue.js + Firebaseで作るシングルページアプリケーション
最後に
本記事をみて一通り書けるようになってきたなーと感じていただけたら嬉しいです。
僕もエンジニアになって３ヶ月がたった頃にVue.jsを使ったアプリケーションの開発に携わらせていただきました。その時はVue？美味しいの？状態で本当に何もわからなかったのですが、公式のドキュメントを読み漁ったり、Udemyを活用したり、Qiitaの記事をたくさん読みました。
Vueは比較的環境構築も容易かと思いますし、参考文献も豊富なのでぜひ良い学習を！！！
そして本記事ではVue2.xの学習を主に紹介してますが、今年リリースされたVue.3についても今後勉強したことを発信できればと思います。