IntelliJ IDEA 2020.1ヘルプ

React

Reactは、カプセル化されたコンポーネントから複雑な対話的なユーザーインターフェースを構築するためのJavaScriptライブラリです。ReactオフィシャルWebサイト(英語)からライブラリの詳細を学びましょう。

IntelliJ IDEAは、Reactと統合され、lintの設定、編集、実行、デバッグ、およびアプリケーションの保守を支援します。

始める前に

  1. お使いのコンピューターにNode.js(英語)がインストールされていることを確認してください。

  2. JavaScriptおよびTypeScriptバンドルプラグインがプラグインのページで有効になっていることを確認してください。詳細については、プラグインの管理を参照してください。

新しいReactアプリケーションの作成

新しいReactシングルページアプリケーションの構築を開始する推奨方法はcreate-react-app(英語)パッケージで、IntelliJ IDEAはnpx(英語)を使用してダウンロードして実行します。その結果、開発環境は、webpack、Babel、ESLint、およびその他のツールを使用するように事前構成されています。

もちろん、Create React Appを自分でダウンロードすることも、空のIntelliJ IDEAプロジェクトを作成してReactをインストールすることもできます。

create-react-appを使用したReactアプリケーションの生成

  1. メインメニューからファイル | 新規 | プロジェクトを選択するか、ようこそ画面の新規プロジェクトボタンをクリックします。

  2. 新規プロジェクトダイアログで、左側のペインでJavaScriptを選択します。

  3. 右側のペインで、React アプリを選択し、次へをクリックします。

  4. ウィザードの2ページ目で、プロジェクト名と作成するフォルダーを指定します。

    Node インタープリターフィールドに、使用するNode.jsインタープリターを指定します。リストから設定済みのインタープリターを選択するか、追加を選択して新しいインタープリターを設定します。

    create-react-appリストから、npx create-react-appを選択します。

    または、npmバージョン5.1以前の場合、ターミナル Alt+F12npm install --g create-react-app を実行して、create-react-app パッケージを自分でインストールします。アプリケーションを作成するときに、create-react-app パッケージが保存されているフォルダーを選択します。

  5. オプション :
    JSXの代わりにTSXを使用するには、TypeScriptプロジェクトを作成するチェックボックスを選択します。IntelliJ IDEAは、アプリケーションの .tsx ファイルと tsconfig.json 構成ファイルを生成します。

  6. オプション :
    プロジェクト生成中にreact-scripts(英語)の代わりに使用するカスタムパッケージを指定します。これはreact-scriptsから分岐したパッケージの1つ、たとえばreact-awesome-scripts(英語)custom-react-scripts(英語)react-scripts-ts(英語)などです。

  7. 完了をクリックすると、IntelliJ IDEAは必要なすべての設定ファイルを含むReact -specificプロジェクトを生成し、必要な依存関係をダウンロードします。IntelliJ IDEAはまたあなたのアプリケーションを実行したりデバッグするためのデフォルト設定でnpm startJavaScript デバッグ設定を作成します。

プロジェクトの依存関係をダウンロードするには、次のいずれかの操作を行います。

  • 埋め込みターミナルAlt+F12)に次のように入力します。

    npm install

  • プロジェクトルートの package.json ファイルのコンテキストメニューから実行 'npm install'を選択します。

空のIntelliJ IDEAプロジェクトにReactをインストールする

この場合、以下のReactアプリケーションの構築の説明に従ってビルドパイプラインを自分で設定する必要があります。ReactオフィシャルWebサイト(英語)からプロジェクトにReactを追加する方法の詳細を参照してください。

空のIntelliJ IDEAプロジェクトを作成するには

  1. メインメニューからファイル | 新規 | プロジェクトを選択するか、ようこそ画面の新規プロジェクトボタンをクリックします。

    新規プロジェクトダイアログで、左側のペインでJavaScriptを選択します。

  2. 右側のペインで、再度JavaScriptを選択し、 次へをクリックします。

  3. ウィザードの2ページ目で、プロジェクトフォルダーと名前を指定し、 完了をクリックします。

