PhpStorm 2020.1ヘルプ

React

Reactは、カプセル化されたコンポーネントから複雑な対話的なユーザーインターフェースを構築するためのJavaScriptライブラリです。ReactオフィシャルWebサイト(英語)からライブラリの詳細を学びましょう。

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

始める前に

  1. お使いのコンピューターにNode.js(英語)がインストールされていることを確認してください。

  2. JavaScriptおよびTypeScriptバンドルプラグインがプラグインのページで有効になっていることを確認してください。詳細については、プラグインの管理を参照してください。

新しい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をインストールすることもできます。

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. PhpStorm will generate .tsx files for your application and a tsconfig.json configuration file.

  5. オプション :
    Specify a custom package to use instead of react-scripts(英語) during the project generation. This can be one of the packages forked from react-scripts , for example, react-awesome-scripts(英語) , custom-react-scripts(英語) , react-scripts-ts(英語) , and so on.

  6. When you click 作成 , PhpStorm generates a React -specific project with all the required configuration files and downloads the required dependencies. PhpStorm also creates an npm start and JavaScript デバッグ configurations with default settings for running or debugging your application.

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

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

    npm install

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

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

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

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

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

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

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

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

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

    npm install --save react react-dom

    You can also install the packages on the Node.jsとNPMページ as described innpm and Yarn.

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

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

既にマシン上にあるアプリケーションソースを開きます

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

バージョン管理からアプリケーションのソースを確認してください

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

  2. 呼び出されたダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。

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

コードの補完

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のメソッド、属性、およびイベントの補完

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

Completion popup

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:

ws_react_classname.png

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

ws_react_events.png

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

ws_react_javascript_expression.png

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

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

ws_react_component_completion.png

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

ws_react_imported_component_completion.png

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

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

ws_react_component_properties.png

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

HTML属性をJSXに転送する

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

ws_paste_from_html_to_jsx.png

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:

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

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

  • Press Ctrl+J and choose the relevant snippet. To narrow down the search, start typing the abbreviation and then select it from the completion list.

詳細はライブ・テンプレートを参照してください。

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

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

JSXでEmmetを使用する

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

ws_react_emmet.png

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

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

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

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

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

ws_react_quick_definition.png

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

Highlighting and breadcrumbs for JSX tags in a React application

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

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:

ws_react_inspection.png

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

ws_eslint_react.png

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

  1. 組み込みのターミナル表示 | ツール・ウィンドウ | ターミナル)に npm install --save-dev eslintnpm 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を手動で構成することもできます。

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 PhpStorm refactorings, in a React application you can also run 名前変更 for React components and use コンポーネントの抽出 to create new components.

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

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

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

ws_react_rename_component.png

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

ws_react_rename_component_import.png

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

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

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

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

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

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

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

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

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

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

Destructuring with intention action: Introduce object destructuring in a React class

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アプリケーションを実行する

  • In the npm tool window ( 表示 | ツール・ウィンドウ | npm ), double-click the start task.

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

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

  1. Start the application in the development mode by double-clicking the start task in the npm tool window.

  2. Wait till the application is compiled and the Webpack development server is ready. Open your browser at http://localhost:3000/ to view the application.

  3. Copy the URL address at which the application is running ( http://localhost:3000/ by default), you will later need this URL when creating a debug configuration.

    ws_react_debug_cra_app_is_running.png

  4. Create a new JavaScript デバッグ configuration: choose 実行 | 構成の編集 , click Add icon , and choose JavaScript デバッグ from the list. In the 実行/デバッグ構成: JavaScript デバッグ dialog, paste the saved URL http://localhost:3000/ in the URL field. Save the configuration.

  5. Set the breakpoints in your code and start a debugging session by clicking the Debug button next to the list of configurations.

  6. When the first breakpoint is hit, switch to the デバッグツールウィンドウ and proceed as usual: step through the program, pause 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アプリケーションの構築

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のテストを参照してください。

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. In the デバッグツールウィンドウ that opens, proceed as usual: step through the tests , pause and resume test execution, examine the test when suspended, and so on.

既知の制限

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

最終更新日: 2020年6月23日

関連ページ:

プラグイン

macOSのPhpStorm | 環境設定 | プラグインUse this page tomanage plugins: browse the plugin repository, install, remove, enable, disable, and update plugins.主なコントロ...

プラグインを管理する

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

npmおよびYarn

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

コード補完

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

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

You can quickly navigate through code in the editor using different actions and popups. For the detailed information on navigating between the editor

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

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