WebStorm 2020.2ヘルプ

React

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

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

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

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

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

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

  1. ようこそ画面で新規プロジェクトの作成をクリックするか、メインメニューからファイル | 新規 | プロジェクトを選択します。新規プロジェクトの作成ダイアログが開きます。

  2. 左側のペインで、React アプリを選択します。

  3. 右側のペインで:

    1. プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。

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

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

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

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

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

  6. 作成をクリックすると、WebStormは、必要なすべての構成ファイルを含むReact -specificプロジェクトを生成し、必要な依存関係をダウンロードします。WebStormは、アプリケーションを実行またはデバッグするためのデフォルト設定で、npmスタートおよびJavaScript デバッグ構成も作成します。

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

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

    npm install

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

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

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

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

  1. ようこそ画面で新規プロジェクトの作成をクリックするか、メインメニューからファイル | 新規 | プロジェクトを選択します。新規プロジェクトの作成ダイアログが開きます。

  2. 左側のペインで、空のプロジェクトを選択します。右側のウィンドウで、アプリケーションフォルダーを指定し、作成をクリックします。

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

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

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

    npm install --save react react-dom

    npm、pnpm、およびYarnの説明に従って、パッケージをNode.jsとNPMページにインストールすることもできます。

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

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

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

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

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

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

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

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

コードの補完

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

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

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

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

Completion popup

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

Completion for class names

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

Complete React events

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

Complete JavaScript expressions inside curly braces

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

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

Completion for HTML tags and component names

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

Completion for imported components with ES6 syntax

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

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

Completion for component properties

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

HTML属性をJSXに転送する

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

Transfer HTML to JSX

これはTSXでも機能します。

Transfer HTML to TSX

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

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

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

Live template for a React component

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

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

  • Ctrl+J を押して、関連するスニペットを選択します。検索を絞り込むには、略語の入力を開始し、補完リストから選択します。

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

使用可能なすべてのReactスニペットのリストを表示します

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

JSXでEmmetを使用する

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

Expand Emmet template in React

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

基本的なナビゲーションの他に、WebStormはReact 固有コード要素間をジャンプできます。

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

  • コンポーネントの宣言にジャンプするには、コンポーネント名を選択して Ctrl+Bを押します。宣言とその型に移動する詳細を参照してください。

  • コンポーネント定義を表示するには、Ctrl+Shift+Iを押します。表示定義の詳細を参照してください。

    View quick definition of a component in a popup
  • コンポーネントの簡単なドキュメントを表示するには、Ctrl+Qを押します。JavaScriptドキュメントの検索の詳細を参照してください。

    Quick documentation popup for React component
  • WebStormを使用すると、パンくずリストを使用してJSXタグを簡単にナビゲートしたり、エディターのガターでタグツリーをカラフルに強調表示したりできます。詳細については、パンくずリストでナビゲートするを参照してください。

    Highlighting and breadcrumbs for JSX tags in a React application

Lint Reactアプリケーション

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

JavaSxript inspections in React application

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

インスペクションのリストをカスタマイズするには、設定/環境設定ダイアログ Ctrl+Alt+Sを開き、エディターに移動します。インスペクション、および重要度レベルを表示または変更したくないインスペクションを無効にします。インスペクションの無効化と有効化およびインスペクションの重大度の設定の詳細を参照してください。

ESLintを使用する

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

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

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

ESLint with React: errors and warnings are highlighted, the description of a problem is shown in a tooltip.

