0Pricing
React Academy · レッスン

コンポーネントツリーとPropsの調査

コンポーネント階層を掘り下げ、Propsとstateの現在の値を確認します

「コンポーネントツリーとPropsの調査」はCoddyKit上の無料React Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ようこそ

このレッスンでは、React DevToolsでネストされたコンポーネント階層を詳しく調べ、Componentsパネルのサイドバーから複雑なpropとstateの値を読み取る方法を学びます。

コンポーネントツリーは鏡

DevToolsに表示されるすべてのコンポーネントは、JSXのネスト構造をそのまま反映しています。ルートは通常Appコンポーネントです。子要素は親要素の下にインデントされ、ソースコードでの表示とまったく同じように並びます。

コンポーネントの選択

ツリー内の任意のコンポーネント名をクリックします。右パネルには、その**props**、**hooks**（state、effects、refs）、さらに定義されている**source**ファイルと行番号がすぐに表示されます。

文字列と数値のPropsの読み取り

文字列のpropsは引用符付きで表示されます：`"hello"`。数値は引用符なしで表示されます：`42`。ブール値は`true`または`false`と表示されます。値が省略表示されている場合は、値の上にカーソルを置くと完全な内容を確認できます。

オブジェクトと配列のPropsの展開

propの値がオブジェクトまたは配列の場合、DevToolsには折りたたみ可能なツリーが表示されます。`{…}`または`[…]`の隣にある矢印をクリックすると展開され、ネストされたすべてのキーと値を確認できます。

関数Propsの調査

関数props（`onClick`ハンドラーなど）は`f onClick()`として表示されます。関数の定義に移動するには、その横にある小さな矢印アイコンをクリックします。移動先はSourcesパネルです。

ツリーの絞り込み

Componentsパネル上部の検索ボックスを使うと、名前で絞り込めます。`Button`と入力すると、名前に*Button*を含むコンポーネントだけが表示されます。数百ものコンポーネントがあるアプリで便利です。

DOMからReactへの移動

**Elements**タブでDOMノードを右クリックし、**Inspect React component**を選択します（DevToolsがインストールされている場合に使用できます）。DevToolsがComponentsタブに切り替わり、そのノードをレンダリングしたReactコンポーネントが選択されます。

DevToolsでのPropsの編集

DevToolsでpropの値をダブルクリックすると、その場で編集できます。コンポーネントは新しい値ですぐに再レンダリングされます。ソースコードを変更せずにエッジケースをテストするのに便利です。

PropsをJSONとしてコピー

DevToolsで任意のpropまたはstateの値を右クリックし、**Copy value**を選択します。値がJSONとしてクリップボードにコピーされるので、テストやドキュメントに簡単に貼り付けられます。

理解度チェック

React DevToolsのComponentsパネルで、オブジェクトまたは配列のpropを展開するにはどうしますか？

まとめ

これで、コンポーネントツリーの操作、文字列・数値・オブジェクト・関数の読み取り、名前による絞り込み、DOM要素からReactコンポーネントへの移動、DevToolsでのpropsのリアルタイム編集ができるようになりました。

次のステップ

次のレッスン：**Profilerタブの使用** — レンダリングを記録し、フレームグラフを読み取り、操作を遅くしているコンポーネントを特定する方法を学びます。

よくある質問

「コンポーネントツリーとPropsの調査」レッスンは無料ですか？

はい。「コンポーネントツリーとPropsの調査」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「コンポーネントツリーとPropsの調査」で何を学びますか？

コンポーネント階層を掘り下げ、Propsとstateの現在の値を確認します ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「コンポーネントツリーとPropsの調査」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. React DevToolsのインストールと起動
  2. コンポーネントツリーとPropsの調査
  3. Profilerタブを使う
  4. Reactのよくあるエラーをデバッグする
← React Academyに戻る