空のプロジェクトにReactをインストールするには

  1. Reactを使用する空のプロジェクトを開きます。

  2. 埋め込みターミナルAlt+F12)に次のように入力します。

    npm install --save react react-dom

    npmとYarnで説明されているように、Node.jsとNPMページにパッケージをインストールすることもできます。

既存のReactアプリケーションから開始する

既存のReactアプリケーションの開発を継続するには、IntelliJ IDEAで開き、必要な依存関係をダウンロードします。

既にマシン上にあるアプリケーションソースを開きます

  • ようこそ画面でオープンまたはインポートをクリックするか、メインメニューからファイル | 開くを選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。

バージョン管理からアプリケーションのソースを確認してください

  1. ようこそ画面でバージョン管理から取得をクリックするか、メインメニューからVCS | バージョン管理から取得を選択します。

  2. 呼び出されたダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。

依存関係をダウンロードする

コードの補完

IntelliJ IDEAは、React APIおよびJSX(英語)用のコード補完をJavaScriptコードで提供します。コード補完は、Reactメソッド、React 固有属性、HTMLタグとコンポーネント名、Reactイベント(英語)、コンポーネントプロパティなどで機能します。ReactオフィシャルWebサイト(英語)の詳細を参照してください。

ReactメソッドとReact 固有属性に対してコード補完を取得するには、 react.js ライブラリファイルをプロジェクトのどこかに配置する必要があります。通常、ライブラリはすでに node_modules フォルダーにあります。

Reactのメソッド、属性、およびイベントの補完

デフォルトでは、入力時にコード補完ポップアップが自動的に表示されます。例:

Completion popup

JSXタグでは、IntelliJ IDEAは classNameclassIDなどのReact 固有属性(英語)、および keyrefなどの非DOM属性(英語)のコーディング支援を提供します。さらに、自動補完は、プロジェクトのCSSファイルで定義されているクラスの名前に対しても機能します。

onClickonChangeなどのすべてのReactイベント(英語)は、波括弧 ={}と一緒に自動的に補完させることもできます。

ws_react_events.png

また、波括弧内のJavaScript式の補完も可能です。これは、定義したすべてのメソッドと関数に適用されます。

ws_react_javascript_expression.png

HTMLタグとコンポーネント名の完成

IntelliJ IDEAは、JavaScriptや他のコンポーネントのメソッドの内部で定義したHTMLタグとコンポーネント名に対してコード補完を提供します。

ws_react_component_completion.png

補完は、ES6形式の構文を持つインポートされたコンポーネントに対しても機能します。

ws_react_imported_component_completion.png

コンポーネントプロパティの完成

IntelliJ IDEAは、propTypes を使用して定義されたコンポーネントプロパティに対してコード補完を提供し、それらの定義を迅速にジャンプまたはプレビューできるように解決します。

ws_react_component_properties.png

コンポーネントの名前を自動補完すると、IntelliJ IDEAは必要なすべてのプロパティを自動的に追加します。必要なプロパティの一部がコンポーネントの使用に欠落している場合、IntelliJ IDEAはそのことについて警告します。

HTML属性をJSXに転送する

クラス属性またはイベントハンドラを使用してHTMLコードをコピーしてJSXに貼り付けると、IntelliJ IDEAは自動的にこれらの属性をReact 固有のものに置き換えます ( className , onClick , onChangeなど)

HTMLコードを「そのまま」JSXにコピーするには、そのまま貼り付け Ctrl+Shift+Alt+V を使用するか、設定/環境設定ダイアログ Ctrl+Alt+Sを開き、エディター | 一般 | スマート・キー | JavaScriptに移動して、HTML を JSX ファイルに貼り付けるときに属性を変換する チェックボックスをオフにします。

Reactコードスニペットの使用

IntelliJ IDEAには、Reactアプリケーションでよく使用されるさまざまなステートメントやコードブロックに展開される50を超えるコードスニペットのコレクションが付属しています。以下の例は、rcjcという省略形を使用して新しいReactコンポーネントを定義するクラスを作成する方法を示しています。

スニペットからReactコード構成を作成するには

  • 必要な省略形をエディターに入力し、Tabを押します。

  • Ctrl+J を押して適切なスニペットを選択してください。検索を絞り込むには、略語を入力してから補完リストから選択します。

