React

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

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

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

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

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

コードの補完

WebStormは、React API用のコード補完とJavaScriptコードのJSX(英語)を提供します。コード補完は、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など)

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

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

WebStormには、Reactアプリケーションでよく使用されるさまざまなステートメントやコードブロックに展開される50を超えるコードスニペットのコレクションが付属しています。以下の例は、rcjcという省略形を使用して新しい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を押します。

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

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

Lint Reactアプリケーション

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

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

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

ESLintを使用する

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

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

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

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

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

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

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

   カスタムESLintパッケージと構成を使用するように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(英語)公式サイトのESLintと react プラグイン設定の詳細を参照してください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

既知の制限

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