JavaScript 【React】Redux・Zustand・Context API、結局どれを使うべき？
こんにちは、かつコーチです。ここまで3回にわたって、useReducer、Context API、Redux Toolkit、Zustandと、状態管理まわりの選択肢を一つずつ解説してきました。「結局、自分のプロジェクトではどれを使えばいい...
状態管理
JavaScript JavaScript 【React】Zustand入門：シンプルな状態管理ライブラリ
こんにちは、かつコーチです。前回は、状態管理ライブラリの定番であるRedux Toolkitの入門編を解説しました。Redux Toolkitは強力な反面、slice の作成・store の設定・Provider の配置など、覚えることがそ...
JavaScript 【React】Redux Toolkit入門：状態管理ライブラリの定番
こんにちは、かつコーチです。前回は、Context APIを使って実践的なグローバル状態を作る方法を解説しました。Context APIはアプリ全体の状態を共有するのに便利ですが、状態の種類が増えたり、更新ロジックが複雑になったりすると、だ...
JavaScript 【React】Context APIで実践的なグローバル状態を作る
こんにちは、かつコーチです。前回は useReducer で複雑な状態管理を整理する方法を解説しました。今回は、その useReducer とセットでよく使われる「Context API」を使って、複数のコンポーネントから参照できるグローバ...
JavaScript 【Vue】Piniaとは？
こんにちは、かつコーチです。Vuejsでの状態管理はVuexが主流でしたが、Vuejsがバージョン3になってから、Piniaが登場しました。今回は、そのPiniaについて解説します。Piniaとは？PiniaはVue.jsの状態管理ライブラ...
JavaScript 【Nuxt.js】Piniaで状態管理を行う（Nuxtでの導入方法）
こんにちは、かつコーチです。前回は server/api を使って、Nuxtアプリの中に自前のAPIを作る方法を解説しました。今回は、そのAPIから取得したデータや、ログイン情報のようにアプリ全体で使い回したい状態を管理する Pinia（P...
JavaScript 【Nuxt.js】server/apiディレクトリでサーバーAPIを作る
こんにちは、かつコーチです。前回は useFetch ・ useAsyncData を使ってAPIからデータを取得する方法を解説しました。今回はその取得先、つまり「APIそのもの」をNuxtアプリの中に作る方法を扱います。「バックエンドを別...
JavaScript 【Nuxt.js】useFetch・useAsyncDataでデータを取得する（違いも解説）
こんにちは、かつコーチです。Nuxt.jsでAPIからデータを取得しようとすると、必ず出てくるのが useFetch と useAsyncData という2つのComposable（Composable：Vueの合成関数。状態やロジックをま...
JavaScript 【Vue】Piniaの実践：ストアの分割と設計
こんにちは、かつコーチです。前回はPiniaの基本的な使い方を解説しました。今回は一歩進んで、実際のアプリ規模を想定した「ストアの分割と設計」を扱います。小さいアプリでは1つのストアで十分ですが、機能が増えてくると必ず「ストアをどう分けるべ...
JavaScript 【Vue】Pinia入門：Vueの状態管理ライブラリ
こんにちは、かつコーチです。前回まででComposition API編（provide/inject、ライフサイクルフック、コンポーザブル）を一通り解説してきました。今回からは新しいテーマ、「状態管理」に入っていきます。最初のテーマは、Vu...