詳細については、ライブテンプレートを参照してください。

利用可能なすべてのReactスニペットのリストを表示するには

  • 設定/環境設定ダイアログ Ctrl+Alt+Sで、エディターライブ・テンプレートをクリックしてから、 React ノードを展開します。

JSXでEmmetを使用する

IntelliJ IDEAでは、HTMLだけでなく、特別なReact twistsを利用してJSXコードでもEmmet(英語)を使用できます。例:略語div.my-classはJSXでは <div className=”my-class"></div> に展開されますが、HTMLのように <div class=”my-class"></div> には展開されません。

Reactアプリケーションをナビゲートする

基本的なナビゲーションのほかに、IntelliJ IDEAはReact 固有コード要素間のジャンプを手助けします。

  • 波括弧 {}内のメソッドまたはJavaScript式の定義にジャンプするには、そのメソッドまたは式を選択し、Ctrl+Bを押します。

  • コンポーネントの定義にジャンプするには、コンポーネント名を選択し、Ctrl+Bを押します。

  • コンポーネントのドキュメントを表示するには、Ctrl+Shift+Iを押します。

ws_react_quick_definition.png

IntelliJ IDEAを使用すると、エディターガターのタグツリーのパンくずリストとカラフルな強調表示を使用してJSXタグを簡単にナビゲートできます。

Highlighting and breadcrumbs for JSX tags in a React application

詳細はパンくずリストでナビゲートするを参照してください。

Lint Reactアプリケーション

JavaScriptおよびHTML用のIntelliJ IDEA組み込みコードインスペクションもすべてJSXコードで機能します。IntelliJ IDEAは、未使用の変数や関数、終了タグの欠落、ステートメントの欠如などの場合に警告します。

ws_react_inspection.png

いくつかのインスペクションのためにIntelliJ IDEAはクイックフィックスを提供します。たとえば、欠落しているメソッドを追加することを提案します。クイックフィックスポップアップを表示するには、Alt+Enterを押します。

インスペクションのリストをカスタマイズするには、設定/環境設定 Ctrl+Alt+Sエディター | インスペクションページを開き、表示したくないインスペクションを無効にするか、重大度レベルを変更します。

ESLintを使用する

組み込みコードインスペクションを提供するほかに、IntelliJ IDEAはJSZコード用のESLint(英語)などのlinterと統合されています。ESLintは、lintの広範なルールを提供し、プラグインでも拡張できます。IntelliJ IDEAは、ESLintによって報告された警告とエラーを入力時にエディターに表示します。ESLintでは、JavaScript標準スタイル(英語)を使用することもできます。

詳細はESLintを参照してください。

ESLintにReact JSX構文を正しく理解させるには、eslint-plugin-react(英語)が必要です。このプラグインでは、表示名がReactコンポーネントに設定されていない場合や、危険なJSXプロパティが使用されている場合など、警告が表示されます。

ws_eslint_react.png

IntelliJ IDEAでESLintの使用を開始するには

  1. 組み込みのターミナル表示 | ツール・ウィンドウ | ターミナル)に npm install --save-dev eslintnpm install --save-dev eslint-plugin-reactを入力します。

  2. プロジェクトにESLint構成ファイル .eslintrc を追加します。

  3. 設定/環境設定ダイアログ Ctrl+Alt+Sで、言語とフレームワーク | JavaScript | コード品質ツール | ESLintに移動します。開いたESLintページで、自動 ESLint 構成を選択します。IntelliJ IDEAは、プロジェクトの node_modules フォルダー内のESLintを自動的に見つけ、デフォルトで .eslintrc 構成を使用します。

    カスタムESLintパッケージと構成を使用するようにESLintを手動で構成することもできます。

ws_eslint_enable.png

.eslintrc構造体の例 (react プラグイン付き ESLint 1.x)

{ "parser" : "babel-eslint", "env" : { "browser" : true } , "ecmaFeatures" : { "jsx" : true } , "plugins" : [ "react" ], "rules" : { "semi" : 2 } }
ESLint公式Webサイト(英語)のESLintと react プラグイン設定の詳細を参照してください。

Reactアプリケーションのリファクタリング

