JavaScript Vue×Piniaで簡単なTODOアプリを作ってみる
こんにちは、かつコーチです。前回は、Vueプロジェクトのディレクトリ構成のベストプラクティスについて解説しました。今回はVue.js編の最終回として、これまで学んできたComposition API・Pinia・型定義・設計の考え方を総動員...
2023-09
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 【React】カスタムフックを自作してロジックを再利用する
こんにちは、かつコーチです。前回は「useCallbackで関数の再生成を防ぐ」を解説しました。useState や useEffect、useRef と一通り基本のフックを見てきたので、今回はそれらを組み合わせてカスタムフックを自作する方...
JavaScript 【React】useCallbackで関数の再生成を防ぐ
こんにちは、かつコーチです。前回は「useMemoで無駄な再計算を防ぐ」を解説しました。今回はそのペアとも言える useCallback を扱います。「関数もメモ化できるの？」と思う人も多いと思いますが、useMemo の考え方が分かってい...
JavaScript 【React】useMemoで無駄な再計算を防ぐ
こんにちは、かつコーチです。前回は「useContextでProps drillingを解消する」を解説しました。今回は、パフォーマンスチューニングの入り口として避けて通れない useMemo を扱います。「なぜ画面がカクつくのか」「どこを...
JavaScript 【React】useContextでProps drillingを解消する
こんにちは、かつコーチです。前回は「useRefの使い方：DOM参照と値の保持」を解説しました。今回は、コンポーネントの階層が深くなったときに必ずと言っていいほど直面する「Props drilling」問題と、それを解消する useCont...
JavaScript 【React】useRefの使い方：DOM参照と値の保持
こんにちは、かつコーチです。前回は「useEffectの依存配列でハマらないためのコツ」を解説しました。今回は、useEffectとセットでよく登場する useRef を扱います。「DOM要素を直接触りたいとき」「再レンダリングを起こさずに...
JavaScript 【React】useEffectの依存配列でハマらないためのコツ
こんにちは、かつコーチです。前回はuseEffectの基本と、副作用処理という考え方について解説しました。今回はその中でも特に多くの人がつまずく「依存配列」に絞って、より実践的な落とし穴と対処法を解説していきます。依存配列の基本ルールをおさ...
JavaScript 【React】useEffectの基本：副作用処理を理解する
こんにちは、かつコーチです。前回はuseStateでオブジェクトや配列を安全に更新する方法を解説しました。今回は、Reactの中でも特につまずきやすいと言われるuseEffectを扱います。「なんとなく動いているけど、実は理解できていない」...
JavaScript 【React】useStateをもっと詳しく：オブジェクト・配列の更新
こんにちは、かつコーチです。前回は親子コンポーネント間でのデータの受け渡し方を解説しました。useState自体は入門段階でも触れる機能ですが、文字列や数値ではなく「オブジェクト」や「配列」を扱い始めると、急につまずく人が多くなります。今回...
JavaScript 【React】親子コンポーネント間でのデータの受け渡し方
こんにちは、かつコーチです。前回はフォームの作り方と制御コンポーネントについて解説しました。Reactでアプリを作っていると、コンポーネントはどんどん分割されていきます。そうなると必ず必要になるのが「親から子へ」「子から親へ」データを受け渡...