React

React プロジェクトに ESLint をインストールして構成する

1. 組み込みターミナル（表示 | ツールウィンドウ | ターミナル）で、次のように入力します。

   npm install --save-dev eslint npm install --save-dev eslint-plugin-react

2. ESLint 構成ファイル .eslintrc.* をプロジェクトに追加します。これは、.eslintrc、.eslintrc.json、.eslintrc.yaml ファイル、または別のサポートされている形式のファイルです。詳細については、ESLint 公式 Web サイト(英語)を参照してください。

3. 設定 / 環境設定ダイアログ (Ctrl+Alt+S) で、言語 & フレームワーク | JavaScript | コード品質ツール | ESLint に移動し、自動 ESLint 構成を選択します。JetBrains Rider は、プロジェクト node_modules フォルダー内の ESLint を自動的に見つけて、.eslintrc.* ファイルまたは package.json の eslintConfig プロパティからのデフォルト構成を使用します。

   または、手動 ESLint 構成を選択して、カスタム ESLint パッケージと構成を使用します。

   詳細は JetBrains Rider での ESLint のアクティブ化と構成を参照してください。

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

1. ecmaFeatures オブジェクトに "jsx" = true を追加します。ここでは、ES6 クラスやモジュールなど、使用したい追加の言語機能を指定することもできます。

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

3. rules オブジェクトでは、有効にしたい ESLint ビルトインルール(英語)と、react プラグインを介して利用可能なルール(英語)を一覧表示できます。

   { "parser": "babel-eslint", "env": { "browser": true, "es6": true, "jest": true }, "rules": { "arrow-parens": ["error", "as-needed", { "requireForBlockBody": true }], "react/jsx-props-no-spreading": "off", "react/jsx-sort-props": ["error", { "reservedFirst": ["key"] }], "react/require-default-props": "off", "react/sort-prop-types": "error", "react/state-in-constructor": ["error", "never"], "semi-spacing": "warn" }, "overrides": [ { "files": [ "sample/**", "test/**" ], "rules": { "import/no-unresolved": "off" } } ] }

ESLint 公式 Web サイト(英語)から ESLint および react プラグイン構成の詳細を学びましょう。

1. コンポーネント名の中にキャレットを置き、Shift+F6 を押すか、メインメニューから、コンテキストメニューからリファクタリング | 名前の変更を選択します。

2. React の命名規則(英語)に準拠した新しいコンポーネント名を指定します。

1. 状態値の名前の中にキャレットを置き、Shift+F6 を押すか、コンテキストメニューからのメインメニューからリファクタリング | 名前の変更を選択します。

2. 新しい値の名前を指定して、Enter を押します。フォーカスは setter に移動し、そこで値の新しい名前が提案されます。Enter を押して、提案を受け入れます。

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

   あるいは、メインメニューでリファクタリング | 抽出 / 導入 | コンポーネントの抽出に移動するか、Ctrl+Alt+Shift+T を押してポップアップからコンポーネントの抽出を選択します。

2. 開いたダイアログで、新しいコンポーネントの名前とそのタイプを指定します。デフォルトでは、機能コンポーネントが作成されます。新しいコンポーネントをクラスとして定義する場合は、クラスを選択します。

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

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

5. オプション : JetBrains Rider が新しいコンポーネントに使用するコードテンプレートを変更します。設定 / 環境設定ダイアログ (Ctrl+Alt+S) で、エディター | ファイルおよびコードテンプレートに移動し、コードタブを開き、必要に応じて Apache Velocity テンプレート言語(英語)を使用してテンプレートを更新します。

• 変換するキャレットを関数内の任意の場所に置き、メインメニューまたはコンテキストメニューからリファクタリング | クラスコンポーネントに変換を選択します。

• または、Ctrl+Alt+Shift+T を押して、ポップアップからクラスコンポーネントに変換を選択します。

• 変換するクラス内の任意の場所にキャレットを置き、メインメニューまたはコンテキストメニューからリファクタリング | 関数コンポーネントに変換を選択します。

• または、Ctrl+Alt+Shift+T を押して、ポップアップから関数コンポーネントに変換を選択します。

npm 実行 / デバッグ構成を作成する

