JavaScript 【Vue】コンポーザブル（Composable）を自作してロジックを再利用する
こんにちは、かつコーチです。前回はライフサイクルフック（onMounted など）の使い方を解説しました。今回は、Composition API編の締めくくりとして「コンポーザブル（Composable）」を扱います。同じようなロジックを何...
Composition API
JavaScript 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...