React
React は、カプセル化されたコンポーネントから複雑なインタラクティブユーザーインターフェースを構築するための JavaScript ライブラリです。React オフィシャル Web サイト(英語)からライブラリの詳細を参照してください。
WebStorm は、React と統合され、lint の設定、編集、実行、デバッグ、アプリケーションの保守を支援します。
新しい React アプリケーションの作成
新しい React シングルページアプリケーションの構築を開始するための推奨される方法は、create-react-app(英語) パッケージです。これは、WebStorm が npx(英語) を使用してダウンロードして実行します。その結果、開発環境は webpack、Babel、ESLint、その他のツールを使用するように事前構成されています。
もちろん、Create React App を自分でダウンロードすることも、空の WebStorm プロジェクトを作成して React をインストールすることもできます。
create-react-app を使用した React アプリケーションの生成
ウェルカム画面で新規プロジェクトの作成をクリックするか、メインメニューから を選択します。新規プロジェクトの作成ダイアログが開きます。
左側のペインで、React を選択します。
右側のペインで:
プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。
Node インタープリターフィールドに、使用する Node.js インタープリターを指定します。リストから設定済みのインタープリターを選択するか、追加を選択して新しいインタープリターを設定します。
create-react-app リストから、npx create-react-app を選択します。
または、npm バージョン 5.1 以前の場合、ターミナル Alt+F12 で
npm install --g create-react-app
を実行して、create-react-app
パッケージを自分でインストールします。アプリケーションを作成するときに、create-react-app
パッケージが保存されているフォルダーを選択します。オプション :
create-react-app フィールドに、プロジェクトの生成中に react-scripts(英語) の代わりに使用するカスタムパッケージを追加します。例:npx create-react-app react-awesome-scriptsこれは、-scripts に反応するからフォークされたパッケージの 1 つである可能性があります。たとえば、react-awesome-scripts(英語)、custom-react-scripts(英語)、react-scripts-ts(英語) などです。
オプション :
JSX の代わりに TSX を使用するには、TypeScript プロジェクトを作成するチェックボックスを選択します。WebStorm は、アプリケーション用の .tsx ファイルと tsconfig.json 構成ファイルを生成します。
作成をクリックすると、WebStorm は、必要なすべての構成ファイルを含む React -specific プロジェクトを生成し、必要な依存関係をダウンロードします。WebStorm は、アプリケーションを実行またはデバッグするためのデフォルト設定で、npm スタートおよび JavaScript デバッグ構成も作成します。
プロジェクトの依存関係をダウンロードするには、次のいずれかの操作を行います。
埋め込みターミナル(Alt+F12)に次のように入力します。
npm install
プロジェクトルートの package.json ファイルのコンテキストメニューから実行 'npm install' を選択します。
空の WebStorm プロジェクトに React をインストールする
この場合、以下の React アプリケーションの構築の説明に従ってビルドパイプラインを自分で設定する必要があります。React オフィシャル Web サイト(英語)からプロジェクトに React を追加する方法の詳細を参照してください。
空の WebStorm プロジェクトを作成するには
ウェルカム画面で新規プロジェクトの作成をクリックするか、メインメニューから を選択します。新規プロジェクトの作成ダイアログが開きます。
左側のペインで、空のプロジェクトを選択します。右側のウィンドウで、アプリケーションフォルダーを指定し、作成をクリックします。
空のプロジェクトに React をインストールするには
React を使用する空のプロジェクトを開きます。
埋め込みターミナル(Alt+F12)に次のように入力します。
npm install --save react react-dom
npm、pnpm、Yarn の説明に従って、パッケージを Node.js と NPM ページにインストールすることもできます。
既存の React アプリケーションから開始する
既存の React アプリケーションの開発を継続するには、WebStorm で開き、必要な依存関係をダウンロードします。
すでにマシン上にあるアプリケーションソースを開く
ウェルカム画面で開くをクリックするか、メインメニューから を選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。
バージョン管理からアプリケーションのソースを確認してください
ウェルカム画面で VCS から取得をクリックするか、メインメニューから を選択します。
呼び出されたダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。
依存関係をダウンロードする
ポップアップで実行 'npm install' または実行 'yarn install' をクリックします。
npm(英語)、Yarn 1(英語)、または Yarn 2(英語) を使用できます。詳細については、npm および Yarn を参照してください。
コードの補完
WebStorm は、React API および JSX(英語) 用のコード補完を JavaScript コードで提供します。コード補完は、React メソッド、React 固有属性、HTML タグとコンポーネント名、React イベント(英語)、コンポーネントプロパティなどで機能します。React オフィシャル Web サイト(英語)の詳細を参照してください。
React メソッドと React 固有属性に対してコード補完を取得するには、react.js ライブラリファイルをプロジェクトのどこかに配置する必要があります。通常、ライブラリはすでに node_modules フォルダーにあります。
React のメソッド、属性、イベントの補完
デフォルトでは、入力時にコード補完ポップアップが自動的に表示されます。例:

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

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

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

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

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

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