一般的なIntelliJ IDEAリファクタリングに加えて、Reactアプリケーションでは、Reactコンポーネントに対して名前変更を実行し、コンポーネントの抽出を使用して新しいコンポーネントを作成することもできます。

コンポーネントの名前を変更する

  • コンポーネント名の中にキャレットを置き、Shift+F6を押す

以下は、1つのファイルで定義されて使用されるコンポーネントの名前を変更する例です。

同じ方法で、1つのファイルで定義されたコンポーネントの名前を変更し、名前付きエクスポートを使用して別のファイルにインポートすることもできます。

コンポーネントを抽出する

既存のコンポーネントのrenderメソッドからJSXコードを抽出して、新しいReactコンポーネントを作成することができます。

  1. 抽出するコードを選択し、メインメニューまたはコンテキストメニューからリファクタリング | 抽出 | コンポーネントを選択します。

  2. コンポーネントに名前を付けます。

  3. コンポーネントをクラスとして定義する場合はクラスを選択し、機能コンポーネントを作成する場合は関数 を選択します。

  4. OKをクリックします。新しいコンポーネントは、既存のコンポーネントの隣に定義され、そこで使用されます。

  5. オプション : シンボルの移動リファクタリング を使用して、新しいコンポーネントと必要なすべてのインポートを別のファイルに移動します。

Reactアプリケーションでの構造化

構造化を使用すると、配列やオブジェクトの値を変数に簡単に展開できます。この機能には非常に簡潔な構文があり、アプリケーションにデータを渡す必要があるときによく使用されます。詳細はJavaScriptでの構造化 を参照してください。

IntelliJ IDEAでは、専用のリファクタリング、インテンションアクション、またはクイックフィックスを使用して、配列またはオブジェクトから複数の値を取得するコードの断片を単純化できます。Reactクラスコンポーネントを操作するときは、オブジェクトまたは配列の分割代入を導入する インテンションアクションの使用を検討してください。

Reactアプリケーションの実行とデバッグ

新しいReactシングルページアプリケーションの構築を開始するための推奨される方法は、Reactアプリケーションを作成(英語)します。この場合のみ、開発環境はwebpackおよびBabelを使用するように事前構成されています。それ以外の場合は、最初にビルドパイプラインを構成する必要があります。

Reactアプリケーションを実行する

  • npmツールウィンドウ表示 | ツール・ウィンドウ | npm)で、start タスクをダブルクリックします。

    Webpackホットモジュール交換(英語)のおかげで、開発サーバーが稼動しているときに、ソースファイルを変更して更新を保存するとすぐにアプリケーションが自動的に再ロードされます。

