Vue×Piniaで迷わないアプリづくりが、開発をちょっと楽しくしてくれた話

こんにちは、フロントエンジニアの小野です。

普段、WEBサイトやアプリを制作していますが、複数画面をまたぐ入力や非同期処理が増えるほど、状態が散らばりやすく、複雑になることがあります。私自身も「どこで何が変わったのか」を追うのに時間をかけてしまいがちでした。

そんな苦手意識をほどいてくれたのが、Vue公式の状態管理ライブラリ「Pinia（ピニア）」です。少ない記述で「どこに何を書くか」が明快になり、よりシンプルな実装を実現できます。

結果、迷いの少ない設計と、安心して触れるコードに近づけました。

この記事では、Piniaを選んだ理由と導入で得られたメリット、そして実装パターンを具体例でお伝えします。

アプリケーションにおける「状態（state）」とは、アプリがその時点で持っている情報やデータのことを指します。

たとえば、どのデータを表示するか、どの項目が選ばれているか、どの操作が完了しているかといった「今どうなっているか」という情報が状態にあたります。この状態を正しく管理することで、画面の表示やユーザーの操作とアプリ内部の情報が常に一致するように保つことができます。

つまり、状態管理は「アプリの見た目と中身をつなぐ」役割を持っており、スムーズで安心感のあるユーザー体験を支える大切な仕組みです。

状態管理は、単なる技術ではなくユーザー体験そのものに直結します。

「入力した情報が別の画面に正しく引き継がれる」

「ステータスがリアルタイムで更新される」

こうした自然でスムーズな体験を支えるのが、状態管理の力です。

私たちが提供するプロダクトでも、”見た目”や”操作感”だけでなく、”ユーザーにとっての迷いのなさ、安心感”にこだわっています。

状態をきちんと管理することは、そうした設計の考え方を土台から支えてくれる、大切な要素のひとつだと感じています。

Piniaは、Vue.jsにおける公式の状態管理ライブラリです。

（名前の由来はスペイン語で「パイナップル」🍍らしい）

アプリ内に存在するたくさんの情報を整理して保つのがPiniaの役割です。

今回は飛行機の「出発便一覧を管理するアプリ」を例として、Piniaの具体的な書き方を見ていきたいと思います。

このアプリにおける「情報」には以下のようなものがあります。

• どの便がいつ出発するのか
• 遅延している便はどれか
• 便のステータスを変更したいときどうするか？

Piniaでは「ストア（store）」という単位で状態を管理します。

ストアの中身は主に以下の3つです。

stateには、出発予定のフライト情報を持たせます。たとえば「便名・目的地・出発時刻・現在のステータス」といった情報です。

gettersは、stateにあるデータを必要な形に加工して取り出すための仕組みです。

たとえば、「遅延している便だけを表示したい」といった場合に、全フライト情報から条件に合うものだけを抽出するロジックをgettersにまとめておくことで、後でVueのコンポーネント側で呼び出すだけで使えます。

actionsは、状態（state）を変えるための関数をまとめる場所です。

たとえば、便のステータスを「On Time」から「Delayed」に変えたいとき、actionsにそのやり方を書いておけば、あとはVueのコンポーネント側で呼び出すだけです。状態が変わると画面の表示も一緒に変わるので、ユーザーは今の状況が正しく見えるようになります。

たとえば、以下のような出発便一覧画面があるとします。

その裏側では、stateが便の一覧を保持し、gettersが遅延便をフィルタし、actionsがステータス変更を担っています。Piniaがあることで、状態と表示を自然につなげることができ、ユーザーにとって心地よい体験を作りやすくなります。

• シンプルで直感的
  Piniaの特徴は、なんといっても「シンプルさ」。専門的なコードを書かなくても直感的に使えるので、開発初心者やチームで開発する際にもとても助かります。私自身、状態管理について学び始めたばかりの時に触ってみたのですが、機能がシンプルで、慣れるのにそこまで時間がかかりませんでした。
• TypeScriptに標準で対応
  PiniaはTypeScriptとの相性がとてもよく、ストアの中のデータの種類や形をきちんと把握してくれるので、開発中に「何をどう使っているのか」が明確になります。バグを事前に防ぎながら開発を進められるためとても安心です。
• Vue公式サポートで周辺ツールとの相性が良い
  PiniaはVue.jsの公式チームによって開発されているため、Vueの最新版との相性がとても良く、将来的なアップデートや保守の面でも安心できます。 また、Vue Router（画面の切り替え）、Vue Devtools（開発中に状態を見るツール）などのシステムとの連携がスムーズにできるのも強みです。

正直なところ、私はあまり複雑な構成や仕組みが得意ではありません。設定が多かったり、コードの構造が入り組んでいたりすると、それだけでハードルが高く感じてしまいます。でもPiniaを使ってみて、「シンプルであること」がどれだけ開発を快適にしてくれるかを実感しました。

• 書くコードが少なくて済む
• 無理に覚えるルールが少ない
• 機能の役割がはっきりしている

こうした要素がそろっていることで、全体がとても見通しよく、扱いやすさを実感できました。

チーム開発でも、誰かの書いたコードを読んだときにすぐに理解できる場面が増え、「共有しやすい仕組み」でもあると感じています。

Piniaは、Vueの状態管理をシンプルで直感的にしてくれるツールです。「難しいことを覚える」よりも「自然に迷わず使える」ことの方が実はずっと大切なのではと、Piniaを使ってみて実感しました。

私たちが目指す「迷いなく使えるUI」や「気持ちの良い体験」をつくるうえでも、状態を正しく扱えることはとても重要だと考えています。

これからも、自分にもチームにもユーザーにもやさしい、そんな開発を目指していきたいと思います。

ちなみに、VeuではなくReactというフレームワークを使った際に「Zustand」という状態管理ライブラリも試してみました。
これもまた、Piniaと似たような“ちょうどよさ”があって、とても気に入っています。

大がかりなセットアップもなく、状態の定義もすごく簡単で、必要な部分だけをサクッと取り出して使えるので、「あ、Reactでもこういう軽やかなツールがあるんだ」とうれしい発見でした。

シンプルな構成で、使い方もわかりやすいので、Reactを使っている人なら一度は触ってみる価値があるかと思います。
「学習コストが低くて、だけどしっかり役に立つ」そんな点がPiniaとちょっと似ていて、個人的には好感を持ちました。