Vue.js の新たな友 Pinia とストア管理のお話

こんにちは、Vue.jsファンの皆さん！株式会社アシストエンジニアリング、エンジニアのsawasatoです！最近現場でVue.jsを使っていて新しく学ぶことも多いため、ここで共有していこうと思います！まず一発目の今日は、Vueの世界で地味に、でも確実に存在感を増しているPiniaについて語りましょう。もしVuexと何年も付き合ってきたとしたら、「また新しいストア管理ツール？」とちょっと眉をひそめているかもしれませんね。でも大丈夫、Piniaはそんなに新しい友達じゃないし、心を開いて迎え入れてみる価値がありますよ！

Piniaってそもそも何？

Pinia（ピニア）は Vue.jsのための公式なストア管理ライブラリです。Vuexの後継的な存在で、Vue 3に最適化されています。Piniaは「簡単に」「わかりやすく」「効率的に」ストアを管理するために作られました。なんと、Vuexの煩雑な書き方を捨てて、もっとすっきりとした書き方に進化しているんです。Vuexを使って「もう少しこうだったら…」と感じたこと、Piniaが解決してくれるかもしれません。

Pinia の魅力

1.シンプルで直感的なAPI
PiniaのAPIはVuexよりもシンプルで、初めて使う人もわかりやすいように設計されています。これにより、「Vuexの書き方が複雑すぎて頭がこんがらがる」という心配がなくなります。Vueの新しいファンも、これなら安心してストア管理を始められるでしょう。

2.型の安全性
PiniaはTypeScriptとの相性も抜群です。型の安全性を重視する開発者にとって、これはかなりのアドバンテージです。「これ、本当にこの型だっけ？」と心配する必要が減り、コーディングがスムーズになります。PiniaとTypeScriptのペアは、パンケーキとメープルシロップのようなものです。素晴らしい組み合わせです！

3.モジュール化が不要
Vuex ではモジュール化が面倒で、途中で「これは本当に必要な工程？」と疑問を持ったことがあるかもしれません。Piniaは、各ストアが独立して定義できるので、モジュールの設定に頭を悩ませる必要がなくなります。作りたいストアがあったら、ただそれを作ればいいだけ。シンプルですね！

実際にPiniaを使ってみよう

言葉だけだとアレなので、簡単な使い方を見てみましょう。まず、Piniaをインストールします。
bash

npm install pinia

そして、メインのmain.jsでPiniaをアプリに登録します。
javascript

import { createApp } from ‘vue’;
import { createPinia } from ‘pinia’;
import App from ‘./App.vue’;

const app = createApp(App);
app.use(createPinia());
app.mount(‘#app’);

次に、ストアを作ってみましょう。
javascript

// stores/counter.js
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++;
},
},
});

このストアをコンポーネントで使うとこんな感じになります。
javascript

<template>
<div>
<p>Count: {{ counter.count }}</p>
<button @click="counter.increment">Increment</button>
</div>
</template>
<script setup>
import { useCounterStore } from '../stores/counter';
const counter = useCounterStore();
</script>

ね、簡単でしょう？VuexのmapStateやmapActionsのあの長々しいインポートとはおさらばです。Pinia のシンプルさを一度知ってしまうと、もう後戻りはできないかも。

Vuexファンも大丈夫！

Vuexの時代を愛していた皆さん、安心してください。PiniaはVuexとは違いますが、根本的な考え方は同じです。Piniaは「ストア管理をもっと楽にしよう」という優しい思いから生まれました。まるでカフェで飲むラテが、ある日エスプレッソマシンで作られるようになって驚いたときのようなものです。違うけど、美味しさはそのままです笑
冗談はさておき、、
皆さんもPiniaを試して、新しいVue.jsライフをもっと充実させてみませんか？きっと開発が楽しくなるはずです！

採用拡大中！

アシストエンジニアリングでは一緒に働くフロントエンド、バックエンドのエンジニア仲間を大募集しています！

少しでも興味ある方は、カジュアル面談からでもぜひお気軽にお話ししましょう！

お問い合わせはこちらから↓
https://official.assisteng.co.jp/contact/