ReactプロジェクトにESLintをインストールして構成する

  1. 組み込みターミナル表示 | ツール・ウィンドウ | ターミナル)で、次のように入力します。

    npm install --save-dev eslint
    npm install --save-dev eslint-plugin-react
  2. ESLint構成ファイル.eslintrc.*をプロジェクトに追加します。これは、.eslintrc.eslintrc.json、または.eslintrc.yamlファイル、またはサポートされている別の形式のファイルです。詳細については、ESLint公式Webサイト(英語)を参照してください。

  3. 設定/環境設定ダイアログ Ctrl+Alt+Sで、言語とフレームワーク | JavaScript | コード品質ツール | ESLintに移動し、自動 ESLint 構成を選択します。WebStormは、プロジェクトのnode_modulesフォルダーでESLintを自動的に検索し、.eslintrc.*ファイルまたはpackage.jsoneslintConfig プロパティのデフォルト構成を使用します。

    または、手動 ESLint 構成を選択して、カスタムESLintパッケージと構成を使用します。

    詳細はWebStormでのESLintのアクティブ化と構成を参照してください。

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

  1. ecmaFeatures オブジェクトに "jsx" = trueを追加します。ここでは、ES6クラス、モジュールなど、使用したい追加の言語機能を指定することもできます。

  2. plugins オブジェクトに、reactを追加します。

  3. rules オブジェクトには、有効にするESLintビルトインルール(英語)と、reactプラグインを介して利用可能なルール(英語)をリストできます。

    { "parser" : "babel-eslint", "env" : { "browser" : true } , "ecmaFeatures" : { "jsx" : true } , "plugins" : [ "react" ], "rules" : { "semi" : 2 } }

ESLint公式Webサイト(英語)からESLintおよび react プラグイン構成の詳細を学びましょう。

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

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

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

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

Rename component used in one file

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

Rename a component defined in another file and imported through a named import
  1. コンポーネント名の中にキャレットを置き、Shift+F6 を押すか、メインメニューから、またはコンテキストメニューからリファクタリング | 名前の変更を選択します。

  2. Reactの命名規則(英語)に準拠した新しいコンポーネント名を指定します。

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

既存のコンポーネントのrenderメソッドからJSXコードを抽出することにより、新しいReactコンポーネントを作成できます。新しいコンポーネントは、関数またはクラスとして定義できます。React公式Webサイトの関数とクラスのコンポーネント(英語)を参照してください。

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

    または、メインメニューのリファクタリング | 抽出/紹介 | コンポーネントの抽出に移動するか、Ctrl+Alt+Shift+T を押してポップアップからコンポーネントの抽出を選択します。

  2. 開いたダイアログで、新しいコンポーネントの名前とそのタイプを指定します。デフォルトでは、機能コンポーネントが作成されます。新しいコンポーネントをクラスとして定義する場合は、クラスを選択します。

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

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

  5. オプション : WebStormが新しいコンポーネントに使用するコードテンプレートを変更します。設定/環境設定ダイアログ Ctrl+Alt+Sエディター | ファイルおよびコード・テンプレートに移動し、コード タブを開き、必要に応じてApache Velocityテンプレート言語(英語)を使用してテンプレートを更新します。

関数をクラスコンポーネントに変換する

クラス・コンポーネントに変換リファクタリングを使用すると、WebStormは変換する関数の名前を持つES6クラスを生成します。このクラスは React .Component を拡張し、関数本体が移動される render() メソッドを含みます。ReactオフィシャルWebサイト(英語)の詳細を参照してください。

Convert a function to a class component
  • 変換するキャレットを関数内の任意の場所に置き、メインメニューまたはコンテキストメニューからリファクタリング | クラス・コンポーネントに変換を選択します。

  • または、Ctrl+Alt+Shift+T を押して、ポップアップからクラス・コンポーネントに変換を選択します。

クラスを機能コンポーネントに変換する

関数コンポーネントに変換リファクタリングを使用すると、WebStormは変換するクラスの名前で関数を生成し、render() メソッドの内容を関数本体に移動します。

Convert a class to a functional component
  • 変換するクラス内の任意の場所にキャレットを置き、メインメニューまたはコンテキストメニューからリファクタリング | 関数コンポーネントに変換を選択します。

  • または、Ctrl+Alt+Shift+T を押して、ポップアップから関数コンポーネントに変換を選択します。

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

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

Reactクラスコンポーネントを使用する場合は、オブジェクト/配列の破壊を導入する インテンションアクションの使用を検討してください。JavaScriptでの構造化の詳細を参照してください。

Destructuring with intention action: Introduce object destructuring in a React class

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

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

