WebStorm 2020.1ヘルプ

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アプリケーションの生成

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

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

  3. 右側のペインで:

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

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

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

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

  4. オプション :
    To use TSX instead of JSX, select the TypeScriptプロジェクトを作成する checkbox. WebStorm will generate .tsx files for your application and a tsconfig.json configuration file.

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

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

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

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

    npm install

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

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

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

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

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

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

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

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

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

    npm install --save react react-dom

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

onClickonChangeなどのすべての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はそのことについて警告します。

HTML属性をJSXに転送する

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

HTMLコードを「そのまま」JSXにコピーするには、そのまま貼り付け Ctrl+Shift+Alt+V を使用するか、設定/環境設定ダイアログ Ctrl+Alt+Sを開き、エディター | 一般 | スマート・キー | JavaScriptに移動して、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を押します。

ws_react_quick_definition.png

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

Highlighting and breadcrumbs for JSX tags in a React application

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

Lint Reactアプリケーション

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

ws_react_inspection.png

いくつかのインスペクションのために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プロパティが使用されている場合など、警告が表示されます。

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ページで、自動 ESLint 構成を選択します。WebStormは、プロジェクトの 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アプリケーションのリファクタリング

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をクリックします。新しいコンポーネントは、既存のコンポーネントの隣に定義され、そこで使用されます。

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

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

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

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

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

The recommended way to start building a new React single page application is Reactアプリケーションを作成します(英語)。 Only in this case your development environment is preconfigured to use webpack and Babel. Otherwise, you need to configure a build pipeline first.

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. When the first breakpoint is hit, switch to the デバッグツールウィンドウ and proceed as usual: step through the program, stop and resume program execution, examine it when suspended, explore the call stack and variables, set watches, evaluate variables, view actual HTML DOM, and so on.

    ws_react_debug_cra_debug_session.png

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

既存のWebStormプロジェクトに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 をクリックします。

    ws_select_run_configuration_jest.png

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

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

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

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

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

既知の制限

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

最終更新日: 2020年5月29日

関連ページ:

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

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

npmおよびYarn

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

コードとパスの自動補完

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

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

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

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

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

ESLint

WebStormはESLintと統合されており、プラグインでも拡張できるlintルールの幅が広がります。WebStormは、ESLintによって報告された警告とエラーを入力時にエディターに表示します。ESLintでは、JavaScript標準スタイルを使用することもできます。問題の説明を表示するには...