クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

【Vue.js】Vuexの「状態管理」はいったい何の状態を管理しているのか調べた

Vue.jsの続きです。前回まではNuxt.jsのプロジェクトを見ていきました。今回からは状態管理ライブラリ「Vuex」に取り組んでみます。まず「状態管理」とはなんぞや、何の状態を管理するのか?というところからいろいろ調べてみました。それではいきましょう!

Qiitaアドベントカレンダー(Vue #2)9日目の記事です。
※参考:Vue #2 Advent Calendar 2019 - Qiita

【目次】

※参考:前回記事
【Vue.js】$route.paramsと$route.queryでパスやGETパラメータから動的にページを作る - クモのようにコツコツと

※参考:Vue.jsの習得のためにやったことまとめ
qiita.com

Vuexとは何か

公式サイトによると

Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。

※参考:Vuex とは何か? | Vuex

うーむ、いまいちピンとこない解説。

何かの状態を管理できそうなことはわかる。その後「予測可能な方法によってのみ状態の変異を行うというルールを保証」とか「アプリケーション内の全てのコンポーネントのための集中型のストアとして機能」とか、まるごとよくわからない。。

この中で固有っぽい単語は「ストア」。お店、ではないよねコレ。しかしそれ以外の一般的な単語で書かれている部分もいまいちイメージが湧かない。

もう少し噛み砕いた解説をしてくれている記事がありました!

ここでいう状態とは、アプリケーションが保持するデータのことです。Vuexを使うことでそれらのデータを一元管理することができます。しかも、それらのデータは全てのコンポーネントから参照することができる

※参考:Vuexとは。まずはこれを読んでVuexの概要を理解しよう。|たのしいWeb開発

なるほど。複数のコンポーネントを跨いで同じデータを参照したい場合に使うわけか!わかりやすい。

Vuexを使わないデータのやり取り(propsと$emit)

先ほどの記事の続き

もしpropsや$emitを使っていてデータの受け渡しが複雑になってしまっている場合は、Vuexの導入を検討してみるといいかもしれません。

※参考:Vuexとは。まずはこれを読んでVuexの概要を理解しよう。|たのしいWeb開発

propsについては以前、コンポーネントの記事でも触れた。コンポーネントに値を渡す設定をするオプション

※参考:【Vue.js】コンポーネントにpropsオプションで値を渡す - クモのようにコツコツと

$emitはコンポーネント間でデータを渡すメソッドのようだ。

「コンポーネント間のデータのやり取り」では「親から子」にdataを伝達する手段「props」、そして「子から親」にdataを伝達する手段「emit」が存在します。

※参考:【Vue.js】【図解】emit、propsを使ったコンポーネント間のデータのやり取り | orizuru

コンポーネントの親子関係で親から子はprops、子から親はemitと対な関係になっている。

こちらの記事の図もわかりやすかった!

※参考:Vuexについてまとめてみた - Qiita

今までは都度propとemitを繰り返していたがvuexを使うと f:id:idr_zz:20191203050306j:plain どのコンポーネントからでも呼び出せるのでデータが扱いやすくなった f:id:idr_zz:20191203050312j:plain

Vuexの源流(Redux、Flux 、The Elm Architecture)

Vuexの元となったアイデア

再び公式サイト。下の方にこのような記述がある。

Vuex の背景にある基本的なアイディア
Flux、 Redux そして The Elm Architectureから影響を受けています。

※参考:Vuex とは何か? | Vuex

これらがVuexの背景となったアイデアのようだ。FluxとReduxは名前も似ている。

Fluxとは

こちらの記事によると

Fluxって?
Facebookが提唱しているアーキテクチャで、JavaScriptのデータの流れを分かりやすく整理するために使われます。
JavaScriptはイベントドリブンなため、様々なデータの流れがあり複雑化しやすくなっています。
そのためFluxではその流れを一方向にまとめよう!といったことをやっています。

※参考:結局FluxやらReduxやらって何なのか個人的なまとめ - Qiita

ふむふむ。JSのイベント部分とデータの流れを分離して管理しようと。Facebook製なのね。

Reduxとは

同じ記事のReduxの解説。

んじゃReduxって?
ReduxはFluxの派生ですが、Fluxとの違いは色々とあります。
Reduxには三原則があったり、FluxにあったDispatcherがReduxにはありません。
また、stateオブジェクトに対し直接変更を加える事はせず、新しいstateオブジェクトを作成する方法をとっています。

※参考:結局FluxやらReduxやらって何なのか個人的なまとめ - Qiita

Fluxとは少し違いがあるようだが、基本的なコンセプトは同じと。

先にFluxやReduxを経験している方にとってはVuexは入りやすいんだろうな。「あー、この機能はReduxでいうアレか」「この機能はReduxと違うんだな」とか比較対象になるので。

The Elm Architectureとは

3つ目の「The Elm Architecture」とはなんだろう。公式サイトによると

The Elm Architecture は、ウェブアプリケーションを構築するためのシンプルなパターンです。モジュール性やコードの再利用性、テストのしやすさなどに優れています。つまり、複雑なアプリケーションを作るときでも、安心してリファクタリングしたり機能を追加できるようにしてくれるのです。

※参考:The Elm Architecture · An Introduction to Elm

うーむ、いまいち抽象的でよくわからない。Flux、Redux、Vuexよりももっと広いアプリ開発全般の概念な気がする。。

ストア=データを保持するコンテナ

Vuexを理解する上でおそらく大事な概念と思われる「ストア」について。(冒頭に書いた公式サイト解説上の固有な単語)

公式サイトの別ページにはこう解説されている。

※参考:Vuex 入門 | Vuex

Vuex アプリケーションの中心にあるものはストアです。"ストア" は、基本的にアプリケーションの 状態(state) を保持するコンテナです。

うむ。これまで読んできた記事を理解した上で見ると、この文章も理解できる。アプリケーション内でコンポーネントを跨いで管理したいデータがこのストアというコンテナに保持されているわけだ。

これを踏まえて最初の解説を読み直すと…

Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。

※参考:Vuex とは何か? | Vuex

いくらか読みにくさは残るものの一番最初に読んだときよりはイメージしやすくなった。

予測可能な(シンプルな)方法で、状態(データ)の変異(受け渡し)を行うことができ、アプリケーションの全コンポーネントに対する集中型の(一元化した)ストアとして機能する。

みたいな感じかな。ふ〜、やっとわかった。

Vuexのインストール方法

Vuexをインストール方法。公式サイトによると

jsファイルをリンク(Promiseも必要)

※参考:インストール | Vuex

jsファイルのリンクだけでも使えるみたい!

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

その下にPromiseについての記述もある。

Vuex は Promise (プロミス) を必要とします。

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

CDNでリンクしている。

「Promise」は非同期処理を簡潔に記述できるAPI。コールバック地獄(入れ子)ではなくチェーン状に記述できる。

※参考:今更だけどPromise入門 - Qiita

以前の記事で触れた「axios」もPromise ベース

※参考:【Vue.js】axiosでJSONファイルを読み込む(酒が飲めるぞ!編) - クモのようにコツコツと

CDNからjsファイルをリンク

VuexはCDNのリンクもあった!

※参考:【Vuex】CDNでVuexの最初の一歩を踏み出す - Qiita

  <!-- Vue.js(開発バージョン) -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- Vuex -->
  <script src="https://unpkg.com/vuex"></script>
  <!-- Vuexを使うときはPromiseも必要 -->
  <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

npmでインストール

npmでインストールする場合は、ターミナルで下記のコマンドを打つ。

npm install vuex --save

Promiseも入れる場合は下記のコマンド

npm install es6-promise --save # NPM

※参考:インストール | Vuex

Vue CLIは組み込み項目として選択可能

Vue CLIを導入する場合、以前の記事にも書いたように、インストール時に組み込み項目の選択でVuexも一緒に選べる。

※参考:【Vue.js】Vue CLIのプロトタイプとプロジェクトを作る - クモのようにコツコツと

この中から選べる

* Babel
* TypeScript
* Progressive Web App (PWA) Support
* Router
* Vuex
* CSS Pre-processors
* Linter / Formatter
* Unit Testing
* E2E Testing

Nuxtは最初から組み込まれている

以前の記事でも書いたように、Nuxt.jsをインストールしている場合は、Vuexは最初から基本構成として組み込まれている

Nuxt.jsは下記のもので構成されている。

  • Vue 2
  • Vue Router
  • Vuex(ストアオプションを利用している場合に限る)
  • Vue Server Renderer(mode: 'spa' を利用している場合を除く)
  • vue-meta

※参考:【Vue.js】Nuxt.jsで何ができるのか調べた(SSR、ルーティング、静的ファイル生成など) - クモのようにコツコツと

最後に

ということで、今回はVuexの概要を理解するためにいろいろ調べてみました。なんとなくイメージは湧いてきた。次回は実際にVuexを体験してみたく。Nuxt.jsには最初からVuexが組み込まれているので、そこの上で何か書いてみます。それではまた!


※参考:Vue.jsの習得のためにやったことまとめ
qiita.com