1. 実行 | 実行構成の編集に進みます。あるいは、ツールバーのリストから実行構成の編集を選択します。

   

   開いた実行構成の編集ダイアログで、ツールバーの追加ボタン () をクリックし、リストから npm を選択します。

2. 開いた実行 / デバッグ構成: npm ダイアログの構成タブで、使用する package.json の場所、Node.js インタープリター、およびパッケージマネージャーを指定します。

   コマンドフィールドで、リストから実行を選択し、次にスクリプトリストから実行するスクリプトを選択します。ほとんどの場合、デフォルトの start スクリプトになりますが、カスタムポートでアプリケーションを実行するなど、package.json で別のスクリプトを構成することもできます。

   

3. オプション:

   ブラウザーでアプリケーションを開くには、次のように構成を更新します。ブラウザー / Live Edit タブで、起動後チェックボックスをオンにし、アプリケーションを開くブラウザーを選択して、アプリケーションが実行される URL アドレスを指定します。

   アプリケーションをデバッグする場合は、Google Chrome(英語) または別の Chromium ベースのブラウザー(英語)を選択します。

   

アプリケーションの実行

1. ツールバーのリストから npm start run 構成を選択し、その横にある をクリックします。

   

2. アプリケーションがコンパイルされ、開発サーバーの準備ができるまで待ちます。

   実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。このリンクをクリックすると、アプリケーションが表示されます。

   

   または、上記のように、 JetBrains Rider が起動時にアプリケーションを開くようにします。

単一の npm 実行 / デバッグ構成で React アプリケーションを実行およびデバッグする

1. コードにブレークポイントを設定します。

2. 上記の説明に従って npm 構成を作成します。

   create-react-app を使用してアプリケーションを生成した場合、JetBrains Rider は npm start というデフォルト名の npm 構成をすでに作成しています。この構成は、実行ウィジェットおよび実行 / デバッグ構成ダイアログから利用できます。

   

3. 開いた実行 / デバッグ構成: npm ダイアログの構成タブで、使用する package.json の場所、Node.js インタープリター、およびパッケージマネージャーを指定します。

   コマンドフィールドで、リストから実行を選択し、次にスクリプトリストから実行するスクリプトを選択します。ほとんどの場合、デフォルトの start スクリプトになりますが、カスタムポートでアプリケーションを実行するなど、package.json で別のスクリプトを構成することもできます。

   

4. ブラウザー / Live Edit タブで、起動後チェックボックスを選択し、リストから Google Chrome(英語) または別の Chromium ベースのブラウザー(英語)を選択し、JavaScript デバッガーを使用するチェックボックスを選択して、アプリケーションを実行する URL を指定します。

   

5. 実行をクリックします。

   構成を再実行するには、実行ウィジェットのリストから構成を選択し、その横にある をクリックします。

   JetBrains Rider はアプリケーションを開発モードで実行し、同時にデバッグセッションを起動します。

   

6. 最初のブレークポイントに到達したら、デバッグウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断したときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示します。

JavaScript デバッグ実行 / デバッグ構成でデバッグを開始する

1. コードにブレークポイントを設定します。

2. 上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。

   実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。この URL をコピーして、後で JavaScript デバッグ構成で指定します。

   

3. JavaScript デバッグ構成を作成します。これを行うには、メインメニューの実行 | 実行構成の編集に移動し、 をクリックして、リストから JavaScript デバッグを選択します。

4. 開いた実行 / デバッグ構成: JavaScript デバッグダイアログで、構成の名前と、開発モードでアプリケーションが実行されている URL アドレスを指定します。この URL は、上記のように、実行ツールウィンドウまたはターミナルにコピーできます。

   

5. デバッグをクリックします。

   構成を再実行するには、実行ウィジェットのリストから構成を選択し、その横にある をクリックします。

   

6. 最初のブレークポイントに到達したら、デバッグウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断したときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示します。

1. コードにブレークポイントを設定します。

2. 上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。

3. 実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。Ctrl+Shift を押したまま、この URL リンクをクリックします。JetBrains Rider は、タイプ JavaScript デバッグの自動生成された 構成でデバッグセッションを開始します。