JavaScript 【Nuxt.js】server/apiディレクトリでサーバーAPIを作る
こんにちは、かつコーチです。前回は useFetch ・ useAsyncData を使ってAPIからデータを取得する方法を解説しました。今回はその取得先、つまり「APIそのもの」をNuxtアプリの中に作る方法を扱います。「バックエンドを別...
Vue
JavaScript JavaScript 【Nuxt.js】useFetch・useAsyncDataでデータを取得する（違いも解説）
こんにちは、かつコーチです。Nuxt.jsでAPIからデータを取得しようとすると、必ず出てくるのが useFetch と useAsyncData という2つのComposable（Composable：Vueの合成関数。状態やロジックをま...
JavaScript 【Nuxt.js】ルートミドルウェアでページ遷移を制御する
こんにちは、かつコーチです。前回は.vueを使った動的ルート・ネストされたルートの書き方を解説しました。今回は「ログインしていないユーザーを弾く」など、ページ遷移そのものを制御するルートミドルウェアを扱います。「未ログインなのに管理画面が見...
JavaScript 【Nuxt.js】動的ルート・ネストされたルートの書き方
こんにちは、かつコーチです。前回はlayouts/を使った共通レイアウトの管理方法を解説しました。今回は一歩進んで「/posts/1のようにIDが変わるページ」を作る動的ルートを扱います。「ブログ記事の詳細ページってどう作るの」という悩みを...
JavaScript 【Nuxt.js】layouts/で共通レイアウトを管理する方法
こんにちは、かつコーチです。前回はpages/ディレクトリのファイルベースルーティングを解説しました。今回は、ヘッダーやフッターなど「全ページ共通の見た目」をまとめるlayouts/ディレクトリを扱います。「ページごとに同じヘッダーをコピペ...
JavaScript 【Nuxt.js】pages/ディレクトリでファイルベースルーティングを理解する
こんにちは、かつコーチです。前回、Nuxt.jsのプロジェクトを実際に作成しました。今回は、Nuxtの中でも特につまずきやすい「ルーティング」の仕組みを解説します。Vue Router（Vue.js標準のルーティングライブラリ）を自分で設定...
JavaScript 【Nuxt.js】create-nuxtでプロジェクトを作成する手順
こんにちは、かつコーチです。前回、Nuxt.jsがどんなフレームワークなのかを解説しました。今回はいよいよ、実際に手元でNuxt.jsのプロジェクトを作成していきます。コマンドをコピペするだけでも動きますが、意味も理解しながら進めましょう。...
JavaScript 【Nuxt.js】Nuxt.jsとは？Vueに「ルーティング・SSR」を足すフレームワーク
こんにちは、かつコーチです。「Vue.jsは触ったことがあるけど、Nuxt.jsって何が違うの？」そんな疑問を持ってこの記事にたどり着いた方も多いと思います。今回は、Nuxt.jsがどんな役割を持つツールなのか、初心者向けに整理していきます...
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 を扱い...
JavaScript 【Vue】script setupの書き方：Composition APIの基本
こんにちは、かつコーチです。前回は v-for ・ v-if を使ったリスト表示と条件分岐を解説しました。今回からは一歩進んで、Vue.jsの現在の主流である「Composition API」を扱っていきます。その入り口となるのが <scr...
JavaScript 【Vue】v-for・v-ifでリスト表示と条件分岐を書く
こんにちは、かつコーチです。前回は v-model によるフォームの双方向バインディングを扱いました。今回は、Vueの基本文法シリーズの締めくくりとして、リストを繰り返し表示する v-for と、条件によって表示・非表示を切り替える v-i...
JavaScript 【Vue】v-modelでフォームの双方向バインディングを実装する
こんにちは、かつコーチです。前回は v-bind で属性を動的にバインドする方法を扱いました。今回は、フォーム入力とデータをつなぐ v-model について解説します。v-model はVueの中でも特に「魔法っぽく見える」機能ですが、中身...