React

始める前に

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

The recommended way to start building a new React single page application is create-react-app(英語) package, which PhpStorm downloads and runs for you using npx(英語). As a result, your development environment is preconfigured to use webpack, Babel, ESLint, and other tools.

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

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

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

コードの補完

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

To get code completion for React methods and React-specific attributes, you need to have the react.js library file somewhere in your project. Usually the library is already in your node_modules folder.

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

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

In JSX tags, PhpStorm provides coding assistance for React 固有属性(英語) , such as className or classID , and 非DOM属性(英語) , such as key or ref . Moreover, auto-completion also works for names of classes defined in the project’s CSS files:

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

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

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

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

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

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

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

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

HTML属性をJSXに転送する

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

To copy HTML code to JSX "as is", use そのまま貼り付け Ctrl+Alt+Shift+V or open the 設定/環境設定 dialog Ctrl+Alt+S , go to エディター | 一般 | スマート・キー | JavaScript , and clear the HTML を JSX ファイルに貼り付けるときに属性を変換する checkbox.

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

PhpStorm comes with a collection of more than 50 code snippets that expand into different statements and blocks of code often used in React apps. The example below shows how you can use the rcjc abbreviation to create a class that defines a new React component:

JSXでEmmetを使用する

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

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

Besides the basic navigation, PhpStorm helps you jump between React-specific code elements.

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

• コンポーネントの定義にジャンプするには、コンポーネント名を選択し、Ctrl+Bを押します。

• コンポーネントのドキュメントを表示するには、Ctrl+Shift+Iを押します。

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

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

Lint Reactアプリケーション

All the PhpStorm built-in code inspections for JavaScript and HTML also work in JSX code. PhpStorm alerts you in case of unused variables and functions, missing closing tags, missing statements, and much more:

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

To customize the list of inspections, open the エディター | インスペクション page of the 設定/環境設定 Ctrl+Alt+S , and disable the inspections you don’t want to see or change their severity levels.

ESLintを使用する

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

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

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

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

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

2. Add a ESLint configuration file .eslintrc to your project.

3. In the 設定/環境設定 dialog Ctrl+Alt+S , go to 言語とフレームワーク | JavaScript | コード品質ツール | ESLint . On the ESLintページ that opens, select 自動 ESLint 構成 . PhpStorm will automatically locate ESLint in your project’s node_modules folder and then use the .eslintrc configuration by default.

   カスタムESLintパッケージと構成を使用するようにESLintを手動で構成することもできます。

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

• In the ecmaFeatures object, add "jsx" = true . Here you can also specify additional language features you’d like to use, for example ES6 classes, modules, and so on.

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

• In the rules object, you can list ESLintビルトインルール(英語) that you would like to enable, as well as rules available via the react plugin(英語).

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

ESLint公式Webサイト(英語)のESLintと react プラグイン設定の詳細を参照してください。

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

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

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

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

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

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

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

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

PhpStormでは、専用のリファクタリング、インテンションアクション、またはクイックフィックスを使用して、配列またはオブジェクトから複数の値を取得するコードの断片を単純化できます。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アプリケーションの構築

You need to set up the build process if you installed React in an existing PhpStorm project. Learn about various ways to configure a build pipeline for your React application from ReactオフィシャルWebサイト(英語)。

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

You can run and debug Jestテスト(英語) in React applications create-react-appで作成 . Before you start, make sure the react-scripts package is added to the dependencies object of your package.json。

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

既知の制限

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