JavaScript 【Vue】provide/injectでProps drillingを解消する
こんにちは、かつコーチです。前回は「スロット（slot）で再利用可能なコンポーネントを作る」を解説しました。今回は、コンポーネントの階層が深くなったときに必ずぶつかる「Props drilling」という問題と、それを解決する provid...
2022-11
JavaScript 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の中でも特に「魔法っぽく見える」機能ですが、中身...
JavaScript 【Vue】v-bindで属性・プロパティを動的にバインドする
こんにちは、かつコーチです。前回は v-on によるイベントハンドリングを扱いました。今回は、HTML属性やコンポーネントのプロパティを「動的に」切り替える v-bind ディレクティブを解説します。v-on が「操作を検知する」仕組みなら...
JavaScript 【Vue】methodsとイベントハンドリング（v-on）の書き方
こんにちは、かつコーチです。前回はcomputedで算出プロパティを扱いました。今回は、ボタンのクリックやフォームの入力など「ユーザーの操作」に反応する仕組み、v-on ディレクティブとイベントハンドラの書き方を解説します。画面が「動く」感...
JavaScript 【Vue】computedで算出プロパティを使いこなす
こんにちは、かつコーチです。前回は ref と reactive の違いを扱いました。今回は、Vue.jsの学習でほぼ全員がつまずく「computed」について解説します。「メソッドで同じことができるのに、なぜcomputedを使うの？」と...
JavaScript 【Vue】refとreactiveの違い：Vueのリアクティブシステム入門
こんにちは、かつコーチです。前回は記法対応表でuseStateとrefの対応を軽く紹介しました。今回はそのrefをもう少し深掘りしつつ、もう一つの選択肢であるreactiveとの違いを整理していきます。「結局どっちを使えばいいの？」という疑...
JavaScript 【Vue】Reactを知っている人向け：ReactとVueの記法対応表
こんにちは、かつコーチです。前回はテンプレート構文の基本として、Mustache構文とディレクティブを解説しました。今回は少し趣向を変えて、「ReactではこうだったけどVueではどう書くのか」を、記法ごとに対応表で整理していきます。Rea...
JavaScript 【Vue】テンプレート構文の基本：Mustache構文とディレクティブ
こんにちは、かつコーチです。前回はViteでVueの開発環境を作りました。今回は、.vueファイルの<template>部分に書く、Vue独自のテンプレート構文を解説していきます。ここを押さえると、Vueらしいコードがぐっと読み書きしやすく...
JavaScript 【Vue】Vue.jsの環境構築：Viteで開発環境を作る
こんにちは、かつコーチです。前回はVue.jsとReactの立ち位置の違いについて解説しました。今回は、実際に自分のパソコンでVueを動かせるようにする「環境構築」をやっていきます。手を動かして初めて実感が湧く部分なので、ぜひ一緒に進めてみ...
JavaScript 【Vue】Vue.jsとは？Reactとの違いを初心者向けに解説
こんにちは、かつコーチです。React編50記事、お疲れさまでした。ここからは、いよいよVue.js編がスタートします。「Reactは学んだけど、Vueってどう違うの？」という方にも、「Vueから初めてのフロントエンドフレームワークに触れる...