上記のように Create React Appで作成されたアプリケーションの場合、WebStormはデフォルト設定で2つの実行/デバッグ構成を生成します。

  • デフォルト名がnpm startnpm構成。この構成では、開発サーバーを起動してアプリケーションを開発モードで起動する npm start コマンドを実行します。

  • デフォルト名アプリケーションのデバッグJavaScript デバッグ構成。この設定はデバッグセッションを開始します。

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

  1. ツールバーのリストからnpm start run構成を選択し、リストの横にある Run をクリックします。

    または、ターミナル Alt+F12npm start を実行するか、npmツールウィンドウ表示 | ツール・ウィンドウ | npm)で start タスクをダブルクリックします。

  2. アプリケーションがコンパイルされ、Webpack開発サーバーの準備ができるまで待ちます。

    実行ツールウィンドウまたはターミナルには、アプリケーションが実行されているURLが表示されます。デフォルトではhttp://localhost:3000/です。このリンクをクリックして、アプリケーションを表示します。

    React app is running

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

  1. コードにブレークポイントを設定します。

  2. 上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。

  3. リストから自動生成されたアプリケーションのデバッグ構成を選択し、リストの横にある the Debug button をクリックします。

    Start debugging an React app with Debug Application configuration

アプリケーションが実行されている場所に応じて、さまざまな方法でデバッグセッションを開始できます。

localhostで実行されているアプリケーションをデバッグする

  1. コードにブレークポイントを設定します。

  2. 上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされてWebpack開発サーバーの準備ができるまで待ちます。

  3. 実行ツールウィンドウまたはターミナルには、アプリケーションが実行されているURLが表示されます。デフォルトではhttp://localhost:3000/です。 Ctrl+Shift を押したまま、このURLリンクをクリックします。WebStormは、タイプJavaScript デバッグの自動生成されたアプリケーションのデバッグ構成でデバッグセッションを開始します。

    React app is running

カスタムURLで実行されているアプリケーションをデバッグする

  1. コードにブレークポイントを設定します。

  2. 上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされてWebpack開発サーバーの準備ができるまで待ちます。

  3. 実行ツールウィンドウまたはターミナルには、アプリケーションが実行されているURLが表示されます。このURLアドレスをコピーします。後でデバッグ構成で指定します。アプリケーションを表示するには、リンクをクリックしてください。

  4. JavaScript デバッグ構成を作成します。これを行うには、メインメニューの実行 | 構成の編集に移動し、the Add iconをクリックして、リストからJavaScript デバッグ を選択します。実行/デバッグ構成: JavaScript デバッグダイアログで、保存したURLをURLフィールドに貼り付け、構成を保存します。

  5. 新しく作成した構成を起動するには、構成のリストから構成を選択し、リストの横にある the Debug button をクリックします。

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

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

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

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

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

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 をクリックします。

    ws_select_run_configuration_jest.png

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

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

デバッグテスト

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

  2. 開いたデバッグツールウィンドウで、通常どおり続行します。テストをステップ実行し、テストの実行を停止して再開し一時停止したときにテストを調べます。

既知の制限

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

最終更新日: 2020年8月05日

関連ページ:

新規プロジェクトの作成ダイアログ

このダイアログを使用して、空のプロジェクトを作成したり、アプリケーション開発用のフレームワーク固有のプロジェクトスタブを生成したりします。ダイアログの左側のペインには、スタブを生成できるプロジェクトタイプのリストが表示されます。利用可能なプロジェクトタイプのセットは、インストールされてアクティブ化さ...

npm、pnpm、およびYarn

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

コード補完

コード補完はWebStormエディターの重要な機能の1つです。補完候補を表示するために、WebStormはプロジェクトファイルをソースコードで調べ、それらに定義されているクラス、メソッド、関数、および変数を特別な内部インデックスに追加します。JSDocのコメント、TypeScript型定義などからの...

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

さまざまなアクションやポップアップを使用して、エディター内のコードを素早くナビゲートすることができます。エディターウィンドウとツールウィンドウ間の移動に関する詳細情報については、エディターの基本を確認してください。キャレットでナビゲートする前のキャレット位置を見るには、メインメニューからナビゲート

表示定義

クイック定義ルックアップshows you where and how your project symbols (classes, methods/functions, fields, tags, etc) are defined. For TypeScript objects, WebStorm...

JavaScriptリファレンスを表示

WebStormは、標準のJavaScript API、プロジェクトからのシンボルおよびその依存関係からの参照、および外部ライブラリで定義されているシンボルへの参照を示します。ドキュメントポップアップでシンボルのドキュメントを表示したり、メソッドパラメータに関する情報を入手したり、それらへのリンクが...