月: 2021年7月

Vue.jsの特徴やライフサイクル、Vuexなどについて改めて理解を深めるためにも自分なりに整理しました。 Vue.jsの特徴 Progressive Framework Vue.jsの特徴として、Progressive Frameworkという概念に基づいて開発されています。 ビルドシステムを利用せずにVue.js単体で使うことやVuexやvue-routerを使って動的なWebアプリケーションの構築もできます。 Declative Rendering 宣言的なDOMレンダリングに関する領域 テンプレートにレンダリングする対象を宣言的に記載することでDOMレンダリングやユーザによる入力データの同期が可能になります。Vue.jsでは本体自体でこの領域をサポートしているため、LPのようなシンプルなWebサイトはじめ、小規模的なものはこの領域で解決できます。 Component System UIをモジュール化して再利用する必要がある領域 Vue.js本体自体にコンポーネント化する機能があるため、それによって開発効率を向上させることが可能になります。 Client-side Routing WebサイトがSPAとして必要とされるWebアプリケーションの領域 Vue.jsが提供しているルーティングライブラリのvue-routerを利用することで、これまでに作成したコンポーネントでSPAに対応することが可能になります。 Large-scale State Management コンポーネント間で状態の共有方法が必要となる領域 Vue.jsが提供している状態管理ライブラリのVuexを利用することで、既存のコンポーネントを拡張する形で状態を集中管理することが可能になります。 Build System コンポーネント管理やプロジェクト構成などの領域 Vue.jsが提供しているvue-cliやvue-loaderなどを利用することで、プロジェクトの環境構築や構成管理の手間が省略かされ、継続的な開発を持続できるようになります。 参考： https://vuex.vuejs.org/ja/ https://gihyo.jp/dev/serial/01/vuejs/0001?page=2 https://qiita.com/mikakane/items/3bd6af69259f5af6fecb Hello!! Vue.js 最新プログレッシブフレームワーク入門 ライフサイクル ライフサイクルフック Vueのインスタンスは、インスタンスを生成時やDOM要素へのマウント時、データ更新時など、ある特定のタイミングでユーザが処理を行えるようにいくつかのライフサイクルフックが実行されます。 beforeCreate インスタンスの初期化時に実行されます。dataなどのプロパティは生成前のためアクセスできません。 created インスタンスの初期化後に実行されます。この時点でプロパティへのアクセスが可能になります。 beforeMount マウント前に実行されます。この時点ではDOM要素にはアクセスできません。 mounted マウント後に実行されます。この時点でDOM要素へのアクセスが可能になります。 beforeUpdate DOM更新前に実行されます。 update DOM更新後に実行されます。 beforeDestroy インスタンスの破棄の前に実行されます。この時点ではプロパティへのアクセスは可能です。 destroyed インスタンスが破棄された後に実行されます。この時点からプロパティへのアクセスはできません。 ライフサイクルフックの動きを確認する 実際にいくつかのライフサイクルフックを使って動きを確認してみました。 beforeCreate インスタンス初期化時に実行されます。このタイミングでは、インスタンスは初期化前ですので、msgは呼ばれません。 [crayon-67169c3fb5f6e346175997/] [crayon-67169c3fb5f74922987130/] created インスタンス生成後に実行されるため、msgが呼び出されます。 [crayon-67169c3fb5f75014935350/] [crayon-67169c3fb5f76381521959/] beforeMount インスタンスが作成された後、elementへのマウントされる前で実行されます。 そのためmsgは更新されず、「Welcome to Your Vue.js App」と表示されます。 [crayon-67169c3fb5f77681574337/] [crayon-67169c3fb5f78212638176/] mounted elementへのマウントがされた後に実行されるため、msgが更新され「Update Your Vue.js App」と表示されます。 createdとの違いとしてmountedは、elementへのマウントが行われた後処理されます。また、mountedはSSRの場合は使えないので注意が必要です [crayon-67169c3fb5f79256346194/] [crayon-67169c3fb5f7a763376545/] 参考： https://jp.vuejs.org/v2/guide/instance.html https://vueschool.io/lessons/understanding-the-vuejs-lifecycle-hooks?friend=vuejs Vuex VuexとはVue.js アプリケーションのための 状態管理パターン + ライブラリです。 Vuexを使うことで、複雑に構成されたコンポーネントでのデータ管理の難しさを解決することができます。 Vuexという一つの入れ物にデータを入れることで、どのコンポーネントからでもVuex内に保持するデータへのアクセスが可能になります。 Actions API等と非同期通信を行い、データを取得します。取得後はデータをコミットし、Mutationsを呼び出します。 Mutations Actionsやコンポーネントからデータがコミットされた時に呼び出されます。唯一State内のデータを変更することが出来ます。 State 各コンポーネントで使用するデータはここに集約します。 Vuexの使いどころ Vuexの使いどころについては以下の記事がとても参考になりました。 そもそもVuexを使うべきか、使うとしてもOrganismレベル以上のコンポーネントからのみStoreの参照、変更を許可するなど、どういったルールで運用すべきかを考慮することが大切です。 参考： https://python.ms/vuex/#vuex-%E4%BB%A5%E5%A4%96%E3%81%AE%E3%82%A2%E3%83%95%E3%82%9A%E3%83%AD%E3%83%BC%E3%83%81

Vue.jsの特徴やライフサイクル、Vuexなどについて整理する