Reactアプリケーションをデバッグするには

  1. npmツールウィンドウの開始タスクをダブルクリックして、開発モードでアプリケーションを起動します。

  2. アプリケーションがコンパイルされ、Webpack開発サーバーが準備完了するまで待ちます。アプリケーションを表示するには、http://localhost:3000/ でブラウザを開きます。

  3. アプリケーションが実行されているURLアドレス(デフォルトでhttp://localhost:3000/ )をコピーすると、後でデバッグ構成を作成するときにこのURLが必要になります。

    ws_react_debug_cra_app_is_running.png

  4. 新しいJavaScript デバッグ構成を作成します。実行 | 構成の編集を選択し、Add iconをクリックして、リストからJavaScript デバッグを選択します。実行/デバッグ構成: JavaScript デバッグダイアログで、保存したURL http://localhost:3000/URLフィールドに貼り付けます。設定を保存します。

  5. コードにブレークポイントを設定し、構成のリストの横にある the Debug button をクリックしてデバッグセッションを開始します。

  6. 最初のブレークポイントに到達したら、デバッグツールウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開 し、中断したときにそれを調べ、呼び出しスタックと変数を調べ、監視を設定し、変数を評価し、実際のHTML DOMを表示します。等々。

    ws_react_debug_cra_debug_session.png

Reactアプリケーションの構築

既存のIntelliJ IDEAプロジェクトにReactをインストールした場合は、ビルドプロセスを設定する必要があります。ReactオフィシャルWebサイト(英語)からReactアプリケーションのビルドパイプラインを構成するさまざまな方法について説明します。

Reactアプリケーションのテスト

Reactアプリケーションcreate-react-appで作成Jestテスト(英語)を実行およびデバッグできます。始める前に、react-scriptsパッケージが package.json依存関係オブジェクトに追加されていることを確認してください。

Jestテストは、実行/デバッグ構成を使用して、またはエディターから、または プロジェクト ツールウィンドウからJestテストを実行してデバッグすることができます。詳しくは、Jestを参照してください。

Jestの実行/デバッグ構成を作成するには

  1. 実行/デバッグ構成ダイアログ(メインメニューの実行 | 構成の編集)を開き、左側のペインで the Add button をクリックして、リストからJestを選択します。実行/デバッグ構成: Jestダイアログが開きます。

  2. 使用するノードインタープリターとアプリケーションの作業ディレクトリを指定します。デフォルトでは、作業ディレクトリフィールドにプロジェクトのルートフォルダーが表示されます。この定義済み設定を変更するには、目的のフォルダーへのパスを指定するか、リストから以前に使用したフォルダーを選択します。

  3. Jest パッケージフィールドで、react-scripts パッケージへのパスを指定します。

  4. Jest オプションフィールドに --env=jsdomと入力します。

    Testing React: Jest run configuration

テストを実行する

  1. メインツールバーのリストからJest実行/デバッグ構成を選択し、リストの右側にある the Run icon をクリックします。

  2. テストサーバーは自動的に起動します。実行ツールウィンドウで、テストサーバーからのメッセージを表示および分析します。

  3. 実行ツールウィンドウのテスト・ランナータブのテスト実行の監視

テストをデバッグするには

  1. メインツールバーのリストからJest実行/デバッグ構成を選択し、リストの右側にあるthe Debug button をクリックします。

  2. 開いたデバッグツールウィンドウでは、通常どおり進む: テストをステップ実行停止し、再開し、テストの実行を中断したときにテストを検討するように、と。

既知の制限

デバッグセッション中に初めてアプリケーションを開くと、ページのロード時に実行されるコード内のブレークポイントの一部がヒットしないことがあります。その理由は、元のソースコードでブレークポイントを停止するには、IntelliJ IDEAがブラウザからソースマップを取得する必要があるからです。ただし、ブラウザは、ページが少なくとも1回は完全に読み込まれた後にのみ、これらのソースマップを渡すことができます。この問題を回避するには、ブラウザでページをリロードしてください。

最終更新日: 2020年7月7日

関連ページ:

プラグイン

macOSのこのページを使用してプラグインを管理します。プラグインリポジトリの閲覧、プラグインのインストール、削除、有効化、無効化、および更新を行います。主なコントロール:マーケットプレースこのタブを使用して、JetBrainsプラグインリポジトリからプラグインをブラウズしてインストールします。カス...

プラグインを管理する

プラグインはIntelliJ IDEAのコア機能を拡張します。彼ら:バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を...

npmおよびYarn

IntelliJ IDEAはnpm、Yarn、およびYarn 2と統合されているため、IDE内から再利用可能なコードのパッケージをインストール、検索、アップグレード、および削除できます。Node.jsとNPMページは、パッケージを管理するための専用UIを提供します。もちろん、組み込みのターミナルのコ...

コード補完

このセクションでは、コーディングプロセスのスピードアップを可能にするコンテキスト対応コード補完のさまざまなテクニックについて説明します。基本補完:基本コード補完は、可視性スコープ内のクラス、メソッド、フィールド、およびキーワードの名前を完成させるのに役立ちます。コード補完を呼び出すと、Intelli...

ソースコードナビゲーション

さまざまなアクションやポップアップを使用して、エディター内のコードを素早くナビゲートすることができます。エディターウィンドウとツールウィンドウ間の移動に関する詳細情報については、エディターの基本を確認してください。IntelliJ IDEAで利用可能なナビゲーションオプションをチェックするためにビデ...

コード・インスペクション

IntelliJ IDEAには、コンパイル前にプロジェクト内の異常コードを検出して修正する一連のコードインスペクションがあります。IDEはさまざまな問題を見つけて強調表示し、デッドコードを見つけ、可能性のあるバグを見つけ、スペルの問題、コード構造全体を改善することができます。インスペクションは、すべ...