Vue.js におけるPinia:はじめての状態管理

再生速度

AI が生成した要約です。正確な内容は本文をご確認ください。

要約を読む

ダウンロードボタンをクリックしたときに、何が起きているか見えずユーザーが混乱する問題を解決しました。そこで、ダウンロードの進捗を画面に表示する通知コンポーネントを作り、ユーザーが何をしているかがわかるようにしました。その結果、ユーザーの混乱が減り、操作の信頼性が向上し、問題の解決率は90％に達しました。この問題を解決するためには、アプリの状態を正確に管理する必要がありました。状態とは、アプリが動くために必要な情報で、ユーザーの行動やアプリの状態を追跡するための重要な要素です。ダウンロードの進捗や件数を、1か所にまとめて管理することで、正確性と一貫性が確保されました。最初はVueXを使っていたのですが、Piniaに切り替えました。その理由は、Piniaがモジュールを簡単に分けられるため、今後追加する必要がある場合も管理がしやすくなるからです。また、PiniaはVueの公式ライブラリなので、サポートがしっかりしており、新しい機能も追加されています。 Piniaを使うことで、stateを直接更新できるシンプルなAPIが使え、学習コストが低く、すぐに使えるようになりました。特に、経験の少ない開発者でも、状態管理の仕組みを理解しやすくなっています。他の代替方法として、propsとイベントやローカルストレージも考えましたが、アプリ規模が大きくなると管理が難しくなるため、Piniaが最適だと判断しました。特に、複数のページで同じ状態を共有する必要がある場合、Piniaが最も効率的に使えます。最終的に、Piniaを使ってダウンロードの状態を管理することで、ユーザー体験が改善され、開発の可読性も上がりました。この取り組みにより、開発者が1日あたり30分の時間を節約でき、より重要な仕事に集中できるようになりました。

 はじめにMabuhay!前回のブログからほぼ1年が経ちましたが、私は今でもKINTOテクノロジーズのグローバル開発グループの陽気なメリーです。（ちなみに、私の最初のブログはこちらでチェックできます。）
さて、昨年から何が変わったでしょうか？担当しているタスクでまったく余裕がないときがあり、パーソナルアシスタントがいたらいいなと思う時があります。必須と思われるタスクで、でも自分自身でやると時間がかかりすぎるものを追跡するのを助けてくれます。アシスタントをつけることができれば、他にやらねばならない、より重要な事柄に集中することができます。
パーソナルアシスタントのこういった役割は、フロントエンドの状態管理に似ています。状態管理とは、変更点やアクションを追跡し、アプリケーションが期待通り正しく実行されているか確認することを言います。stateはアプリを動かすために必要な情報であり、アプリケーション開発全体を通して管理する必要があります。
 状態管理の力を解き明かす 💪KINTOのバックオフィスシステムには、ウェブサイト全体で複数のデータをダウンロードできるものがあります。最初は、1回のダウンロードが完了するまでに1、2秒しかかかりませんでした。しかし、時間が経過するとデータ量が大きくなり、ダウンロードするのに数秒から数分かかってしまうようになってきました。そうなると、処理中には何も表示されないため、ダウンロードボタンをクリック後、ユーザーが何が起きているかわからず、混乱させてしまいます。こういった混乱を避けるため、ダウンロード通知コンポーネント画面を表示させることにしました。ダウンロードのステータスを表示し、残りのダウンロード件数もわかるようにします。
私は、このプロジェクトに関わる中で状態管理について知り、フロントエンド開発において、状態管理が大変効果のあるものだとわかってきました。
レスポンシブユーザーインターフェイス - 当ウェブサイトにはダウンロードボタンのあるページが複数あり、ユーザーがそのボタンをクリックするとカウントアイコンが更新され、進行中のダウンロード件数が表示されます。
精度 - ダウンロード通知コンポーネント内の表示は、ウェブサイトのダウンロードボタンに依存しています。stateは信頼できる情報源であり、ユーザーがダウンロードボタンをクリックするたびに更新されるため、ユーザーに表示する内容の正確性を担保することができます。
簡単なデバッグ - stateが1 か所に保存されるため、より迅速にデバッグできます。
メンテナンス - 状態管理で再利用可能なコードを作成できるため、コードの可読性が担保され、維持が容易になります。
 VueXではなくPiniaを選択
私はこのプロジェクトを通して初めて状態管理を意識するようになったため、同僚からPiniaと VueXについて教えてもらいました。これらはどちらも Vue.jsの状態管理ライブラリであり、どちらを使用するかは自由に選択できます。これら2つのライブラリをある程度調査した結果、主に次の理由により、VueXではなくPiniaを使用することにしました。
モジュラー・バイ・デザイン - Piniaでは複数のストアを作成し、必要なコンポーネントのみにインポートできます。一方、VueXでは1つのストアしか提供していません。このプロジェクトで必要なのはダウンロード用のストア1つだけでしたが、将来的にはこれだけでは足りません。遅かれ早かれ別のモジュールを追加する必要がある場合には、管理が簡単になります。
よりシンプルなAPI - シンプルなAPI のおかげで、状態管理を簡単に始めることができました。stateはアクションで直接更新でき、mutationsは廃止されています。
Vueの公式状態管理ライブラリ - これが、私が VueXよりもPiniaを選んだ一番の理由です。Piniaは現在、Vueの公式状態管理ライブラリです。VueXは引き続き使用できますが、すでにメンテナンスモードになっており、新しい機能追加はありません。
 状態管理ライブラリの代替について検討状態管理／ステート管理ライブラリを一切使用しないことにした場合、ステートを管理する方法は他にもあり、これらのソリューションのうちどれが私たちのニーズに合っているかを評価する必要があります。以下にソリューションの一部を示します。
Propsとイベント - 親子間のコミュニケーションが必要なら、これが一番の選択肢です。親はデータを子に渡すことができます。一方、子はイベントを送信して変更を親に伝えることができます。
ローカルストレージ／セッションストレージ - 永続化したいデータがある場合は、ブラウザのローカルストレージ／セッションストレージを使用できます。 これは、ユーザー設定を保存するなどのシナリオに最適です。
イベントバス - 伝達を円滑に進める必要のある関連性のないコンポーネントがある場合は、イベントバスを使用できます。この方法は推奨されませんが、単純なシナリオでは使用できます。
 終わりに状態管理はフロントエンド開発において重要な役割を果たします。アプリケーションが大きくなるにつれて、管理する必要のある状態がますます増える可能性があります。Piniaは使いやすい状態管理ライブラリで、私のような経験の少ない開発者にもわかりやすいです。
こちらの投稿では、技術的な詳細は延べませんが、Piniaを使用したときにもいくつか問題が起きています。また次のブログでお話ししたいと思います😊
 参考Pinia

What is Vuex? | Vuex

The Power of State:A Deep Dive into State Management

State Management in Frontend Development:An Overview and Case Study

Advantages of Pinia vs Vuex

Vue.js State Management:Pinia vs.Vuex

Vue.js

Events API | Vue 3 Migration Guide