JavaScript 【Next.js】Route Handlers（API Routes）でAPIエンドポイントを作る
こんにちは、かつコーチです。前回はServer Componentでのデータフェッチの基本を解説しました。Server Component内で完結するデータ取得だけでなく、外部サービスから叩かれるAPIエンドポイント自体をNext.jsで作...
中級者向け
JavaScript JavaScript 【Next.js】Server Componentでのデータフェッチの基本
こんにちは、かつコーチです。前回は、Client ComponentがServer Componentを誤ってimportし、バンドルサイズが膨らんでしまった失敗談を紹介しました。正しくComposition Patternで書き分けるには...
JavaScript 【Next.js】Server Actionsの基本：フォーム送信をサーバー側で処理する
こんにちは、かつコーチです。前回は "use client" をいつ・どこに書くべきか、判断基準を解説しました。Server ComponentsとClient Componentsの使い分けが分かってくると、次に気になるのが「フォームを送...
JavaScript 【Next.js】’use client’はいつ・どこに書く？使い分けの判断基準
こんにちは、かつコーチです。前回はServer Componentsとは何か、これまでのReactとの一番の違いを解説しました。「インタラクティブな部分は "use client" を使ってClient Componentに切り出す」という...
JavaScript 【Next.js】Server Componentsとは？Reactとの一番の違い
こんにちは、かつコーチです。前回は loading.tsx・error.tsx・not-found.tsx を使って、状態ごとのUIを整える方法を解説しました。ここまでで一通りルーティング周りは押さえられましたが、実はNext.jsのApp...
JavaScript 【Next.js】loading.tsx・error.tsx・not-found.tsxでUXを整える
こんにちは、かつコーチです。前回は動的ルートとルートグループを使って、URLに応じたページ作りとフォルダ整理の方法を解説しました。ページの構造ができても、データ取得中の「白い画面」やエラー発生時の「真っ白なエラーページ」をそのまま放置すると...
JavaScript 【Next.js】ルートグループ・動的ルートの書き方
こんにちは、かつコーチです。前回までで、page.tsx によるファイルベースルーティングと、layout.tsx を使った共通レイアウトの作り方を解説してきました。ここまでは「固定のURL」しか扱ってきませんでしたが、実際のアプリでは /...
JavaScript 【Vue】環境ごとの環境変数管理（.env）
こんにちは、かつコーチです。前回はNetlifyを使ったVueアプリのデプロイ手順を解説しました。デプロイができるようになると次に出てくるのが、「開発中と本番で、APIの向き先やキーを切り替えたい」という悩みです。今回は、Vueアプリで環境...
AWS 【AWS】AWSのAccess Deniedエラー、よくある原因と対処法まとめ
こんにちは、かつコーチです。AWSを触っていると、一度は必ずぶつかるのが「Access Denied」エラーです。私自身、S3もLambdaもEC2も、権限まわりで何度も手が止まった経験があります。この記事では、Access Deniedエ...
AWS 【AWS】AWS IAMポリシーの書き方基本(JSON構文とアクション指定)
こんにちは、かつコーチです。今回は、AWSのIAMポリシーを自分で書きたいという方向けに、基本のJSON構文を解説します。「コンソールでポチポチ設定はできるけど、JSONで書けと言われると手が止まる」という声をよく聞きます。この記事を読めば...
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の基本と、副作用処理という考え方について解説しました。今回はその中でも特に多くの人がつまずく「依存配列」に絞って、より実践的な落とし穴と対処法を解説していきます。依存配列の基本ルールをおさ...