コンポーネントの名前を自動補完すると、WebStorm は必要なすべてのプロパティを自動的に追加します。必要なプロパティの一部がコンポーネントの使用に欠落している場合、WebStorm はそのことについて警告します。
HTML 属性を JSX に転送する
クラス属性またはイベントハンドラーを使用して HTML コードをコピーして JSX に貼り付けると、WebStorm は自動的にこれらの属性を React 固有のものに置き換えます ( className
、onClick
、onChange
など)

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

HTML コードを JSX または TSX に「そのまま」コピーするには、そのまま貼り付け Ctrl+Alt+Shift+V を使用するか、設定 / 環境設定ダイアログ Ctrl+Alt+S を開き、 に移動して、HTML を JSX ファイルに貼り付けるときに属性を変換するチェックボックスをオフにします。
React コードスニペットの使用
WebStorm には、React アプリでよく使用されるさまざまなステートメントとコードのブロックに展開する 50 を超えるコードスニペットのコレクションが付属しています。以下の例は、rcjc 省略形を使用して、新しい React コンポーネントを定義するクラスを作成する方法を示しています。

スニペットから 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>
には展開されません。

React アプリケーションをナビゲートする
基本的なナビゲーションの他に、WebStorm は React 固有コード要素間をジャンプできます。
波括弧
{}
内のメソッドまたは JavaScript 式の宣言にジャンプするには、メソッドまたは式を選択して Ctrl+B を押します。コンポーネントの宣言にジャンプするには、コンポーネント名を選択して Ctrl+B を押します。宣言とその型に移動する詳細を参照してください。
コンポーネント定義を表示するには、Ctrl+Shift+I を押します。表示定義の詳細を参照してください。
コンポーネントの簡単なドキュメントを表示するには、Ctrl+Q を押します。JavaScript ドキュメントの検索の詳細を参照してください。
Lint React アプリケーション
JavaScript および HTML 用のすべての WebStorm 組み込みコードインスペクションも JSX コードで機能します。WebStorm は、未使用の変数と関数、閉じタグの欠落、ステートメントの欠落などの場合に警告を出します。

いくつかのインスペクションのために WebStorm はクイックフィックスを提供します。たとえば、欠落しているメソッドを追加することを提案します。クイックフィックスポップアップを表示するには、Alt+Enter を押します。
インスペクションのリストをカスタマイズするには、設定 / 環境設定ダイアログ Ctrl+Alt+S を開き、エディターに移動します。インスペクション、および表示したくないインスペクションを無効にするか、重大度レベルを変更します。インスペクションの無効化と有効化およびインスペクションの重大度の構成から詳細を参照してください。
ESLint を使用する
組み込みコードインスペクションを提供することに加えて、WebStorm は、JSX コード用の ESLint(英語) などのリンターとも統合されます。ESLint は、プラグインで拡張できるさまざまな lint ルールを提供します。WebStorm は、入力時に ESLint によって報告された警告とエラーをエディターに表示します。ESLint では、JavaScript 標準スタイル(英語)も使用できます。
詳細は ESLint を参照してください。
ESLint に React JSX 構文を正しく理解させるには、eslint-plugin-react(英語) が必要です。このプラグインでは、表示名が React コンポーネントに設定されていない場合や、危険な JSX プロパティが使用されている場合など、警告が表示されます。

