Zenn
📝

フロントエンドの「状態」の入門

2022/12/17に公開
Vue.js
Vuex
frontend
tech

状態管理についての整理

要約

状態管理は、アプリケーションの状態をデータとして表現することを指します。

特にフロントエンドでは、アプリケーションの状態がビューに影響を与え、ユーザーのアクションが状態を変更するサイクルがあります。

状態管理を適切に行なうことで、アプリケーションの保守性や性能を高めることができます。

Vue.jsでは、Vuexというライブラリを使って状態管理を行なうこともできます。

まえがき

フロントエンドエンジニアになって、「状態」というワードをよく耳にすることが多くなりました。

改めて自分の理解の整理もかねて、まとめておこうと思います。

なお、著者はVueを業務で使っているため、Vueベースでのお話になります。

参考とした著書は「みんなのVue.js」という本です。

状態とは

アプリケーションは、ユーザーとシステムが「状態」を介してやり取りを行なうものです。

「状態」はアプリケーションのふるまいを決定するもので、状態管理を適切に行なうことでアプリケーションの性能や保守性を高めることができます。

どういう「状態」にあるか、によってユーザーが見ているもの、操作する対象が変わります。

MVC モデルに親しみがある型は、対象のデータの Model+Controller というイメージでいいかもしれません。

↑ 違う気がしたので削除しました。

状態管理とは

システムの状態をデータとして表現したものを指します。

上の文章だと抽象的すぎるので、もう少し具体的解説します。

Webアプリケーションが持つ状態は以下の４種類があります。

状態 具体例
UI の状態 モーダル表示状態やタブ選択状態
DB からのデータ ブログの記事データ、商品データ
通信処理の状態 あるデータの読み込み中
ナビゲーションの状態 アプリケーションのどの位置にいるのか

状態管理は、こうした「アプリケーションの状態を表現するデータ」を適切に扱うことを指しています。

フロントエンドの状態管理

特にフロントエンドは、状態は以下の図のように作用します。

image-20221215215741379

この図のように「状態」「ビュー」「アクション」をサイクルで関係しあいます。

  • 状態：前述したとおり
  • ビュー：UIを通してユーザーへ状態を伝え、ユーザーの操作を促す。
  • アクション：ユーザーからの入力に応じて、何らかの処理が行なわれる。

また、昨今のフロントエンドでは状態を疎結合に持つため、部品（＝コンポーネント）ごとに状態管理を行ないます。

イメージとしては以下図の通り。

image-20221215221428606

コンポーネントごとの値の受け渡しは「Prop down,event up」という記述の通り、特定の操作でしか受け渡せないようになっています。

出入口を絞ることで管理しやすいアプリケーションになりますが、反対に状態の自由度がなくなってしまうことが問題になりました。

その問題を解決するためにFluxという思想から、VueだとVuexという状態管理ライブラリが生まれたという背景があります。

状態の種類

状態には2種類存在します。「状態データ」と「派生データ」です。

それぞれについて、Vueでの例を交えながら説明します。

  • 状態データ

一般的な状態はこちらになります。Vueのオプションでいうと、Dataにあたります。

  • 派生データ

状態データをもとに算出されるデータを指します。Vueのオプションでいうと、Computedにあたります。

状態管理の方法

コンポーネントでの管理

メリット

  1. 状態とコンポーネントの関係性がシンプルになる

    コンポーネントの状態を、そのコンポーネントのライフサイクルにゆだねることができます。

    そうすることで、状態とコンポーネントの関係性をシンプルにとらえることができます。

  2. コンポーネントの依存関係が明確になる

    「Prop down,event up」で出入口が1つになっているため、意図しない状態の変化が起きづらい設計にできます。

  3. (Vueの場合は)単一ファイルコンポーネントの利点を最大化できる

    SFCを使うと、「状態」「ビュー」「アクション」を1つのファイルで管理できます。

    ストア使うと、状態がファイルの外に依存してしまい、見通しが悪くなります。

状態管理ライブラリでの管理

概要

コンポーネントでの管理は出入り口が1つになる代わり、俗にいうデータの「バケツリレー」が発生してしまいます。

その「バケツリレー」を回避するために使われるのがVuexのような状態管理ライブラリです。

詳しいコード等は載せませんが「信頼できる唯一の情報源」みたいなもの想像してください。

メリット

  1. 状態集中を集中管理できる

    ストアで管理される状態が、アプリケーション全体における「信頼できる唯一の情報源」となります。その情報を使いまわして使うことで、アプリケーション内のデータの重複を減らすことができます。

  2. コードが構造化される

    Vuexでは「ステート」、「ゲッター」、「ミューテーション」、「アクション」といった四つの概念に整理されることで、コードが理解しやすくなります。

  3. 状態の変更経路を予想しやすくなる

    「ミューテーション」のみで、状態が変わることで、どこで値が変更されたか理解するのが容易になります。

  4. Vue.js dev toolの高度なデバッグ機能を利用できる

    拡張機能「Vue.js dev tool」が使えることで、ステートの変更履歴をスナップショットとしてたどることができます。

あとがき

学習するほど「状態」という抽象的な概念について、具体的な理解を得ることができました。

ほかのフレームワークとの比較ができたらより面白そうですね。

GitHubで編集を提案

Discussion