React Academy · レッスン

React DevToolsのインストールと起動

Q: 「React DevToolsのインストールと起動」で何を学びますか？

Chrome/FirefoxにReact DevToolsを設定し、Componentsパネルを操作します ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Chrome/FirefoxにReact DevToolsを設定し、Componentsパネルを操作します

レッスン 1/413 ステップ

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

ようこそ

このレッスンでは、React DevToolsのブラウザー拡張機能をインストールし、Componentsパネルを操作して実行中のReactアプリを調べる方法を学びます。

React DevToolsとは

React DevToolsは、Chrome/Firefox DevToolsに2つの新しいパネルを追加するブラウザー拡張機能です：**Components**（ツリーを調べる）と**Profiler**（パフォーマンスを測定する）。開発モードのあらゆるReactアプリで動作します。

拡張機能のインストール

Chrome Web Store（またはFirefox Add-ons）に移動し、**React Developer Tools**を検索します。**Add to Chrome**（またはFirefox）をクリックします。ツールバーのReactアイコンは、Reactを使用しているページで点灯します。

DevToolsを開く

**F12**（MacではCmd+Option+I）を押してブラウザーのDevToolsを開きます。ElementsやConsoleと並んで、**Components**と**Profiler**という新しいタブが表示されます。

Componentsパネル

Componentsタブには、現在のページにあるReactコンポーネントの完全なツリーが表示されます。任意のコンポーネントをクリックすると、そのprops、state、hooks、さらにそれをレンダリングしたソースファイルを調べることができます。

ツリーの操作

Componentsパネル上部の検索ボックスを使うと、コンポーネント名で絞り込めます。ツリー内のコンポーネントをクリックすると、右側に詳細が表示されます。矢印を使って子要素を展開または折りたたみます。

Propsのライブ編集

コンポーネントをクリックすると、現在の**props**が右ペインに表示されます。DevToolsでpropの値を直接編集して、ソースコードを変更せずにUIの変更をプレビューすることもできます。

StateとHooksの調査

propsの下には、State、Effect、Memo、Refなどの**hooks**が表示されます。Stateを展開すると、そのコンポーネント内のすべてのuseState呼び出しの現在値を確認できます。

開発モードの要件

React DevToolsがコンポーネント名を表示するのは、アプリが**開発モード**で実行されている場合だけです。本番ビルドではバンドルサイズを小さくするためにReactがコンポーネント名を削除するので、必ずnpm startまたはnpm run devでローカルにデバッグしてください。

更新のハイライト

DevToolsの設定（歯車アイコン）で**Highlight updates when components render**を有効にします。再レンダリングされたコンポーネントが色付きのオーバーレイで点滅するため、不要なレンダリングをすぐに確認できます。

理解度チェック

React DevTools拡張機能がブラウザーの開発者ツールに追加する2つのタブは何ですか？

対話的なレッスンで答える

まとめ

React DevToolsをインストールし、Componentsパネルを操作しました。これで、コンポーネントツリーの調査、propsとstateのリアルタイム確認、値のその場での編集、再レンダリングのハイライトを、ソースコードに触れずに行えるようになりました。

次のステップ

次のレッスン：**コンポーネントツリーとPropsの調査** — ネストされた階層を詳しく調べ、DevToolsのサイドバーで複雑なpropとstateの構造を読み取る方法を学びます。

無料で開始

AI チューターと学ぶ React — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 88
レッスン: 324

無料で学習を始めるコース全体を表示

よくある質問

「React DevToolsのインストールと起動」レッスンは無料ですか？

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

「React DevToolsのインストールと起動」で何を学びますか？

Chrome/FirefoxにReact DevToolsを設定し、Componentsパネルを操作しますブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「React DevToolsのインストールと起動」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← React Academyに戻る