【リンク集】役立つドキュメント

Vue.jsは、ドキュメントが充実している点も魅力の1つです。ここでは、Vue.jsの利用するうえで役立つリンクをまとめています。

Vue.js

ガイド

https://jp.vuejs.org/v2/guide/

ストーリー形式の解説がされています。
初めてVueを利用されるかたが、まず最初に読むべきドキュメントです。

クックブック

https://jp.vuejs.org/v2/cookbook/

下記のように独立した解説が掲載されています。

  • VS Code によるデバッグ
  • Vue コンポーネントを npm パッケージ化する

APIリファレンス

https://jp.vuejs.org/v2/api/

コンポーネントは全てVueインスタンスです。

Rootインスタンス          // new Vueで作成されたVueインスタンス
 ├─ Headerコンポーネント   // Vueインスタンス
 ├─ Menuコンポーネント     // Vueインスタンス
 │  ├─ Itemコンポーネント  // Vueインスタンス
 │  └─ Itemコンポーネント  // Vueインスタンス
 └─ Footerコンポーネント   // Vueインスタンス

APIリファレンスから インスタンスプロパティ インスタンスメソッド の利用方法を確認できます。

スタイルガイド

https://jp.vuejs.org/v2/style-guide/

下記のように、Vue.jsを利用する上で気をつけるべき記述方法を確認できます。

  • コンポーネントの命名
    • 複数単語にすべき
    • 1つしかアクティブにならないなら The というプレフィックスをつける
  • v-for と一緒に v-if を使うのを避ける

定期的に読み返したい内容です。

利用例

https://jp.vuejs.org/v2/examples/

下記のように、Vue.jsの利用例を確認できます。

  • Markdown エディタ の例
  • Firebase + バリデーション の例

リポジトリ

https://github.com/vuejs/vue

Vue CLI|開発環境構築ツール

概要

Vue CLIを利用することで、Vue本体以外にも「Babel」や「ESLint」などフロント開発に必要な環境を手軽に構築できます。

リンク

Vue Loader|Webpackのローダー

概要

Webpackのローダーです。SFC(Single-File Component) 形式で書かれた .vueファイル をJavaScriptコードにコンパイルします。

リンク

Vuex|状態管理

概要

Vuexは、アプリケーション内の全てのコンポーネントで共有する 状態 を管理します。
以下のようなケースで活躍します。

  • 兄弟コンポーネント間でデータを共有したいとき
  • 階層が深い親子関係でデータを共有したいとき

アプリケーションの規模が大きくなるほど役立つライブラリです。

構成要素

Vuexの構成要素は以下のようになります。

502-vue-useful-link_vuex.png

store:アプリケーションの状態状態の操作方法を持つコンテナ。

state:アプリケーションの状態。

mutationsstateを変更するためのもの。

actions:必要に応じて外部APIの呼び出しなどを行い mutationを呼び出す。

gettersstateをもとに値を返す。

modulesstoreを管理しやすくするために、ストア内部でモジュール単位に分割できる。

Vuexドキュメントのモジュールで書かれている内容ですが、ソースで表すと以下のようになります。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

リンク

Vue Router|SPAの構築

概要

コンポーネントルート のマッピング機能などを提供しています。SPAを構築したいときに利用します。

リンク

Vue Test Utils|単体テストライブラリ

概要

Vueコンポーネントの単体テストをサポートします。

テストでは、入力 に対して 出力 が期待した結果であることを確認します。

  • 入力
    • ユーザー操作(ボタンクリックなど)
    • propsへの値渡し
    • ライフサイクルメソッドの実行
  • 出力
    • HTMLへ描画
    • イベント発行

リンク

awesome-vue

awesome-vueは、vue.jsに関するリンク集です。3rd Partyの Component Framework Utility などを探すときに役立ちます。

Cheatsheet