Vue.jsのProvide・InjectとPinia｜Propsのバケツリレーを卒業【入門#11】

▼ 未経験からWebエンジニアになる学習ロードマップ＋この回の完成コード＋実験用コード＋改造課題3つを無料配布中 親から子へ、子から孫へとPropsを延々と渡していく「バケツリレー」を卒業する回です。 Provide/Injectで離れたコンポーネントへ直接データを渡し、Piniaでアプリ全体の状態を1か所にまとめます。 まず3階層のコンポーネントを実際に作ってバケツリレーの面倒くささを体感してから、2つの解決策を入れます。実務のチーム開発で当たり前に使われている考え方です。 この動画で分かること ・Propsのバケツリレーが何につらいのか（3階層を実際に作って体感） ・Provide / Injectで階層を飛ばしてデータを渡す方法 ・キーを文字列ではなくシンボルで管理する理由（タイプミスを実演） ・Pinia（Vue公式の状態管理ライブラリ）の導入とdefineStore ・storeToRefsを忘れるとリアクティブが切れる仕組みと直し方 ・Provide/InjectとPiniaの使い分け ━━━━━━━━━━━━━━━ 🎁 LINE登録特典 この回の完成コード＋Provide/Injectの実験用コード一式＋改造課題3つ＋未経験からWebエンジニアになるための学習ロードマップを無料でプレゼント中。 下のリンクから友だち追加して、半角で「vue11」とだけ送ってください。 https://line.me/ti/p/%40468utvbz ※ 文章で復習できる副読本「Vue入門テキスト」は合言葉「vue01」で受け取れます 学習の進め方で迷ったときは、LINE のトークに「そうだん」と送ってください（無料）。エラーやコードの中身を見てほしいときは、月額会員の質問チャットで受け付けています（LINE のトークに「かいいん」と送ると案内が届きます）。 ━━━━━━━━━━━━━━━ 📚 目次 00:00 完成デモ｜別ファイルで動くカウンター 00:45 今日のゴール 01:47 今のコードを確認する 02:13 Propsのバケツリレーを体験する 05:48 Provide / Injectで解決する 07:57 シンボルキーで安全にする 10:58 それでも大規模だと辛い 11:45 Piniaを導入する 14:25 storeToRefsでハマりどころを直す 18:32 2つの武器の呪文 19:25 改造課題と特典 22:08 次回予告・おわりに ━━━━━━━━━━━━━━━ 🔗 Vue.js入門シリーズ（全12回・順次公開） 第1回 環境構築なしで割り勘アプリを作る    • Vue.jsで何ができるか｜環境構築なしで割り勘アプリを作る【入門#1】   第2回 Vueの環境構築    • Vue.jsの環境構築｜Node.jsインストールからnpm create vueま...   第3回 プロジェクトの中身とSFC 第4回 リアクティビティと.value 第5回 ディレクティブ4つ 第6回 コンポーネント入門 第7回 defineModelとスロット 第8回 CSSとTransition 第9回 computedとwatch 第10回 ライフサイクルとコンポーザブル 第11回 Provide・InjectとPinia（この動画） 第12回 総まとめ ※公開済みの回のリンクは、公開のたびにこの欄へ追記します。 ━━━━━━━━━━━━━━━ 🛠 この動画で使ったもの ・Vue 3 + Vite（npm create vue@latestで作成したプロジェクト） ・Pinia（https://pinia.vuejs.org/ ） ・Visual Studio Code（https://code.visualstudio.com/ ） ━━━━━━━━━━━━━━━ 👤 この動画の講師 辻郁矢（フリーランスエンジニア・プログラミング講師） SES から実務経験 1 年半でフリーランス独立。マンツーマン指導スクールを運営。 #プログラミング学習 #Vue #Vuejs #Pinia #未経験エンジニア