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

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

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

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

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

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

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

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

HTMLコードを「そのまま」JSXにコピーするには、そのまま貼り付け Ctrl+Shift+Alt+V を使用するか、設定/環境設定ダイアログ Ctrl+Alt+Sを開き、 に移動して、HTML を JSX ファイルに貼り付けるときに属性を変換するチェックボックスをオフにします。
Reactコードスニペットの使用
PhpStormには、Reactアプリケーションでよく使用されるさまざまなステートメントやコードブロックに展開される50を超えるコードスニペットのコレクションが付属しています。以下の例は、rcjcという省略形を使用して新しいReactコンポーネントを定義するクラスを作成する方法を示しています。
スニペットからReactコード構成を作成するには
必要な省略形をエディターに入力し、Tabを押します。
Ctrl+J を押して適切なスニペットを選択してください。検索を絞り込むには、略語を入力してから補完リストから選択します。
詳細はライブ・テンプレートを参照してください。
利用可能なすべてのReactスニペットのリストを表示するには
JSXでのEmmetの使用
PhpStormでは、HTMLだけでなく、特別なReact twistsを利用してJSXコードでもEmmet(英語)を使用できます。例:略語div.my-classはJSXでは <div className=”my-class"></div>
に展開されますが、HTMLのように <div class=”my-class"></div>
には展開されません。

Reactアプリケーションのナビゲート
基本的なナビゲーションのほかに、PhpStormはReact 固有コード要素間のジャンプを手助けします。
波括弧
{}
内のメソッドまたはJavaScript式の定義にジャンプするには、そのメソッドまたは式を選択し、Ctrl+Bを押します。コンポーネントの定義にジャンプするには、コンポーネント名を選択し、Ctrl+Bを押します。
コンポーネントのドキュメントを表示するには、Ctrl+Shift+Iを押します。


詳細はパンくずリストでナビゲートするを参照してください。
LintおよびReactアプリケーション
JavaScriptおよびHTML用のPhpStorm組み込みコードインスペクションもすべてJSXコードで機能します。PhpStormは、未使用の変数や関数、終了タグの欠落、ステートメントの欠如などの場合に警告します。

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

PhpStormでESLintの使用を開始するには
組み込みのターミナル( )に
npm install --save-dev eslint
とnpm install --save-dev eslint-plugin-react
を入力します。プロジェクトにESLint構成ファイル .eslintrc を追加します。
設定/環境設定ダイアログ Ctrl+Alt+Sで、言語とフレームワーク | JavaScript | コード品質ツール | ESLintに移動します。開いたESLintページで、自動 ESLint 構成を選択します。PhpStormは、プロジェクトの node_modules フォルダー内のESLintを自動的に見つけ、デフォルトで .eslintrc 構成を使用します。
カスタムESLintパッケージと構成を使用するようにESLintを手動で構成することもできます。

.eslintrc構造体の例 (react プラグイン付き ESLint 1.x)
ecmaFeatures
オブジェクトに"jsx" = true
を追加します。ここでは、ES6クラス、モジュールなど、使用したい追加の言語機能も指定できます。plugins
オブジェクトに、react
を追加します。rules
オブジェクトには、有効にするESLintビルトインルール(英語)と、reactプラグインを介して使用可能なルール(英語)をリストできます。
react
プラグイン設定の詳細を参照してください。Reactアプリケーションのリファクタリング
一般的なPhpStormリファクタリングに加えて、Reactアプリケーションでは、Reactコンポーネントに対して名前変更を実行し、コンポーネントの抽出を使用して新しいコンポーネントを作成することもできます。
コンポーネントの名前を変更する
コンポーネント名の中にキャレットを置き、Shift+F6を押す
以下は、1つのファイルで定義されて使用されるコンポーネントの名前を変更する例です。
同じ方法で、1つのファイルで定義されたコンポーネントの名前を変更し、名前付きエクスポートを使用して別のファイルにインポートすることもできます。
コンポーネントを抽出する
既存のコンポーネントのrenderメソッドからJSXコードを抽出して、新しいReactコンポーネントを作成することができます。
抽出するコードを選択し、メインメニューまたはコンテキストメニューからリファクタリング | 抽出 | コンポーネントを選択します。
コンポーネントに名前を付けます。
コンポーネントをクラスとして定義する場合はクラスを選択し、機能コンポーネントを作成する場合は関数を選択します。
OKをクリックします。新しいコンポーネントは、既存のコンポーネントの隣に定義され、そこで使用されます。
オプション : シンボルの移動リファクタリングを使用して、新しいコンポーネントと必要なすべてのインポートを別のファイルに移動します。
Reactアプリケーションでの分割代入
構造化を使用すると、配列やオブジェクトの値を変数に簡単に展開できます。この機能には非常に簡潔な構文があり、アプリケーションにデータを渡す必要があるときによく使用されます。詳細はJavaScriptでの構造化を参照してください。
PhpStormでは、専用のリファクタリング、インテンションアクション、またはクイックフィックスを使用して、配列またはオブジェクトから複数の値を取得するコードの断片を単純化できます。Reactクラスコンポーネントを操作するときは、オブジェクトまたは配列の分割代入を導入する インテンションアクションの使用を検討してください。

