はじめに
MVVM フレームワーク初心者の筆者がVue.jsを使ってSPAを開発する際に考えたことを掲載していきます。本記事を通して、これからSPAを開発する人にとっての足掛かりとなれば幸いです。
- 対象読者
- HTML, CSS, JavaScript の経験あり、また jQuery などのJSライブラリの使用経験あり
- React, Angular といった今時のJSフレームワークによるSPA開発未経験
Vue.js に入門したい
Vue.js を使い始める場合、大きく分けて２つの方法があります。
-
<script>タグを使ってjQuery感覚で使用できる環境を整える - vue-cli を使って単一ファイルコンポーネントに特化した環境を整える
環境を整える手間は同じぐらいなので、どちらでも良いと思いますが Vue.js の真価を発揮するなら vue-cli を使った方法を取るのが良いと思います(参考：vue-cliによるVue.js環境の構築(公式サイト))。公式では、npm に精通している必要があるとありますが、とりあえず使用する分には知識がなくても問題ありません（勉強したほうが良いのはよいですが…）。
環境を構築したら、早速何か作りましょう！
JSフレームワークの入門アプリケーションとしては、TODOリストがおすすめです。個人的にモダンなJSフレームワークはデータ操作が重要なので、TODOリストのようなCRUDアプリケーションが入門として好まれている印象です。
記事をいくつかはっておきますので、参考にしてください。
ブラウザ用の開発ツールがほしい
Google Chrome の拡張機能として Vue.js devtools というものがありますので、これを使うと良いと思います。この拡張機能を導入すると、Vue.jsで開発されたアプリケーションの場合、開発者ツールにVueタブが表示されるようになります。
ページを遷移させたい
公式でライブラリにvue-routerというのがあるので、それを利用すると良いです。vue-cliを使って環境を整えた場合は最初から入ってます。
コンポーネント名の規則や記述スタイルに統一性が欲しい
触り始めると気付くのですが、コンポーネント名の規則や記述するスタイルにいわゆるルールが欲しくなります。そういったときは、
この辺りを読んでおくと幸せになれます。
いきなりすべてを取り入れるにはボリュームがあるので、Progressive に取り入れていくことをおすすめします。
コンポーネントが乱立しないように整理したい
開発が進みコンポーネントが増え始めると、似たコンポーネントが出現したり、再利用できなくなったり、**「そもそも増えすぎたコンポーネントをどう管理したらいいんだ？」**と様々な悩みが出始めます。そんな時は、Atomic Design を参考にしてみてください。詳細は省きますが、Atomic Design とはページのコンポーネントを5段階で分けて整理するデザイン手法です。
記事をいくつかはっておきますので、参考にして下さい。
- Atomic Design を
分かったつもりになる - Atomic Designの考え方と利点・欠点
- 珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで
コンポーネント間で共通処理が出てくるので整理したい
mixinという方法が公式で用意されています。それを使用するのが良いと思います。ただ、あくまでコンポーネントに依存する共通処理をまとめる方法なので、コンポーネント依存しないものは、クラス化するほうがいいんじゃないかと個人的には思います(余談)。
データのバケツリレーを解消したい
Vuexの使用を検討してください。Vuexはアプリケーションの状態管理パターン＋ライブラリです。これはツールであり、概念でもあるのでそれを理解する必要があります。公式でも解説されていますが(参考：Vuex とは何か？）、その背景である Flux について学ぶと良いと思います。
記事をいくつかはっておきますので、参考にしてください。
複雑になったSPAが開発者の意図通りに描画されるか保証が欲しい
今著者が欲しい情報です。特にテスト設計の部分について…
おわりに
今回、モダンなJSフレームワークであるVue.jsで初めてSPAを開発する際に考えたことを書きました（あと初Advent Calendarです笑）。Vue.jsはモダンなフレームワークの中でも学習しやすく、日本語の情報も豊富なので初心者でも比較的簡単に使えるなと感じた一方、情報が多いので 「こういう時どうしたらいいんだろう？」 という情報を探すのが大変だったり、そもそも初心者だから意味がよくわからなかったりと感じることがありました。今回の記事で、少しでも同じような状況な方に対して役立つロードマップ的なものになれたら幸いです。
明日は @kokoe さんです。初心者向けのコンポーネント作成に関する記事です！！