React プロジェクトに ESLint をインストールして構成する
組み込みターミナル( )で、次のように入力します。
npm install --save-dev eslint
npm install --save-dev eslint-plugin-react
ESLint 構成ファイル .eslintrc.* をプロジェクトに追加します。これは、.eslintrc、.eslintrc.json、または .eslintrc.yaml ファイル、またはサポートされている別の形式のファイルにすることができます。詳細については、ESLint 公式 Web サイト(英語)を参照してください。
設定 / 環境設定ダイアログ Ctrl+Alt+S で、言語およびフレームワーク | JavaScript | コード品質ツール | ESLint に移動し、自動 ESLint 構成を選択します。WebStorm は、プロジェクト node_modules フォルダー内の ESLint を自動的に検索し、.eslintrc.* ファイルまたは package.json 内の
eslintConfig
プロパティからデフォルト構成を使用します。または、手動 ESLint 構成を選択して、カスタム ESLint パッケージと構成を使用します。
詳細は WebStorm での ESLint のアクティブ化と構成を参照してください。
.eslintrc 構造体の例 (react プラグイン付き ESLint 1.x)
ecmaFeatures
オブジェクトに"jsx" = true
を追加します。ここでは、ES6 クラス、モジュールなど、使用したい追加の言語機能も指定できます。plugins
オブジェクトに、react
を追加します。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 つのファイルで定義されて使用されるコンポーネントの名前を変更する例です。

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

コンポーネント名の中にキャレットを置き、Shift+F6 を押すか、メインメニューから、またはコンテキストメニューから
を選択します。React の命名規則(英語)に準拠した新しいコンポーネント名を指定します。
コンポーネントを抽出する
既存のコンポーネントの render メソッドから JSX コードを抽出することにより、新しい React コンポーネントを作成できます。新しいコンポーネントは、関数またはクラスとして定義できます。React 公式 Web サイトの関数とクラスのコンポーネント(英語)を参照してください。

抽出するコードを選択し、コンテキストメニューから
を選択します。または、メインメニューのコンポーネントの抽出を選択します。
に移動するか、Ctrl+Alt+Shift+T を押してポップアップから開いたダイアログで、新しいコンポーネントの名前とそのタイプを指定します。デフォルトでは、機能コンポーネントが作成されます。新しいコンポーネントをクラスとして定義する場合は、クラスを選択します。
OK をクリックします。新しいコンポーネントは、既存のコンポーネントの隣に定義され、そこで使用されます。
オプション : シンボルの移動リファクタリングを使用して、新しいコンポーネントと必要なすべてのインポートを別のファイルに移動します。
オプション :WebStorm が新しいコンポーネントに使用するコードテンプレートを変更します。設定 / 環境設定ダイアログ Ctrl+Alt+S で、 に移動し、コードタブを開き、必要に応じて Apache Velocity テンプレート言語(英語)を使用してテンプレートを更新します。
関数をクラスコンポーネントに変換する
クラスコンポーネントに変換リファクタリングを使用すると、WebStorm は変換する関数の名前を持つ ES6 クラスを生成します。このクラスは React .Component
を拡張し、関数本体が移動される render()
メソッドを含みます。React オフィシャル Web サイト(英語)の詳細を参照してください。

変換するキャレットを関数内の任意の場所に置き、メインメニューまたはコンテキストメニューから
を選択します。または、Ctrl+Alt+Shift+T を押して、ポップアップからクラスコンポーネントに変換を選択します。
クラスを機能コンポーネントに変換する
関数コンポーネントに変換リファクタリングを使用すると、WebStorm は変換するクラスの名前で関数を生成し、render()
メソッドの内容を関数本体に移動します。