Reactアプリケーションの実行とデバッグ
新しいReactシングルページアプリケーションを構築するための推奨方法はReactアプリケーションを作成(英語)します。この場合のみ、開発環境はwebpackとBabelを使用するように事前設定されています。それ以外の場合は、最初にビルドパイプラインを構成する必要があります。
Reactアプリケーションを実行する
npmツールウィンドウ ( )で、
start
タスクをダブルクリックします。Webpackホットモジュール交換(英語)のおかげで、開発サーバーが稼動しているときに、ソースファイルを変更して更新を保存するとすぐにアプリケーションが自動的に再ロードされます。
Reactアプリケーションをデバッグするには
npmツールウィンドウの開始タスクをダブルクリックして、開発モードでアプリケーションを起動します。
アプリケーションがコンパイルされ、Webpack開発サーバーが準備完了するまで待ちます。アプリケーションを表示するには、http://localhost:3000/ でブラウザを開きます。
アプリケーションが実行されているURLアドレス(デフォルトでhttp://localhost:3000/ )をコピーすると、後でデバッグ設定を作成するときにこのURLが必要になります。
新しいJavaScript デバッグ構成を作成します。 を選択し、
をクリックして、リストからJavaScript デバッグを選択します。実行/デバッグ構成: JavaScript デバッグダイアログで、保存したURL http://localhost:3000/ をURLフィールドに貼り付けます。設定を保存します。
コード内にブレークポイントを設定し、設定リストの横にある
をクリックしてデバッグセッションを開始します。
最初のブレークポイントに到達したら、デバッグツールウィンドウに切り替えて通常どおりに進みます。プログラムをステップ実行し、プログラムの実行を停止して再開 し、中断時にそれを調べ、コールスタックと変数を調べて監視を設定します。等々。
Reactアプリケーションの構築
Reactを既存のPhpStormプロジェクトにインストールした場合は、ビルドプロセスを設定する必要があります。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実行/デバッグ設定を選択し、リストの右側にある
をクリックします。
開いたデバッグツールウィンドウでは、通常どおり進む: テストをステップ実行、停止し、再開し、テストの実行を中断したときにテストを検討するように、と。
既知の制限
デバッグセッション中に初めてアプリケーションを開くと、ページのロード時に実行されるコード内のブレークポイントの一部がヒットしないことがあります。その理由は、元のソースコードでブレークポイントを停止するには、PhpStormがブラウザからソースマップを取得する必要があるからです。ただし、ブラウザは、ページが少なくとも1回は完全に読み込まれた後にのみ、これらのソースマップを渡すことができます。この問題を回避するには、ブラウザでページをリロードしてください。
関連ページ:

プラグイン
WindowsとLinux用のmacOS用このページを使用してプラグインを管理します。プラグインリポジトリの閲覧、プラグインのインストール、削除、有効化、無効化、および更新を行います。主なコントロール:マーケットプレースこのタブを使用して、JetBrainsプラグインリポジトリからプラグインをブラウ...

プラグインを管理する
プラグインはPhpStormのコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、その他のツールとの統合を提供、さまざまな言語およびフレームワークに対するコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどを使用して、生産性をBoo...

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

コードとパスの自動補完
このセクションでは、コーディングプロセスのスピードアップを可能にするコンテキスト対応コード補完のさまざまなテクニックについて説明します。基本補完:基本コード補完を使用すると、可視性の範囲内でクラス、メソッド、およびキーワードの名前を完成させることができます。コード補完を起動すると、PhpStormは...

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

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