Vue.js初学者の頃の私にメッセージが届けられるなら
私が一人で Vue.js に挑戦していた頃、これでいいのかなぁ？一番いい方法ってなんだろう？みたいなことをたくさん悩みました。
そんな私へ、今の私ならこう答えるよ、というものをまとめてみました。
この記事が他のVue.js初学者の方にも参考になれば幸いです。
備考
- 初めてVueに触れた頃の私
- jQueryでそれなりぽいものをそこそこ作ってた
- 今の私(2018年7月)
- 個人開発でVueを使ってそれなりにぽいものを2、3個作った
- 勉強会やイベントに参加して見聞きしたり発表したり
- Vue.jsはいいぞってイキっている
最初のプロジェクトづくり
初めてのVueはプロジェクトを小さく始めよう
環境構築はvue-cliが圧倒的に簡単なのですが、
勧められるままに全ての選択肢をデフォルト設定でインストールすると以下のものが付いてきます。
- vue-router
- vuex
- 単体テスト
- e2eテスト
この辺を一緒に入れると、ディレクトリ構成が変わったりファイルが増えたりします。
Vueにそもそも初めて触れるときは、Vueが必要として書いてるコードなのか、他のライブラリを利用するためのコードなのかわかならなくなってしまいがちです。
まずはVueの雰囲気を掴むため、ぜひVue単体の環境で作ってみてほしいなと思います。
Nuxt.js ってどうなの？
Vue.js と Nuxt.js の関係は、言語とフレームワークの関係に似ています。
VueはViewとModelに特化した、新しいシンタックスやデータの扱いを提供するライブラリです。
それに対して Nuxtは vue-router や vuex などの各種ライブラリ、
それから静的サイト生成機能とサーバーサイドレンダリング（SSR）のためのホスティング機能など、
Vueでサービスを構築する上で便利なライブラリをひとまとめにしたフレームワークとなります。
予めディレクトリ構成などを縛ることで、代わりに様々な機能を提供してくれるので、
レールに乗ったような気分で開発できると思います。
必要な画面がたくさんある、シングルページアプリケーション（SPA)を作るなら、
Vueとvue-routerとvuexと……と個別に入れるより、Nuxtに乗っかってしまったほうが簡単だと思います。
そしてこれは個人的には意外だったのですが、 SSRが不要なケースでもNuxt開発は良いです。
nuxt generate コマンドで静的なjsを生成して、それをサーバーに置くことができるのです。
ただ、Vueを触ったことがなくてNuxtを独学で挑戦しようとするのは、
「初めてのプロジェクトは小さく始めよう」で前述したとおりの理由で、
なにか問題が起きた時に解決するのにひどく手こずってしまうのではないかと心配です。
逆に、「既に動いているNuxtのプロジェクトがあって、途中でそこへアサインされた」とかなら
動いているコードを参考にバリエーションを増やしていけばいいし、困った時は既に知見のあるメンバーから聞けばいいのでガンガン行こうぜ！でいけると思います。
コンポーネントを分割しないで始める
「Vueのいいところはコンポーネントに分割できるところだ！」
はい、そのとおりです！すごくいいところです。
だからといって、いきなり小さいコンポーネントから作っていくのはちょっと待ったほうがいいかもしれません。
慣れないとデータの受け渡しが思った通りにいかなかったりして、結構大変だったりします。
Vueだけで新しい画面を１つ作るなら、1画面分。
既存のページを部分的に置き換えて作るなら、パーツ1個分。
とりあえず使いまわしを考えないで、1コンポーネントで1ファイルで作りきってしまう。
これがハマらないで滑り出すコツかなと思います。
プロジェクトの構造に関わるライブラリを追加したいとき
vuex、vue-router、単体テスト、e2eテストなど、プロジェクトの構成に大きく関わるライブラリを途中で追加したくなったとします。
そんなときは、いきなり今のプロジェクトにnpmからライブラリを追加する前に、vue cliで目的のライブラリを同梱した別のプロジェクトを作ってみると便利でした。
ディレクトリ構成やコードの書き方、設定方法など、
一通り最小限の状態で動くプロジェクトができあがるのが参考にしやすかったです。
データ加工のためのライブラリやUIコンポーネントはプロジェクトの構造を変化させるようなものではないと思うので、すすっと追加してしまって大丈夫です。
部分的にVueを導入する
どうしてもVue-cliからプロジェクトを始めるとSPA的なイメージで
「HTMLはスカスカ」「全部Vueのコンポーネントに書いていく」イメージになりやすいですが、
部分的にVueを導入していくこともできます。
部分的にVueを導入していくときのイメージ
コンポーネント＝カスタムタグを作るイメージです。
Vueが有効なエリアの中でなら作ったコンポーネントを自由に呼び出すことができます。
配置したいHTMLで、Vueで作ったコンポーネント（＝カスタムタグ）を含めたHTMLを普通に書いてください。
Vueではない普通のタグもそのまま使うことができます。
また、コンポーネントの中だけでなく、HTMLに普通にVueのテンプレートコードを書いても普通に展開されていきます。
部分的にVueを導入するときに絶対にやってはいけないこと
Vueでレンダリングしている部分について、生のDOMを直接書き換えないでください。
平たくいえばjQueryとかを使ってVueのコンポーネントを書き換えてはいけないということです。
Vueを含めた最近の高速に動作するフロントエンドフレームワークは「仮想DOM」というデータから生のDOMへ一方的に書き込むという方法で高速化を図っています。
仮想DOMは現在のDOMの状態を読み込まないため、外からの変更を検知することができません。
このあたりについてはmizuchiさんの「なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita」という記事が詳しいです。
まとめ
プロジェクト作成編のTipsは以上となります。
「何が一番よい方法なのかわからない！」「本当にこの方法であってる？」って悩んでいた私に伝えたいことプロジェクト作成編でした。
最近はvue-cli-ui の登場や猫本こと「基礎から学ぶ Vue.js」、「Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ（NextPublishing）) | 渡邊 達明 | 工学 | Kindleストア | Amazon」の登場など、Vueを初めやすい環境が整ってきました。
簡単かつすぐに目に見えて動いてくれるVue.jsが大好きなので、
「Vue.jsはいいぞ」と締めさせていただきます。
余談：ES6 について
jQuery全盛期の頃のJavaScript(ES5)よりシンタックスが拡張されていますが、後方互換にものすごく気を使ってるのでそれほど意識しないでも書けると思います。
なにが変わったのか一度目に通しておくと、なにかとはかどるかと思いますが、
実際によく使ったのは下記の記法でした。
- let, const（ブランケットでスコープが制限できる変数宣言）
- オブジェクトのメソッド(thisを束縛する)
- アロー関数(thisを束縛しない)
- テンプレート文字列
- for ... of、 for ... in(foreach的なループ構文)
- デフォフト引数(むしろできなかったことが驚き)
これに加えて、JS部分の処理だけを部分的に切り出したくなったらimportとexportについて調べると良いような気がします。