変換するクラス内の任意の場所にキャレットを置き、メインメニューまたはコンテキストメニューから
を選択します。または、Ctrl+Alt+Shift+T を押して、ポップアップから関数コンポーネントに変換を選択します。
React アプリケーションでの構造化
構造化を使用すると、配列やオブジェクトの値を変数に簡単に展開できます。この機能には非常に簡潔な構文があり、アプリケーションでデータを渡す必要があるときによく使用されます。
React クラスコンポーネントを使用する場合は、オブジェクト / 配列の破壊を導入するインテンションアクションの使用を検討してください。JavaScript での構造化の詳細を参照してください。

React アプリケーションの実行とデバッグ
新しい React シングルページアプリケーションの構築を開始するための推奨される方法は、React アプリケーションを作成(英語)します。この場合のみ、開発環境は webpack および Babel を使用するように事前構成されています。それ以外の場合は、最初にビルドパイプラインを構成する必要があります。
上記のように Create React App で作成されたアプリケーションの場合、WebStorm はデフォルト設定で 2 つの実行 / デバッグ構成を生成します。
デフォルト名が npm start の npm 構成。この構成では、開発サーバーを起動してアプリケーションを開発モードで起動する
npm start
コマンドを実行します。デフォルト名アプリケーションのデバッグの JavaScript デバッグ構成。この設定はデバッグセッションを開始します。
React アプリケーションを実行する
ツールバーのリストから npm start run 構成を選択し、リストの横にある
をクリックします。
または、ターミナル Alt+F12 で
npm start
を実行するか、npm ツールウィンドウ( )でstart
タスクをダブルクリックします。アプリケーションがコンパイルされ、Webpack 開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。デフォルトでは http://localhost:3000/ です。このリンクをクリックして、アプリケーションを表示します。
React アプリケーションをデバッグする
コードにブレークポイントを設定します。
上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。
リストから自動生成されたアプリケーションのデバッグ構成を選択し、リストの横にある
をクリックします。
アプリケーションが実行されている場所に応じて、さまざまな方法でデバッグセッションを開始できます。
localhost で実行されているアプリケーションをデバッグする
コードにブレークポイントを設定します。
上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて Webpack 開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。デフォルトでは http://localhost:3000/ です。 Ctrl+Shift を押したまま、この URL リンクをクリックします。WebStorm は、タイプ JavaScript デバッグの自動生成されたアプリケーションのデバッグ構成でデバッグセッションを開始します。
カスタム URL で実行されているアプリケーションをデバッグする
コードにブレークポイントを設定します。
上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて Webpack 開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。この URL アドレスをコピーします。後でデバッグ構成で指定します。アプリケーションを表示するには、リンクをクリックしてください。
JavaScript デバッグ構成を作成します。これを行うには、メインメニューの に移動し、
をクリックして、リストから JavaScript デバッグを選択します。実行 / デバッグ構成: JavaScript デバッグダイアログで、保存した URL を URL フィールドに貼り付け、構成を保存します。
新しく作成した構成を起動するには、構成のリストから構成を選択し、リストの横にある
をクリックします。
最初のブレークポイントに到達したら、デバッグツールウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断したときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示します。等々。
React アプリケーションの構築
既存の WebStorm プロジェクトに React をインストールした場合は、ビルドプロセスを設定する必要があります。React オフィシャル Web サイト(英語)から React アプリケーションのビルドパイプラインを構成するさまざまな方法について説明します。
React アプリケーションのテスト
React アプリケーション create-react-app で作成で Jest テスト(英語)を実行およびデバッグできます。始める前に、react-scripts パッケージが package.json の依存関係オブジェクトに追加されていることを確認してください。
Jest テストは、実行 / デバッグ構成を使用して、またはエディターから、またはプロジェクトツールウィンドウから Jest テストを実行してデバッグすることができます。詳しくは、Jest を参照してください。
Jest 実行 / デバッグ構成を作成する
実行 / デバッグ構成ダイアログ(メインメニューの )を開き、左側のペインで
をクリックして、リストから Jest を選択します。実行 / デバッグ構成: Jest ダイアログが開きます。
使用するノードインタープリターとアプリケーションの作業ディレクトリを指定します。デフォルトでは、作業ディレクトリフィールドにプロジェクトのルートフォルダーが表示されます。この定義済み設定を変更するには、目的のフォルダーへのパスを指定するか、リストから以前に使用したフォルダーを選択します。
Jest パッケージフィールドに、react-scripts パッケージへのパスを指定します。
Jest オプションフィールドに
--env=jsdom
と入力します。
テストの実行
メインツールバーのリストから Jest 実行 / デバッグ構成を選択し、リストの右側にある
をクリックします。
テストサーバーは自動的に起動します。実行ツールウィンドウで、テストサーバーからのメッセージを表示および分析します。
実行ツールウィンドウのテストランナータブのテスト実行の監視。
デバッグテスト
メインツールバーのリストから Jest 実行 / デバッグ構成を選択し、リストの右側にある
をクリックします。
開いたデバッグツールウィンドウでは、通常どおり進む: テストをステップ実行、停止し、再開し、テストの実行を中断したときにテストを検討するように、と。
既知の制限
デバッグセッション中に初めてアプリケーションを開くと、ページのロード時に実行されるコード内のブレークポイントの一部がヒットしないことがあります。その理由は、元のソースコードでブレークポイントを停止するには、WebStorm がブラウザーからソースマップを取得する必要があるからです。ただし、ブラウザーは、ページが少なくとも 1 回は完全に読み込まれた後にのみ、これらのソースマップを渡すことができます。この問題を回避するには、ブラウザーでページを再ロードしてください。
関連ページ:

