React
React は、カプセル化されたコンポーネントから複雑なインタラクティブユーザーインターフェースを構築するための JavaScript ライブラリです。React オフィシャル Web サイト(英語)からライブラリの詳細を参照してください。
RubyMine は、React と統合され、lint の設定、編集、実行、デバッグ、アプリケーションの保守を支援します。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
設定 | プラグインページのインストール済みタブで、JavaScript and TypeScript および JavaScript Debugger に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。
JetBrains マーケットプレイスからプラグインをインストールするの説明に従って、設定 | プラグインページのタブマーケットプレースに React リポジトリプラグインをインストールして有効にします。
新しい React アプリケーションを作成する
新しい React シングルページアプリケーションの構築を開始するための推奨される方法は、create-react-app(英語) パッケージです。これは、RubyMine が npx(英語) を使用してダウンロードして実行します。その結果、開発環境は webpack、Babel、ESLint、その他のツールを使用するように事前構成されています。
もちろん、Create React App を自分でダウンロードすることも、空の RubyMine プロジェクトを作成して 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
パッケージが保存されているフォルダーを選択します。JSX の代わりに TSX を使用するには、TypeScript プロジェクトの作成チェックボックスを選択します。RubyMine は、アプリケーション用の .tsx ファイルと tsconfig.json 構成ファイルを生成します。
作成をクリックすると、RubyMine は、必要なすべての構成ファイルを含む React -specific プロジェクトを生成し、必要な依存関係をダウンロードします。RubyMine は、アプリケーションを実行またはデバッグするためのデフォルト設定で、npm スタートおよび JavaScript デバッグ構成も作成します。
空の RubyMine プロジェクトに React をインストールする
この場合、以下の React アプリケーションの構築の説明に従ってビルドパイプラインを自分で設定する必要があります。React オフィシャル Web サイト(英語)からプロジェクトに React を追加する方法の詳細を参照してください。
空の RubyMine プロジェクトを作成する
ウェルカム画面で新規プロジェクトの作成をクリックするか、メインメニューから を選択します。新規プロジェクトダイアログが開きます。
左側のペインで、空のプロジェクトを選択します。右側のウィンドウで、アプリケーションフォルダーを指定し、作成をクリックします。
空のプロジェクトに React をインストールする
React を使用する空のプロジェクトを開きます。
埋め込まれたターミナル(Alt+F12)で、次のように入力します。
npm install --save react react-dom
既存の React アプリケーションから始める
既存の React アプリケーションの開発を継続するには、RubyMine で開き、必要な依存関係をダウンロードします。
すでにマシン上にあるアプリケーションソースを開く
ウェルカム画面でオープンをクリックするか、メインメニューから を選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。
バージョン管理からアプリケーションのソースをチェックアウト
ウェルカム画面で VCS から取得をクリックします。
あるいは、メインメニューから
、 、 を選択します。メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce。
表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。
依存関係をダウンロードする
ポップアップで 'npm install' の実行または実行 'yarn install' をクリックします。
npm(英語)、Yarn 1(英語)、または Yarn 2(英語) を使用できます。詳細については、npm および Yarn を参照してください。
あるいは、エディターまたはプロジェクトツールウィンドウの package.json のコンテキストメニューから 'npm install' の実行または実行 'yarn install' を選択します。
プロジェクトのセキュリティ
RubyMine の外部で作成され、そこにインポートされたプロジェクトを開くと、RubyMine は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。
![信頼できないプロジェクトの警告 Untrusted project warning](https://resources.jetbrains.com/help/img/idea/2024.2/ws_webpack_project_security_warning.png)
次のいずれかのオプションを選択します。
セーフモードでプレビュー : この場合、RubyMine はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。
RubyMine はエディター領域の上部に通知を表示し、プロジェクトを信頼するリンクをクリックして、いつでもプロジェクトをロードできます。
プロジェクトを信頼 : この場合、RubyMine はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての RubyMine 機能が使用可能になることを意味します。
開かない : この場合、RubyMine はプロジェクトを開きません。
プロジェクトのセキュリティの詳細を参照してください。
コード補完
RubyMine は、React API にコード補完を提供し、JavaScript コードに JSX(英語) を提供します。コード補完は、React メソッド、React 固有の属性、HTML タグとコンポーネント名、React イベント(英語)、コンポーネントプロパティなどに対して機能します。React オフィシャル Web サイト(英語)から詳細を参照してください。
React メソッドのコード補完と React 固有の属性を取得するには、プロジェクトのどこかに react.js ライブラリファイルが必要です。通常、ライブラリはすでに node_modules フォルダーにあります。
完全な React メソッド、属性、イベント
デフォルトでは、入力時にコード補完ポップアップが自動的に表示されます。例:
![補完ポップアップ Completion popup](https://resources.jetbrains.com/help/img/idea/2024.2/ws_react_completion_methods_and_attributes.png)
JSX タグでは、RubyMine は className
や classID
などの React 固有の属性(英語)、および key
や ref
などの非 DOM 属性(英語)のコーディング支援を提供します。さらに、自動補完は、プロジェクトの CSS ファイルで定義されているクラスの名前に対しても機能します。
![CSS クラス名の完成 Completion for CSS class names](https://resources.jetbrains.com/help/img/idea/2024.2/ws_react_classname.png)
onClick
や onChange
などのすべての React イベント(英語)は、波括弧 ={}
または引用符 ""
と一緒に自動的に補完することもできます。
![Complete React events](https://resources.jetbrains.com/help/img/idea/2024.2/ws_react_events.png)
デフォルトでは、波括弧が挿入されます。RubyMine で常に引用符を追加することも、TypeScript 定義ファイル (d.ts)(英語) の型に基づいて引用符または中括弧のどちらかを選択することもできます。デフォルト設定を変更するには、設定ダイアログ (Ctrl+Alt+S) を開き、 に移動して、JSX 属性の追加リストから該当するオプションを選択します。
![JSX 属性の追加 Add for JSX attributes](https://resources.jetbrains.com/help/img/idea/2024.2/ws_react_add_braces.png)
また、波括弧内の JavaScript 式の補完も可能です。これは、定義したすべてのメソッドと関数に適用されます。
![波括弧内の JavaScript 式の完成 Completing JavaScript expressions inside curly braces](https://resources.jetbrains.com/help/img/idea/2024.2/ws_react_javascript_expression.png)
完全な HTML タグとコンポーネント名
RubyMine は、JavaScript や他のコンポーネントのメソッドの内部で定義した HTML タグとコンポーネント名に対してコード補完を提供します。
![HTML タグとコンポーネント名の補完 Completion for HTML tags and component names](https://resources.jetbrains.com/help/img/idea/2024.2/ws_react_component_completion.png)
補完は、ES6 形式の構文を持つインポートされたコンポーネントに対しても機能します。
![ES6 構文でインポートされたコンポーネントの補完 Completion for imported components with ES6 syntax](https://resources.jetbrains.com/help/img/idea/2024.2/ws_react_imported_component_completion.png)
完全なコンポーネントプロパティ
RubyMine は、propTypes
を使用して定義されたコンポーネントプロパティに対してコード補完を提供し、それらの定義を迅速に移動またはプレビューできるように解決します。
![Completion for component properties](https://resources.jetbrains.com/help/img/idea/2024.2/ws_react_component_properties.png)
コンポーネントの名前を自動補完すると、RubyMine は必要なすべてのプロパティを自動的に追加します。必要なプロパティの一部がコンポーネントの使用に欠落している場合、RubyMine はそのことについて警告します。
HTML 属性を JSX に転送する
クラス属性またはイベント時ハンドラーを含む HTML コードをコピーして JSX に貼り付けると、RubyMine はこれらの属性を React 固有のものに自動的に置き換えます。( className
、onClick
、onChange
など)
![Transfer HTML to JSX](https://resources.jetbrains.com/help/img/idea/2024.2/ws_paste_from_html_to_jsx.png)
これは TSX でも機能します。
![Transfer HTML to TSX](https://resources.jetbrains.com/help/img/idea/2024.2/ws_paste_from_html_to_tsx.png)
貼り付けたコードフラグメントに 1 つのタグが含まれている場合、RubyMine はその末尾にスラッシュ /
を自動的に追加します。
![Transfer HTML to JSX: close single tags](https://resources.jetbrains.com/help/img/idea/2024.2/ws_paste_from_html_to_jsx_close_tags.png)
HTML コードをそのまま JSX または TSX にコピーするには、そのまま貼り付け Ctrl+Alt+Shift+V を使用するか、設定ダイアログ (Ctrl+Alt+S) を開き、 の設定ページに移動して、JSX ファイルに貼り付けるときに HTML を変換する (属性を変換し、単一のタグを閉じる) チェックボックスをオフにします。
React コードスニペット
RubyMine には、React フック(英語)などの React アプリでよく使用されるさまざまなステートメントやコードブロックに展開される 50 を超えるコードスニペットのコレクションが付属しています。以下の例は、rcjc 省略形を使用して、新しい React コンポーネントを定義するクラスを作成する方法を示しています。
![Live template for a React component](https://resources.jetbrains.com/help/img/idea/2024.2/ws_react_live_template.png)
スニペットから React コード構成を作成する
必要な省略形をエディターに入力し、Tab を押します。
Ctrl+J を押して、関連するスニペットを選択します。検索を絞り込むには、略語の入力を開始し、補完リストから選択します。
詳細は、ライブテンプレートを参照してください。
使用可能なすべての React スニペットのリストを表示する
設定ダイアログ (Ctrl+Alt+S) で、エディターのライブテンプレートをクリックし、React ノードまたは React hooks ノードを展開します。
JSX の Emmet
RubyMine では、HTML だけでなく、特別な React twists を利用して JSX コードでも Emmet(英語) を使用できます。例: 略語 div.my-class は JSX では <div className=” my-class"></div>
に展開されますが、HTML のように <div class=” my-class"></div>
には展開されません。
![Expand Emmet template in React](https://resources.jetbrains.com/help/img/idea/2024.2/ws_react_emmet.png)
React アプリケーションを移動する
基本的なナビゲーションに加えて、RubyMine は React 固有のコード要素間を移動できます。
波括弧
{}
内のメソッドまたは JavaScript 式の宣言に移動するには、メソッドまたは式を選択して Ctrl+B を押します。コンポーネントの宣言に移動するには、コンポーネント名を選択して Ctrl+B を押します。
コンポーネント定義を表示するには、Ctrl+Shift+I を押します。
コンポーネントの簡単なドキュメントを表示するには、Ctrl+Q を押します。JavaScript ドキュメントの検索の詳細を参照してください。
React アプリケーションをリントする
JavaScript および HTML 用のすべての RubyMine 組み込みコードインスペクションは、JSX コードでも機能します。RubyMine は、未使用の変数や関数、終了タグの欠落、ステートメントの欠落などの場合に警告を発します。
![React アプリケーションの JavaSxript インスペクション JavaSxript inspections in React application](https://resources.jetbrains.com/help/img/idea/2024.2/ws_react_inspection.png)
いくつかのインスペクションのために RubyMine はクイックフィックスを提供します。たとえば、欠落しているメソッドを追加することを提案します。クイックフィックスポップアップを表示するには、Alt+Enter を押します。
インスペクションのリストをカスタマイズするには、設定ダイアログ (Ctrl+Alt+S) を開き、エディター | メニューに移動します。インスペクションを無効にし、重大度レベルを表示したくない、変更したくないインスペクションを無効にします。詳細については、インスペクションの無効化と有効化およびインスペクションの重大度を変更するを参照してください。
ESLint
組み込みコードインスペクションを提供するだけでなく、RubyMine は、JSX コード用の ESLint(英語) などのリンターとも統合します。ESLint は、プラグインで拡張できる幅広い lint ルールをもたらします。RubyMine は、入力時に ESLint によって報告された警告とエラーをエディターに表示します。ESLint を使用すると、JavaScript 標準スタイル(英語)を使用したり、TypeScript コードをリントしたりすることもできます。
詳細は、ESLint を参照してください。
ESLint に React JSX 構文を正しく理解させるには、eslint-plugin-react(英語) が必要です。このプラグインでは、表示名が React コンポーネントに設定されていない場合や、危険な JSX プロパティが使用されている場合など、警告が表示されます。
![React を使用した ESLint: エラーと警告がハイライトされ、問題の説明がツールチップに表示されます。 ESLint with React: errors and warnings are highlighted, the description of a problem is shown in a tooltip.](https://resources.jetbrains.com/help/img/idea/2024.2/ws_eslint_react.png)
React プロジェクトに ESLint をインストールして構成する
組み込みターミナル( )で、次のように入力します。
npm install --save-dev eslint npm install --save-dev eslint-plugin-reactESLint 構成ファイル .eslintrc.* をプロジェクトに追加します。これは、.eslintrc、.eslintrc.json、.eslintrc.yaml ファイル、または別のサポートされている形式のファイルです。詳細については、ESLint 公式 Web サイト(英語)を参照してください。
設定ダイアログ (Ctrl+Alt+S) で、言語 & フレームワーク | JavaScript | コード品質ツール | ESLint に移動し、自動 ESLint 構成を選択します。RubyMine は、プロジェクト node_modules フォルダー内の ESLint を自動的に見つけて、.eslintrc.* ファイルまたは package.json の
eslintConfig
プロパティからのデフォルト構成を使用します。または、手動 ESLint 構成を選択して、カスタム ESLint パッケージと構成を使用します。
詳細は RubyMine での ESLint のアクティブ化と構成を参照してください。
.eslintrc 構造体の例 (react プラグイン付き ESLint 1.x)
ecmaFeatures
オブジェクトに"jsx" = true
を追加します。ここでは、ES6 クラスやモジュールなど、使用したい追加の言語機能を指定することもできます。plugins
オブジェクトに、react
を追加します。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
プラグイン構成の詳細を学びましょう。
React アプリケーションでのコードリファクタリング
一般的な RubyMine リファクタリングに加えて、React アプリケーションでは、React コンポーネントに対して名前変更を実行し、コンポーネントの抽出を使用して新しいコンポーネントを作成することもできます。
コンポーネントの名前を変更する
以下は、1 つのファイルで定義されて使用されるコンポーネントの名前を変更する例です。
![Rename component used in one file](https://resources.jetbrains.com/help/img/idea/2024.2/ws_react_rename_component.png)
同じ方法で、1 つのファイルで定義されたコンポーネントの名前を変更し、名前付きエクスポートを使用して別のファイルにインポートすることもできます。
![Rename a component defined in another file and imported through a named import](https://resources.jetbrains.com/help/img/idea/2024.2/ws_react_rename_component_from_another_file.png)
コンポーネント名の中にキャレットを置き、Shift+F6 を押すか、メインメニューから、コンテキストメニューから
を選択します。React の命名規則(英語)に準拠した新しいコンポーネント名を指定します。
状態値の名前を変更する
状態値の名前を変更すると、RubyMine は、対応する setter(React useState フック(英語)でこの状態値を更新する関数)の名前を変更することを提案します。
![Renaming a state value and the corresponding setter](https://resources.jetbrains.com/help/img/idea/2024.2/ws_react_rename_state.png)
状態値の名前の中にキャレットを置き、Shift+F6 を押すか、コンテキストメニューからのメインメニューから
を選択します。新しい値の名前を指定して、Enter を押します。フォーカスは setter に移動し、そこで値の新しい名前が提案されます。Enter を押して、提案を受け入れます。
コンポーネントを抽出する
既存のコンポーネントの render メソッドから JSX コードを抽出することで、新しい React コンポーネントを作成できます。新しいコンポーネントは関数またはクラスとして定義できます。React 公式 Web サイトの関数とクラスのコンポーネント(英語)を参照してください。
![Extract a React component](https://resources.jetbrains.com/help/img/idea/2024.2/ws_react_extract_functional_component.png)
抽出するコードを選択し、コンテキストメニューから
を選択します。あるいは、メインメニューでコンポーネントの抽出を選択します。
に移動するか、Ctrl+Alt+Shift+T を押してポップアップから開いたダイアログで、新しいコンポーネントの名前とそのタイプを指定します。デフォルトでは、機能コンポーネントが作成されます。新しいコンポーネントをクラスとして定義する場合は、クラスを選択します。
OK をクリックします。新しいコンポーネントは、既存のコンポーネントの隣に定義され、そこで使用されます。
オプション : シンボルの移動リファクタリングを使用して、新しいコンポーネントと必要なすべてのインポートを別のファイルに移動します。
オプション : RubyMine が新しいコンポーネントに使用するコードテンプレートを変更します。設定ダイアログ (Ctrl+Alt+S) で、 に移動し、コードタブを開き、必要に応じて Apache Velocity テンプレート言語(英語)を使用してテンプレートを更新します。
関数をクラスコンポーネントに変換する
クラスコンポーネントに変換リファクタリングを使用すると、RubyMine は変換する関数の名前を持つ ES6 クラスを生成します。このクラスは React .Component
を拡張し、関数本体が移動される render()
メソッドを含みます。React オフィシャル Web サイト(英語)の詳細を参照してください。
![Convert a function to a class component](https://resources.jetbrains.com/help/img/idea/2024.2/ws_react_convert_to_class_component.png)
変換するキャレットを関数内の任意の場所に置き、メインメニューまたはコンテキストメニューから
を選択します。または、Ctrl+Alt+Shift+T を押して、ポップアップからクラスコンポーネントに変換を選択します。
クラスを機能コンポーネントに変換する
関数コンポーネントに変換リファクタリングを使用すると、RubyMine は変換するクラスの名前で関数を生成し、render()
メソッドの内容を関数本体に移動します。
![Convert a class to a functional component](https://resources.jetbrains.com/help/img/idea/2024.2/ws_react_convert_to_functional_component.png)
変換するクラス内の任意の場所にキャレットを置き、メインメニューまたはコンテキストメニューから
を選択します。または、Ctrl+Alt+Shift+T を押して、ポップアップから関数コンポーネントに変換を選択します。
React アプリケーションでの分割代入
構造化を使用すると、配列やオブジェクトの値を変数に簡単に展開できます。この機能には非常に簡潔な構文があり、アプリケーションでデータを渡す必要があるときによく使用されます。
React クラスコンポーネントを使用する場合は、オブジェクト / 配列の分割代入を導入するインテンションアクションの使用を検討してください。JavaScript での構造化の詳細を参照してください。
![Destructuring with intention action: Introduce object destructuring in a React class](https://resources.jetbrains.com/help/img/idea/2024.2/ws_js_destructuring_react_class_706.png)
React アプリケーションを実行する
package.json の
start
スクリプトの横にあるガターでをクリックするか、ターミナル Alt+F12 で
npm run start
を実行するか、npm ツールウィンドウ ( ) でstart
タスクをダブルクリックします。アプリケーションがコンパイルされ、開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。アプリケーションが create-react-app で生成された場合、デフォルトの URL は http://localhost:3000/ です。このリンクをクリックすると、アプリケーションが表示されます。
実行 / デバッグ構成を介して React アプリケーションを実行する
上記のように、RubyMine 新規プロジェクトウィザードで create-react-app
を使用して作成されたアプリケーションの場合、RubyMine は、デフォルト名 npm start で npm 構成を生成します。この構成は、開発サーバーを起動し、開発モードでアプリケーションを起動する react-scripts start
コマンドを実行します。
それ以外の場合は、ホスト、ポートなどの実際の設定を手動で実行 / デバッグ構成を作成するする必要があります。
npm 実行 / デバッグ構成を作成する
実行ウィジェットから実行構成の編集を選択します。
に移動します。または、ツールバーの開いた実行構成の編集ダイアログで、ツールバーの追加ボタン (
) をクリックし、リストから npm を選択します。
開いた実行 / デバッグ構成: npm ダイアログの構成タブで、使用する package.json の場所、Node.js インタープリター、およびパッケージマネージャーを指定します。
コマンドフィールドで、リストから実行を選択し、次にスクリプトリストから実行するスクリプトを選択します。ほとんどの場合、デフォルトの
start
スクリプトになりますが、カスタムポートでアプリケーションを実行するなど、package.json で別のスクリプトを構成することもできます。オプション:
ブラウザーでアプリケーションを開くには、次のように構成を更新します。ブラウザー / Live Edit タブで、起動後チェックボックスをオンにし、アプリケーションを開くブラウザーを選択して、アプリケーションが実行される URL アドレスを指定します。
アプリケーションをデバッグする場合は、Google Chrome(英語) または別の Chromium ベースのブラウザー(英語)を選択します。
アプリケーションの実行
ツールバーのリストから npm start run 構成を選択し、その横にある
をクリックします。
アプリケーションがコンパイルされ、開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。このリンクをクリックすると、アプリケーションが表示されます。
または、上記のように、 RubyMine が起動時にアプリケーションを開くようにします。
React アプリケーションをデバッグする
デバッグセッションは、実行 / デバッグ構成を起動するから開始することも、開発モードでアプリケーションが実行されている URL を表示する実行ツールウィンドウから開始することもできます。
実行 / デバッグ構成を介してデバッグを開始する
React アプリケーションをデバッグするには、2 つの実行 / デバッグ構成が必要です。
上記のように、開発モードでアプリケーションを起動するための npm 構成。
開発モードで実行されているアプリケーションにデバッガーを接続するための JavaScript デバッグ構成。
npm 実行 / デバッグ構成を使用して React アプリケーションを実行およびデバッグするに従って、npm 構成内に JavaScript デバッグ構成を作成して、一度に起動することができます。
または、JavaScript デバッグ実行 / デバッグ構成でデバッグを開始するに従って、npm と JavaScript デバッグの実行 / デバッグ構成を個別に作成して起動します。
単一の npm 実行 / デバッグ構成で React アプリケーションを実行およびデバッグする
コードにブレークポイントを設定します。
上記の説明に従って npm 構成を作成します。
create-react-app
を使用してアプリケーションを生成した場合、RubyMine は npm start というデフォルト名の npm 構成をすでに作成しています。この構成は、実行ウィジェットおよび実行 / デバッグ構成ダイアログから利用できます。開いた実行 / デバッグ構成: npm ダイアログの構成タブで、使用する package.json の場所、Node.js インタープリター、およびパッケージマネージャーを指定します。
コマンドフィールドで、リストから実行を選択し、次にスクリプトリストから実行するスクリプトを選択します。ほとんどの場合、デフォルトの
start
スクリプトになりますが、カスタムポートでアプリケーションを実行するなど、package.json で別のスクリプトを構成することもできます。ブラウザー / Live Edit タブで、起動後チェックボックスを選択し、リストから Google Chrome(英語) または別の Chromium ベースのブラウザー(英語)を選択し、JavaScript デバッガーを使用するチェックボックスを選択して、アプリケーションを実行する URL を指定します。
実行をクリックします。
構成を再実行するには、実行ウィジェットのリストから構成を選択し、その横にある
をクリックします。
RubyMine はアプリケーションを開発モードで実行し、同時にデバッグセッションを起動します。
最初のブレークポイントに到達したら、デバッグツールウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断したときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示します。
JavaScript デバッグ実行 / デバッグ構成でデバッグを開始する
コードにブレークポイントを設定します。
上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。この URL をコピーして、後で JavaScript デバッグ構成で指定します。
JavaScript デバッグ構成を作成します。これを行うには、メインメニューの に移動し、
をクリックして、リストから JavaScript デバッグを選択します。
開いた実行 / デバッグ構成: JavaScript デバッグダイアログで、構成の名前と、開発モードでアプリケーションが実行されている URL アドレスを指定します。この URL は、上記のように、実行ツールウィンドウまたはターミナルにコピーできます。
デバッグをクリックします。
構成を再実行するには、実行ウィジェットのリストから構成を選択し、その横にある
をクリックします。
最初のブレークポイントに到達したら、デバッグツールウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断したときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示します。
実行ツールウィンドウまたは組み込みのターミナルからデバッグを開始する
アプリケーションが localhost
の開発モードで実行されている場合、特に create-react-app
で生成された場合は、> 実行ツールウィンドウまたは組み込みのターミナルから直接デバッグセッションを開始できます。
コードにブレークポイントを設定します。
上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。Ctrl+Shift を押したまま、この URL リンクをクリックします。RubyMine は、タイプ JavaScript デバッグの自動生成された 構成でデバッグセッションを開始します。
最初のブレークポイントに到達したら、デバッグツールウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断したときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示します。
React アプリケーションを構築する
既存の RubyMine プロジェクトに React をインストールした場合は、ビルドプロセスを設定する必要があります。React オフィシャル Web サイト(英語)から React アプリケーションのビルドパイプラインを構成するさまざまな方法について説明します。
React アプリケーションをテストする
React アプリケーション create-react-app で作成で Jest テスト(英語)を実行およびデバッグできます。始める前に、react-scripts パッケージが package.json の依存関係オブジェクトに追加されていることを確認してください。
Jest テストは、エディター、プロジェクトツールウィンドウ、または実行 / デバッグ構成から直接実行およびデバッグできます。詳細については、「Jest」を参照してください。
エディターからテストを実行する
ガターで
または
をクリックし、リストから実行 <テスト名> を選択します。
ガターのテストステータスアイコン
および
により、エディターでテストが成功したか失敗したかを確認することもできます。
Jest 実行 / デバッグ構成を作成する
実行 / デバッグ構成ダイアログ (メインメニューの ) を開き、左側のペインで
をクリックし、リストから Jest を選択します。「実行 / デバッグ構成: Jest」ダイアログが開きます。
使用するノードインタープリターとアプリケーションの作業ディレクトリを指定します。デフォルトでは、作業ディレクトリフィールドにはプロジェクトのルートフォルダーが表示されます。この定義済みの設定を変更するには、目的のフォルダーへのパスを指定します。
Jest パッケージフィールドに、react-scripts パッケージへのパスを指定します。
Jest オプションフィールドに
--env=jsdom
と入力します。
テストの実行
構成のリストから Jest 実行 / デバッグ構成を選択し、リストまたはツールバーの
をクリックします。
実行ツールウィンドウのテストランナータブで、テストの実行を監視し、テスト結果を分析します。詳細については、テスト結果を調べるを参照してください。
デバッグテスト
メインツールバーのリストから Jest 実行 / デバッグ構成を選択し、右側の
をクリックします。
開いたデバッグツールウィンドウで、通常どおりに続行します。テストを実行、停止して再開テストの実行、中断時にテストを確認、コンソールで JavaScript コードスニペットを実行するなど。
既知の制限
デバッグセッション中にアプリケーションを初めて開くと、ページの読み込み時に実行されるコード内のブレークポイントの一部にヒットしない場合があります。その理由は、元のソースコードのブレークポイントで停止するには、RubyMine がブラウザーからソースマップを取得する必要があるためです。ただし、ブラウザーがこれらのソースマップを渡すことができるのは、ページが少なくとも 1 回完全にロードされた後でのみです。回避策として、ブラウザーでページを自分で再ロードします。
プロジェクト内で複数のフレームワークを使用する
場合によっては、1 つの React プロジェクト内で他のフレームワークを使用する必要があることがあります。
各ファイルでコンテキスト認識コーディング支援を受けるには、構成ファイル .ws-context
を作成し、各ファイルまたはフォルダーで使用するフレームワークを指定します。このファイルの設定は、デフォルトの構成を上書きします。
プロジェクトルートで、コンテキストメニューから新規 | ファイルを選択し、ファイル名として
.ws-context
を指定します。.ws-context
では、次の 2 種類のプロパティを使用します。コンテキスト値文字列を持つ
<context-name>
コンテキスト詳細オブジェクトを持つ GLOB パターン
次のコンテキスト値を使用します。
framework
:vue
、angular
、react
、svelte
、astro
angular-template-syntax
:V_2
,V_17
nextjs-project
:nextjs
astro-project
:astro
vue-store
:vuex
,pinia
vue-class-component-library
:vue-class-component
、vue -property-decorator
、vue-facing-decorator
jsdoc-dialect
:jsdoc-typescript
,jsdoc-closure
簡単にするためにパスのネストを使用します。
GLOB パスの最後のセグメントはファイル名パターンであり、
*
ワイルドカードのみがサポートされます。最後のセグメントが
**
の場合、ネストされたすべてのディレクトリとファイルと一致します。最上位レベルのコンテキストプロパティには
/**
パターンが必要です。
複数のパターンが同じファイル名に一致する場合、曖昧さを解消するために次のルールが使用されます。
**
セグメントを除いて、パスセグメント数が最大となるパターンを選択します。純粋なファイル名パターンであるパターンを選択します。つまり、
**
または/
で終わらないパターンを選択します。最初に定義されたパターンを選択します。
サンプル
さまざまなフォルダーで使用されている多数のフレームワークを含むプロジェクトがあるとします。
![異なるフレームワークを持つプロジェクト A project with different frameworks](https://resources.jetbrains.com/help/img/idea/2024.2/several_frameworks_context_project_structure.png)
プロジェクト内の各ファイルに対してコンテキスト認識型の支援を受けるには、次のコードを .ws-context
に追加します。
関連ページ:
![](https://resources.jetbrains.com/help/img/idea/2024.2/rm_plugins_settings.png)
プラグインのインストール
プラグインは RubyMine のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケッ...
![](https://resources.jetbrains.com/help/img/idea/2024.2/py_share_project_on_github.png)
GitHub でホストされているプロジェクトを管理する
プロジェクトをチェックアウトする (クローン):RubyMine から直接貢献したいリポジトリのクローンを作成し、それに基づいて新しいプロジェクトを作成できます。メインメニューで、に移動します。Git メニューが使用できない場合は、を選択します。バージョン管理から取得ダイアログで、左側の GitHub を選択します。次のいずれかを実行して、GitHub にログインします。トークンがある場合は、トークンを使用するをクリックし、トークンをトークンフィールドに貼り付けて、ログインをクリックします。それ以外の...
![](https://resources.jetbrains.com/help/img/idea/2024.2/ws_package_manager_configuration_select_package_manager.png)
npm、pnpm、Yarn
RubyMine は npm、pnpm、Yarn、Yarn 2、Yarn 3 と統合されているため、組み込みのターミナルで、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。RubyMine では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。RubyMine は、package.json ファイルを解析してスクリプトの定義を認識し、スクリプトをツリービューに表示して、ツリー内のスクリプトと package.json ファイル内のその定...
![](https://resources.jetbrains.com/help/img/idea/2024.2/rm_untrusted_project_first_open.png)
プロジェクトのセキュリティ
Ruby/Rails プロジェクトを開くと、RubyMine は、プロジェクトからの有害なコードを含む可能性のある gem 実行可能ファイルを実行します。潜在的なセキュリティリスクを防ぐために、RubyMine では、プロジェクトのソースを認識しない場合にプロジェクトを開く方法を決定できます。Ruby/Rails プロジェクトのセキュリティ:プロジェクトを初めて開くたびに、IDE にプロジェクトを信頼ダイアログが表示されます。これは、プロジェクトが次のアクションを安全に実行できることを確認でき...
![](https://resources.jetbrains.com/help/img/idea/2024.2/rm_completion_basic_2.png)
コード補完
このセクションでは、コーディングプロセスのスピードアップを可能にするコンテキスト対応コード補完のさまざまなテクニックについて説明します。基本補完:基本コード補完は、可視性スコープ内のクラス、メソッド、キーワードの名前を完成させるのに役立ちます。コード補完を呼び出すと、RubyMine はコンテキストを分析し、現在のキャレット位置から到達可能な選択肢を提案します (提案にはライブテンプレートも含まれます)。基本補完を呼び出す名前の入力を開始します。を押すか、メインメニューからを選択してください。...
![](https://resources.jetbrains.com/help/img/idea/2024.2/rm_live_templates_save_as_dialog.png)
ライブテンプレート
ライブテンプレート(またはコードスニペット)を使用すると、頻繁に使用する構造をコードに挿入できます。これらには、条件、ブロック、ループなどがあります。例: 以下のアニメーションは、事前定義されたの省略形を使用してブロックをすばやく挿入する方法を示しています。RubyMine は、Ruby、Rails、RSpec、JavaScript などを含む、さまざまな言語およびフレームワーク用の多数の事前定義済みテンプレートを提供します。必要に応じて、事前定義されたテンプレートをカスタマイズしたり、新しいテ...