JavaScript Vue×Piniaで簡単なTODOアプリを作ってみる
こんにちは、かつコーチです。前回は、Vueプロジェクトのディレクトリ構成のベストプラクティスについて解説しました。今回はVue.js編の最終回として、これまで学んできたComposition API・Pinia・型定義・設計の考え方を総動員...
Vue
JavaScript JavaScript 【Vue】Vueプロジェクトのディレクトリ構成のベストプラクティス
こんにちは、かつコーチです。前回は、Vueアプリのパフォーマンスチューニングについて解説しました。今回は視点を変えて、「アプリが育ってきたときにどうディレクトリを構成するか」という設計のテーマを扱います。Vue CLIやViteでプロジェク...
JavaScript 【Vue】Vueアプリのパフォーマンスチューニング入門
こんにちは、かつコーチです。前回は、リアクティビティが効かない現象の原因と対処法を掘り下げました。今回は視点を変えて、「動くけど遅い」Vueアプリをどう改善していくか、パフォーマンスチューニングの入門編を扱います。やみくもに最適化するのでは...
JavaScript 【Vue】リアクティビティが効かない時の原因と対処法
こんにちは、かつコーチです。前回は、Vueでよく出るエラーとその解決法を初心者向けにまとめました。今回はもう一段掘り下げて、上級者でも意外とハマる「リアクティビティが効かない」という現象を扱います。エラーメッセージが出ないだけに原因調査が厄...
JavaScript 【Vue】Vueでよく出るエラーと解決法まとめ
こんにちは、かつコーチです。前回は、開発・ステージング・本番など環境ごとの環境変数管理（.env）について解説しました。今回からは実践Tips編として、Vue.jsを書いていると誰もが一度はぶつかる定番エラーを、原因と解決法つきでまとめてい...
JavaScript 【Vue】環境ごとの環境変数管理（.env）
こんにちは、かつコーチです。前回はNetlifyを使ったVueアプリのデプロイ手順を解説しました。デプロイができるようになると次に出てくるのが、「開発中と本番で、APIの向き先やキーを切り替えたい」という悩みです。今回は、Vueアプリで環境...
JavaScript 【Vue】VueアプリをNetlifyにデプロイする方法
こんにちは、かつコーチです。前回まではテスト編として、VitestやVue Test Utilsを使ったテストの書き方を解説してきました。今回からはデプロイ・インフラ連携編に入り、作ったVueアプリを実際にインターネット上に公開する方法を扱...
JavaScript 【Vue】コンポーネントのユニットテスト実践
こんにちは、かつコーチです。前回は、Vue Test Utilsの基本的な使い方として、propsやイベントのテストを解説しました。テスト編の最後となる今回は、フォームやAPI通信を含む、もう少し実務に近いコンポーネントを題材にユニットテス...
JavaScript 【Vue】Vue Test Utilsでコンポーネントをテストする
こんにちは、かつコーチです。前回は、Vitestの基本と、純粋な関数に対するテストの書き方を解説しました。今回は、Vue公式のテストユーティリティであるVue Test Utilsを使って、Vueコンポーネントそのものをテストする方法を扱い...
JavaScript 【Vue】VueUseで便利なComposableを活用する
こんにちは、かつコーチです。前回は、axiosを使ってAPIからデータを取得・表示する方法と、その処理をComposableに切り出すところまで解説しました。今回は、「よく使うComposableを毎回自作しなくても、すでに用意されているラ...
JavaScript 【Vue】axiosでAPIからデータを取得して表示する
こんにちは、かつコーチです。前回は「Piniaの実践：ストアの分割と設計」で、状態管理の設計パターンを扱いました。今回からは、実際にAPIと通信してデータを取得・表示する「データ連携編」に入っていきます。第一弾は、Vueアプリで定番のHTT...
JavaScript 【Vue】Piniaの実践：ストアの分割と設計
こんにちは、かつコーチです。前回はPiniaの基本的な使い方を解説しました。今回は一歩進んで、実際のアプリ規模を想定した「ストアの分割と設計」を扱います。小さいアプリでは1つのストアで十分ですが、機能が増えてくると必ず「ストアをどう分けるべ...
JavaScript 【Vue】Pinia入門：Vueの状態管理ライブラリ
こんにちは、かつコーチです。前回まででComposition API編（provide/inject、ライフサイクルフック、コンポーザブル）を一通り解説してきました。今回からは新しいテーマ、「状態管理」に入っていきます。最初のテーマは、Vu...
JavaScript 【Vue】コンポーザブル（Composable）を自作してロジックを再利用する
こんにちは、かつコーチです。前回はライフサイクルフック（onMounted など）の使い方を解説しました。今回は、Composition API編の締めくくりとして「コンポーザブル（Composable）」を扱います。同じようなロジックを何...
JavaScript 【Vue】ライフサイクルフック（onMounted等）の使い方
こんにちは、かつコーチです。前回は provide / inject によるProps drillingの解消を解説しました。今回は、コンポーネントの「生まれてから消えるまで」の各タイミングにコードを差し込める、ライフサイクルフックを扱いま...
JavaScript 【Vue】provide/injectでProps drillingを解消する
こんにちは、かつコーチです。前回は「スロット（slot）で再利用可能なコンポーネントを作る」を解説しました。今回は、コンポーネントの階層が深くなったときに必ずぶつかる「Props drilling」という問題と、それを解決する provid...
JavaScript 【Vue】スロット（slot）で再利用可能なコンポーネントを作る
こんにちは、かつコーチです。前回は、子コンポーネントから親コンポーネントへイベントを伝える emit を解説しました。今回は、Props・emitと並んでコンポーネント設計の要となる「スロット（slot）」を扱います。スロットを使いこなせる...
JavaScript 【Vue】emitで子から親にイベントを伝える
こんにちは、かつコーチです。前回は、親から子へデータを渡す仕組みであるPropsを解説しました。今回は、その逆方向、子コンポーネントから親コンポーネントへ「何かが起きたこと」を伝える emit（イミット）を扱います。「ボタンが押された」「フ...
JavaScript 【Vue】Propsの定義と受け取り方
こんにちは、かつコーチです。前回は watch と watchEffect の使い分けを解説しました。今回は、コンポーネント同士でデータをやり取りするための基本、「Props（プロップス）」を扱います。Vueでの開発は、画面を小さなコンポー...
JavaScript 【Vue】watchとwatchEffectの使い分け
こんにちは、かつコーチです。前回は <script setup> の基本と、ref ・ reactive の使い分けを解説しました。今回は、データの変化を検知して処理を実行する「監視」の仕組み、watch と watchEffect を扱い...