新規プロジェクトの作成ダイアログ
このダイアログを使用して、空のプロジェクトを作成したり、アプリケーション開発用のフレームワーク固有のプロジェクトスタブを生成したりします。ダイアログの左側のペインには、スタブを生成できるプロジェクトタイプのリストが表示されます。利用可能なプロジェクトタイプのセットは、インストールされてアクティブ化されているプラグインによって異なります。右側のペインの内容は、選択したプロジェクトの種類によって異なります。場所フィールドはすべてのプロジェクトタイプに共通です。空のプロジェクト内容のないプロジェクトフ...

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

コード補完
コード補完は WebStorm エディターの重要な機能の 1 つです。補完候補を表示するために、WebStorm はプロジェクトファイルをソースコードで調べ、それらに定義されているクラス、メソッド、関数、変数を特別な内部インデックスに追加します。JSDoc のコメント、TypeScript 型定義などからの追加情報も、完成度を大幅に向上させることができます。補完はサードパーティのコードからのシンボルに対しても機能します。ほとんどの場合、プロジェクトに必要なファイルを追加するだけです。詳しくは Jav...

ソースコードナビゲーション
さまざまなアクションやポップアップを使用して、エディター内のコードを素早くナビゲートすることができます。エディターウィンドウとツールウィンドウ間の移動に関する詳細情報については、エディターの基本を確認してください。キャレットでナビゲートする前のキャレット位置を見るには、メインメニューからを選択するか、またはを押します。前に進むには、を選択するかを押します。Windows でこれらのショートカットを使用するには、ホットキーを無効にしていることを確認してください。最後に編集した場所に移動するには

表示定義
クイック定義ルックアップは、プロジェクトシンボル(クラス、メソッド / 関数、フィールド、タグなど)がどこでどのように定義されているかを示します。TypeScript オブジェクトの場合、WebStorm はそれらの推定タイプも表示します。マークアップ言語の場合、WebStorm は指定された DTD またはスキーマからシンボルの定義を取得します。詳細については、HTML および XML を参照してください。WebStorm はポップアップまたはツールチップにシンボル定義を表示できます。ポップアップは...

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