WebStorm 2018.3ヘルプ

React

Reactは、カプセル化されたコンポーネントから複雑なインタラクティブユーザインターフェースを構築するためのJavaScriptライブラリです。ライブラリの詳細については、React(英語)公式サイトを参照してください。

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

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

create-react-app(英語)パッケージを使用するか、空のWebStormプロジェクトを作成してReactをインストールすることができます。

create-react-appでReactアプリケーションを生成する

Reactアプリケーションを作成する(英語)は、新しいReactシングルページアプリケーションの構築を開始するための推奨される方法です。その結果、開発環境はwebpack、Babel、ESLintなどのツールを使用するように事前設定されています。ReactのインストールとReactのアプリケーションの作成の詳細については、React(英語)公式サイトを参照してください。

create-react-appをグローバルにインストールするには

  • 組み込みのターミナル表示 | ツール・ウィンドウ | ターミナル)を開き、コマンドプロンプトで npm install -g create-react-app と入力します。

アプリケーションを作成するには

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

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

  3. 右側のウィンドウで、プロジェクトフォルダ、使用するNode.jsインタプリタ、および create-react-app パッケージへのパスを指定します。

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

  5. 作成をクリックすると、WebStormはすべての必要な設定ファイルを含むReact固有のプロジェクトを生成します。

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

  • 組み込みのターミナルAlt+F12)を開き、コマンドプロンプトで npm install と入力します。

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

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

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

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

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

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

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

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

  2. 埋め込みターミナルAlt+F12)を開き、 npm install --save react react-domと入力します。

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

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

既にあなたのマシンにあるアプリケーションソースを開くには

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

バージョンコントロールからアプリケーションソースをチェックアウトするには

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

  2. リストからバージョン管理システムを選択します。

  3. 表示されるVCS固有のダイアログで、アプリケーションのソースをチェックアウトするための資格情報とリポジトリを入力します。

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

  • ポップアップウィンドウで実行 'npm install'をクリックします。

    Opening an Angular application and downloading the dependencies from package.json

コードの補完

WebStormは、React APIにはコード補完を、JavaScriptコードにはJSX(英語)を提供します。コード補完は、Reactメソッド、React 固有属性、HTMLタグとコンポーネント名、Reactイベント(英語)、コンポーネントプロパティなどで機能します。React(英語)の公式Webサイトから詳細を確認してください。

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

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

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

Completion popup
JSXタグでは、WebStormは、 className または classIDなどのReact 固有属性(英語)keyrefなどの非DOM属性(英語)のコーディング支援を提供します。さらに、自動補完は、プロジェクトのCSSファイルで定義されたクラスの名前に対しても機能します。
onClick または onChangeなどのすべてのReactイベント(英語)は、中括弧波括弧(={})と一緒に自動的に完了することもできます。
ws_react_events.png
また、中括弧波括弧内のJavaScript式の補完も可能です。これは、定義したすべてのメソッドと関数に適用されます。
ws_react_javascript_expression.png

HTMLタグとコンポーネント名の入力

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

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

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

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

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

JSXへのHTML属性の転送

クラス属性やイベントハンドラを持つHTMLコードをコピーしてJSXに貼り付けると、WebStormはこれらの属性をReact 固有のもの(classNameonClickonChangeなど)で自動的に置き換えます。

HTMLコードをJSXにそのままコピーするには、そのまま貼り付けCtrl+Shift+Alt+V)を使用します。

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

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

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

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

  • Ctrl+J を押して、該当するスニペットを選択します。検索範囲を絞り込むには、省略形を入力して補完リストから選択します。

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

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

JSXでのEmmetの使用

WebStormを使用すると、Emmet(英語)をHTMLだけでなく、特別なReact twistsを利用するJSXコードで使用することができます。例:略称 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を押します。

ws_react_quick_definition.png

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

Highglighting and breadcrumbs for JSX tags in a React application

LintingおよびReactアプリケーション

JavaScriptとHTML用のWebStorm組み込みコードインスペクションはすべてJSXコードでも動作します。WebStormは、使用されていない変数や関数、終了タグの欠落、ステートメントの不足などを警告します。

ws_react_inspection.png
いくつかのインスペクション WebStormでは、欠落しているメソッドを追加するなど、クイックフィックスを提供しています。クイックフィックスポップアップを表示するには、 Alt+Enterを押します。

ESLintの使用

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

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

ws_eslint_react.png

WebStormでESLintを使い始めるには

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

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

  3. 設定/環境設定ダイアログ(Ctrl+Alt+S)で、言語とフレームワーク | JavaScript | コード品質ツール | ESLintを選択します。開いているESLintページで、使用可能にするチェックボックスを選択します。WebStormは自動的にプロジェクトの node_modules フォルダにESLintを配置し、デフォルトで .eslintrc 設定を使用します。

ws_eslint_enable.png

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

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

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

Besides the common WebStorm refactorings, in a React application you can also run 名前変更 for React components and use コンポーネントの抽出 to create new components.

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

  • コンポーネント名の中にカーソルを置き、 Shift+F6を押します

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

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

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

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

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

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

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

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

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

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

Reactアプリケーションを実行するには、次のいずれかの操作を行います。

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

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

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

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

  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. コード内にブレークポイントを設定し、設定リストの横にある icons actions startDebugger svg をクリックしてデバッグセッションを開始します。

  6. 最初のブレークポイントにヒットした場合、デバッグツールウィンドウに切り替えて、いつものように進む: プログラムを通じてステップ停止し、再開し 、プログラムの実行を、中断したときにそれを調べて 、コールスタックと変数を探る、監視を設定し、変数を評価し、実際のHTML DOMを表示し 、等

    ws_react_debug_cra_debug_session.png

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

Reactを既存のWebStormプロジェクトにインストールした場合は、ビルドプロセスを設定する必要があります。ReactアプリケーションのビルドパイプラインをReact(英語)公式サイトから設定するさまざまな方法について学んでください。

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

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

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

Jest実行/デバッグ設定を作成するには

  1. 実行/デバッグ構成ダイアログボックス(メインメニューの実行 | 構成の編集)を開きます。

  2. ツールバーの icons general add svg をクリックし、リストからJestを選択します。[実行/デバッグ構成: Jest]ダイアログボックスが開きます。

  3. 使用するノードインタープリタとアプリケーションの作業ディレクトリを指定します。

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

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

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

    ws_react_run_config_jest.png

テストを実行する

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

    ws_select_run_configuration_jest.png

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

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

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

  1. メインツールバーのリストからJest実行/デバッグ設定を選択し、リストの右側にある icons actions startDebugger svg をクリックします。

  2. 開いているデバッグツールウィンドウでは、テストをステップ実行し、テスト実行を停止して再開し中断時にテストを調べます

いくつかの既知の制限

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

  • Webpackより前のバージョンのwebpack-dev-serverを使用している場合は、WebStormのSafe書き込み機能を無効にすることをお勧めします。それ以外の場合、アプリケーションは変更された時点では更新されません。この問題は、Webpack 2で修正されています。

最終更新日: 2018年12月12日

関連事項