Prop Drillingの問題
Prop Drillingが保守性を損なう理由、provide/injectで解決できること、使いどころについて学習します。
「Prop Drillingの問題」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
Prop drilling とは
Prop drilling とは、深くネストされたコンポーネントにデータを届けるためだけに、多数のコンポーネント階層を通してデータを渡すことです。途中にある各コンポーネントは、自分自身では使わない場合でも、その prop を受け取り、次へ渡さなければなりません。
深いコンポーネントツリー
次のようなツリーを考えてみましょう。App -> Layout -> Page -> Section -> Widget です。最下層の Widget は現在のテーマを必要としていますが、それを知っているのは最上層の App だけです。
App
Layout
Page
Section
Widget <-- needs "theme"App から渡す
App はテーマを保持し、それを prop として Layout に渡します。
<!-- App.vue -->
<Layout :theme="theme" />Layout から次へ渡す
Layout はテーマを使いませんが、次の階層に届けるためだけにテーマを宣言して渡さなければなりません。
<!-- Layout.vue -->
const props = defineProps({ theme: String });
// template:
<Page :theme="props.theme" />Page も次へ渡す
Page も、テーマには関心がないにもかかわらず、同じ定型処理、つまり宣言してから渡す処理を繰り返します。
<!-- Page.vue -->
const props = defineProps({ theme: String });
<Section :theme="props.theme" />Section でもさらに渡す
Section でも同じ処理を繰り返します。各階層で、その階層の責務とは関係のない冗長な受け渡し処理が追加されます。
<!-- Section.vue -->
const props = defineProps({ theme: String });
<Widget :theme="props.theme" />最後に Widget が使う
最下層に到達して初めて、Widget が実際にテーマを使用します。その上にある 4 つの階層は、単に値を通過させていただけです。
<!-- Widget.vue -->
const props = defineProps({ theme: String });
// uses props.theme to style itselfなぜ問題になるのか
Prop drilling には次のような問題があります。
- 途中にあるすべてのコンポーネントに定型コードが必要になる
- prop 名を変更すると、多数のファイルでリファクタリングが必要になる
- 中間の prop によって、各コンポーネントが本当に必要としているものが分かりにくくなる
- 新しい共有値を追加しにくい
値が増えるとさらに悪化する
ここに user、locale、permissions を追加してみましょう。それぞれを 4 つの階層すべてに渡す必要があるため、定型コードが何倍にも増えます。
<Layout
:theme="theme"
:user="user"
:locale="locale"
:permissions="permissions"
/>すべての共有値を props に入れる必要はない
props は、直接的な親子間通信に適しています。しかし、テーマ、現在のユーザー、i18n など、サブツリーの深い場所で必要になる値には、prop drilling は適した手段ではありません。すべての子孫に直接データを提供する方法が必要です。
provide / inject の登場
Vue の provide / inject を使うと、祖先コンポーネントがデータを提供し、すべての中間階層を飛ばして、任意の子孫コンポーネントが直接要求できます。次のレッスンでは、provide と inject の使い方を説明します。
確認問題
Prop drilling を最も適切に説明しているものはどれでしょうか。
まとめ
深いツリーにあるすべての中間コンポーネントが、自分では使わない props まで宣言して渡さなければならず、定型コードや壊れやすいリファクタリングにつながることを学びました。深く共有する値には、provide/inject がよりすっきりした解決策になります。
よくある質問
「Prop Drillingの問題」レッスンは無料ですか？
はい。「Prop Drillingの問題」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「Prop Drillingの問題」で何を学びますか？
Prop Drillingが保守性を損なう理由、provide/injectで解決できること、使いどころについて学習します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「Prop Drillingの問題」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。