Vue.js

【Vue.js】勉強しながら開発したときのメモ

※ WIPです。

理解のための言語化

Vue.js

  • Vue.jsの設計思想に、プログレッシブフレームワーク（Progressive Framework）という考え方がある
    • フレームワークは、どんなとき、どんな規模でも、段階的に柔軟に扱えるべき
  • jQueryでは、イベント検知 → DOM操作が絡み合った複雑な状態で、大規模になるほどメンテナンス不能になる
  • Vue.jsでは、イベントによるUI状態の変更、UIの状態変更に伴ったDOMツリーやDOM要素の更新を分けて考えれる

Vuex

  • Vuex とは、Vue．ｊｓ のために開発された状態管理ライブラリ
  • 状態管理をすることで、コンポーネントをまたいでデータの受け渡しをしやすくできる
  • 親 と 子 での値受け渡しで管理するのではなく、状態遷移の仕組みを構築して一括管理する
  • コンポーネント → アクション → ミューテーション → ステート → ゲッター → コンポーネント
  • Vuex の state は、アプリケーション全体の状態を保持するオブジェクト
  • state と コンポーネント どちらで管理するか

mutations

  • mutations は、state を更新するために用いるもの
  • Vuex の規約として、mutations を使わず state を更新するのは禁止である
  • store.commit('mutations の名前') を使って呼び出す
  • mutations 内で行う処理はすべて同期的に実行する必要がある
    • 非同期処理を行う場合は、actions を利用する

actions

  • actions は、非同期処理や外部APIとの通信を行い、最終的に mutations を呼び出す
  • store.dispatch('actions の名前') を使って呼び出す
  • ハンドラー側の第一引数に、contextと呼ばれる特別な引数が渡される

モジュール分割

  • namespaced オプションを利用することで、名前空間を登録できる
  • getters、mutations、actions の呼び出しにモジュール名を付与できる
    • store.getters['モジュール名/ゲッター名']
    • store.commit('モジュール名/ミューテーション名')
    • store.dispatch('モジュール名/アクション名')

勉強に役立つサイト

Vue.js

Vue Router

Vuex

勉強に役立つ本

スタイルガイド

  • 公式ガイドが参考になる
  • 以下、迷ったところの判断メモ

ファイル名は パスカルケース or ケバブケース

それぞれのメリデメは下記だが、grepのしやすさを考えるとパスカルケースが良さそう

  • パスカルケース (PascalCase)
    • コンポーネントを参照する方法と一致しているので、コードエディタ上でオートコンプリートが可能な場合はとてもうまく働く
    • 大文字と小文字が混ざったファイル名は、大文字と小文字を区別しないファイルシステム上で時々問題を起こす可能性がある
  • ケバブケース (kebab-case)
    • 大文字、小文字を区別しないファイルシステムでも問題なく動く

コンポーネントの参照もパスカルケースにする場合は、以下の点にも気をつける必要がある

  • DOM 内 (すなわち、文字列でないテンプレート) に直接使用する場合には、ケバブケースの名前のみが有効なのに注意する
    • つまり、Rails等のViewではパスカルケースは使えないことに注意する
  • 詳細は、コンポーネントの命名ケース

-Vue.js