React
React は、カプセル化されたコンポーネントから複雑なインタラクティブユーザーインターフェースを構築するための JavaScript ライブラリです。React オフィシャル Web サイト(英語)からライブラリの詳細を参照してください。
CLion は、React と統合され、lint の設定、編集、実行、デバッグ、アプリケーションの保守を支援します。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
設定 | プラグインページのインストール済みタブで、JavaScript と TypeScript および JavaScript デバッガーに必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。
新しい React アプリケーションを作成する
新しい React シングルページアプリケーションの構築を開始するための推奨される方法は、create-react-app(英語) パッケージです。これは、CLion が npx(英語) を使用してダウンロードして実行します。その結果、開発環境は webpack、Babel、ESLint、その他のツールを使用するように事前構成されています。
もちろん、Create React App を自分でダウンロードすることも、空の CLion プロジェクトを作成して 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 プロジェクトの作成チェックボックスを選択します。CLion は、アプリケーション用の .tsx ファイルと tsconfig.json 構成ファイルを生成します。
作成をクリックすると、CLion は、必要なすべての構成ファイルを含む React -specific プロジェクトを生成し、必要な依存関係をダウンロードします。CLion は、アプリケーションを実行またはデバッグするためのデフォルト設定で、npm スタートおよび JavaScript デバッグ構成も作成します。
空の CLion プロジェクトに React をインストールする
この場合、以下の React アプリケーションの構築の説明に従ってビルドパイプラインを自分で設定する必要があります。React オフィシャル Web サイト(英語)からプロジェクトに React を追加する方法の詳細を参照してください。
空の CLion プロジェクトを作成する
ウェルカム画面で新規プロジェクトの作成をクリックするか、メインメニューから を選択します。新しいプロジェクトダイアログが開きます。
左側のペインで、空のプロジェクトを選択します。右側のウィンドウで、アプリケーションフォルダーを指定し、作成をクリックします。
空のプロジェクトに React をインストールする
React を使用する空のプロジェクトを開きます。
埋め込まれたターミナル(Alt+F12)で、次のように入力します。
npm install --save react react-dom
既存の React アプリケーションから始めます
既存の React アプリケーションの開発を継続するには、CLion で開き、必要な依存関係をダウンロードします。
すでにマシン上にあるアプリケーションソースを開く
ウェルカム画面で開くをクリックするか、メインメニューから を選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。
バージョン管理からアプリケーションのソースをチェックアウト
ウェルカム画面で VCS から取得をクリックします。
あるいは、メインメニューから
、 、 を選択します。メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce。
表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。
依存関係をダウンロードする
ポップアップで 'npm install' の実行または実行 'yarn install' をクリックします。
npm(英語)、Yarn 1(英語)、または Yarn 2(英語) を使用できます。詳細については、npm および Yarn を参照してください。
あるいは、エディターまたはプロジェクトツールウィンドウの package.json のコンテキストメニューから 'npm install' の実行または実行 'yarn install' を選択します。
プロジェクトのセキュリティ
CLion の外部で作成され、そこにインポートされたプロジェクトを開くと、CLion は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。
![信頼できないプロジェクトの警告 Untrusted project warning](https://resources.jetbrains.com/help/img/idea/2023.3/ws_webpack_project_security_warning.png)
次のいずれかのオプションを選択します。
セーフモードでプレビュー : この場合、CLion はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。
CLion はエディター領域の上部に通知を表示し、プロジェクトを信頼リンクをクリックして、いつでもプロジェクトをロードできます。
プロジェクトを信頼 : この場合、CLion はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての CLion 機能が使用可能になることを意味します。
開かない : この場合、CLion はプロジェクトを開きません。
プロジェクトのセキュリティの詳細を参照してください。
コード補完
CLion は、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/2023.3/ws_react_completion_methods_and_attributes.png)
JSX タグでは、CLion は className
や classID
などの React 固有の属性(英語)、および key
や ref
などの非 DOM 属性(英語)のコーディング支援を提供します。さらに、自動補完は、プロジェクトの CSS ファイルで定義されているクラスの名前に対しても機能します。
![CSS クラス名の完成 Completion for CSS class names](https://resources.jetbrains.com/help/img/idea/2023.3/ws_react_classname.png)
onClick
や onChange
などのすべての React イベント(英語)は、波括弧 ={}
または引用符 ""
と一緒に自動的に補完することもできます。
![Complete React events](https://resources.jetbrains.com/help/img/idea/2023.3/ws_react_events.png)
デフォルトでは、波括弧が挿入されます。CLion で常に引用符を追加することも、TypeScript 定義ファイル (d.ts)(英語) の型に基づいて引用符または中括弧のどちらかを選択することもできます。デフォルト設定を変更するには、設定ダイアログ (Ctrl+Alt+S) を開き、 に移動して、JSX 属性の追加リストから該当するオプションを選択します。
![JSX 属性の追加 Add for JSX attributes](https://resources.jetbrains.com/help/img/idea/2023.3/ws_react_add_braces.png)
また、波括弧内の JavaScript 式の補完も可能です。これは、定義したすべてのメソッドと関数に適用されます。
![波括弧内の JavaScript 式の完成 Completing JavaScript expressions inside curly braces](https://resources.jetbrains.com/help/img/idea/2023.3/ws_react_javascript_expression.png)
完全な HTML タグとコンポーネント名
CLion は、JavaScript や他のコンポーネントのメソッドの内部で定義した HTML タグとコンポーネント名に対してコード補完を提供します。
![HTML タグとコンポーネント名の補完 Completion for HTML tags and component names](https://resources.jetbrains.com/help/img/idea/2023.3/ws_react_component_completion.png)
補完は、ES6 形式の構文を持つインポートされたコンポーネントに対しても機能します。
![ES6 構文でインポートされたコンポーネントの補完 Completion for imported components with ES6 syntax](https://resources.jetbrains.com/help/img/idea/2023.3/ws_react_imported_component_completion.png)
完全なコンポーネントプロパティ
CLion は、propTypes
を使用して定義されたコンポーネントプロパティに対してコード補完を提供し、それらの定義を迅速に移動またはプレビューできるように解決します。
![Completion for component properties](https://resources.jetbrains.com/help/img/idea/2023.3/ws_react_component_properties.png)
コンポーネントの名前を自動補完すると、CLion は必要なすべてのプロパティを自動的に追加します。必要なプロパティの一部がコンポーネントの使用に欠落している場合、CLion はそのことについて警告します。
HTML 属性を JSX に転送する
クラス属性またはイベント時ハンドラーを含む HTML コードをコピーして JSX に貼り付けると、CLion はこれらの属性を React 固有のものに自動的に置き換えます。( className
、onClick
、onChange
など)
![Transfer HTML to JSX](https://resources.jetbrains.com/help/img/idea/2023.3/ws_paste_from_html_to_jsx.png)
これは TSX でも機能します。
![Transfer HTML to TSX](https://resources.jetbrains.com/help/img/idea/2023.3/ws_paste_from_html_to_tsx.png)
貼り付けたコードフラグメントに 1 つのタグが含まれている場合、CLion はその末尾にスラッシュ /
を自動的に追加します。
![Transfer HTML to JSX: close single tags](https://resources.jetbrains.com/help/img/idea/2023.3/ws_paste_from_html_to_jsx_close_tags.png)
HTML コードをそのまま JSX または TSX にコピーするには、そのまま貼り付け Ctrl+Alt+Shift+V を使用するか、設定ダイアログ (Ctrl+Alt+S) を開き、 の設定ページに移動して、JSX ファイルに貼り付けるときに HTML を変換する (属性を変換し、単一のタグを閉じる) チェックボックスをオフにします。
React コードスニペット
CLion には、React フック(英語)などの React アプリでよく使用されるさまざまなステートメントやコードブロックに展開される 50 を超えるコードスニペットのコレクションが付属しています。以下の例は、rcjc 省略形を使用して、新しい React コンポーネントを定義するクラスを作成する方法を示しています。
![Live template for a React component](https://resources.jetbrains.com/help/img/idea/2023.3/ws_react_live_template.png)
スニペットから React コード構成を作成する
必要な省略形をエディターに入力し、Tab を押します。
Ctrl+J を押して、関連するスニペットを選択します。検索を絞り込むには、略語の入力を開始し、補完リストから選択します。
詳細は、ライブテンプレートを参照してください。
使用可能なすべての React スニペットのリストを表示する
設定ダイアログ (Ctrl+Alt+S) で、エディターのライブテンプレートをクリックし、React ノードまたは React hooks ノードを展開します。
JSX の Emmet
CLion では、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/2023.3/ws_react_emmet.png)
React アプリケーションを移動する
基本的なナビゲーションに加えて、CLion は React 固有のコード要素間を移動できます。
波括弧
{}
内のメソッドまたは JavaScript 式の宣言に移動するには、メソッドまたは式を選択して Ctrl+B を押します。コンポーネントの宣言に移動するには、コンポーネント名を選択して Ctrl+B を押します。
コンポーネント定義を表示するには、Ctrl+Shift+I を押します。定義と型定義の詳細を参照してください。
コンポーネントの簡単なドキュメントを表示するには、Ctrl+Q を押します。JavaScript ドキュメントの検索の詳細を参照してください。
React アプリケーションをリントする
JavaScript および HTML 用のすべての CLion 組み込みコードインスペクションは、JSX コードでも機能します。CLion は、未使用の変数や関数、終了タグの欠落、ステートメントの欠落などの場合に警告を発します。
![React アプリケーションの JavaSxript インスペクション JavaSxript inspections in React application](https://resources.jetbrains.com/help/img/idea/2023.3/ws_react_inspection.png)
いくつかのインスペクションのために CLion はクイックフィックスを提供します。たとえば、欠落しているメソッドを追加することを提案します。クイックフィックスポップアップを表示するには、Alt+Enter を押します。
インスペクションのリストをカスタマイズするには、設定ダイアログ (Ctrl+Alt+S) を開き、エディター | メニューに移動します。インスペクションを無効にし、重大度レベルを表示したくない、変更したくないインスペクションを無効にします。詳細については、インスペクションの有効化 / 無効化および抑制およびインスペクションの重大度を参照してください。
ESLint
組み込みコードインスペクションを提供するだけでなく、CLion は、JSX コード用の ESLint(英語) などのリンターとも統合します。ESLint は、プラグインで拡張できる幅広い lint ルールをもたらします。CLion は、入力時に 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/2023.3/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 構成を選択します。CLion は、プロジェクト node_modules フォルダー内の ESLint を自動的に見つけて、.eslintrc.* ファイルまたは package.json の
eslintConfig
プロパティからのデフォルト構成を使用します。または、手動 ESLint 構成を選択して、カスタム ESLint パッケージと構成を使用します。
詳細は CLion での 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 アプリケーションでのコードリファクタリング
一般的な CLion リファクタリングに加えて、React アプリケーションでは、React コンポーネントに対して名前変更を実行し、コンポーネントの抽出を使用して新しいコンポーネントを作成することもできます。
コンポーネントの名前を変更する
以下は、1 つのファイルで定義されて使用されるコンポーネントの名前を変更する例です。
![Rename component used in one file](https://resources.jetbrains.com/help/img/idea/2023.3/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/2023.3/ws_react_rename_component_from_another_file.png)
コンポーネント名の中にキャレットを置き、Shift+F6 を押すか、メインメニューから、コンテキストメニューから
を選択します。React の命名規則(英語)に準拠した新しいコンポーネント名を指定します。
状態値の名前を変更する
状態値の名前を変更すると、CLion は、対応する setter(React useState フック(英語)でこの状態値を更新する関数)の名前を変更することを提案します。
![Renaming a state value and the corresponding setter](https://resources.jetbrains.com/help/img/idea/2023.3/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/2023.3/ws_react_extract_functional_component.png)
抽出するコードを選択し、コンテキストメニューから
を選択します。あるいは、メインメニューでコンポーネントの抽出を選択します。
に移動するか、Ctrl+Alt+Shift+T を押してポップアップから開いたダイアログで、新しいコンポーネントの名前とそのタイプを指定します。デフォルトでは、機能コンポーネントが作成されます。新しいコンポーネントをクラスとして定義する場合は、クラスを選択します。
OK をクリックします。新しいコンポーネントは、既存のコンポーネントの隣に定義され、そこで使用されます。
オプション : シンボルの移動リファクタリングを使用して、新しいコンポーネントと必要なすべてのインポートを別のファイルに移動します。
オプション : CLion が新しいコンポーネントに使用するコードテンプレートを変更します。設定ダイアログ (Ctrl+Alt+S) で、 に移動し、コードタブを開き、必要に応じて Apache Velocity テンプレート言語(英語)を使用してテンプレートを更新します。
関数をクラスコンポーネントに変換する
クラスコンポーネントに変換リファクタリングを使用すると、CLion は変換する関数の名前を持つ ES6 クラスを生成します。このクラスは React .Component
を拡張し、関数本体が移動される render()
メソッドを含みます。React オフィシャル Web サイト(英語)の詳細を参照してください。
![Convert a function to a class component](https://resources.jetbrains.com/help/img/idea/2023.3/ws_react_convert_to_class_component.png)
変換するキャレットを関数内の任意の場所に置き、メインメニューまたはコンテキストメニューから
を選択します。または、Ctrl+Alt+Shift+T を押して、ポップアップからクラスコンポーネントに変換を選択します。
クラスを機能コンポーネントに変換する
関数コンポーネントに変換リファクタリングを使用すると、CLion は変換するクラスの名前で関数を生成し、render()
メソッドの内容を関数本体に移動します。
![Convert a class to a functional component](https://resources.jetbrains.com/help/img/idea/2023.3/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/2023.3/ws_js_destructuring_react_class_706.png)
React アプリケーションを実行してデバッグする
新しい React シングルページアプリケーションの構築を開始するための推奨される方法は、React アプリケーションを作成(英語)します。この場合のみ、開発環境は webpack および Babel を使用するように事前構成されています。それ以外の場合は、最初にビルドパイプラインを構成する必要があります。
前述のように、CLion 新しいプロジェクトウィザードの「React アプリの作成」で作成されたアプリケーションの場合、CLion はデフォルト設定で 2 つの実行 / デバッグ構成を生成します。
デフォルト名 npm start の npm 構成。この構成は、開発サーバーを起動し、アプリケーションを開発モードで起動する
npm start
コマンドを実行します。デフォルト名アプリケーションのデバッグの JavaScript デバッグ構成。この設定はデバッグセッションを開始します。
Create React App を使用せずにアプリケーションを作成した場合は、ホスト、ポートなどの実際の設定を使用して npm および JavaScript デバッグ実行 / デバッグ構成を手動で作成する必要があります。
React アプリケーションを実行する
ツールバーのリストから npm start run 構成を選択し、リストの横にある
をクリックします。
または、ターミナル Alt+F12 で
npm start
を実行するか、npm ツールウィンドウ( )でstart
タスクをダブルクリックします。アプリケーションがコンパイルされ、Webpack 開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。デフォルトでは http://localhost:3000/ です。このリンクをクリックして、アプリケーションを表示します。
React アプリケーションをデバッグする
コードにブレークポイントを設定します。
上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。
リストから自動生成されたアプリケーションのデバッグ構成を選択し、リストの横にある
をクリックします。
アプリケーションが実行されている場所に応じて、さまざまな方法でデバッグセッションを開始できます。
アプリケーションが
localhost
で実行されている場合は、組み込みのターミナルまたは実行ツールウィンドウからデバッガーを起動することもできます。以下の localhost で実行されているアプリケーションをデバッグするを参照してください。カスタム URL で実行されているアプリケーションをデバッグするには、JavaScript デバッグタイプの構成を作成し、アプリケーションが実際に実行されている URL アドレスを指定します。以下のカスタム URL で実行されているアプリケーションをデバッグするを参照してください。この一般的なワークフローは、
localhost
で実行されているアプリケーションやcreate-react-app
で作成されたアプリケーションにも機能します。
localhost で実行されているアプリケーションをデバッグする
コードにブレークポイントを設定します。
上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて Webpack 開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。デフォルトでは http://localhost:3000/ です。Ctrl+Shift を押したまま、この URL リンクをクリックします。CLion は、タイプ JavaScript デバッグの自動生成されたアプリケーションのデバッグ構成でデバッグセッションを開始します。
カスタム URL で実行されているアプリケーションをデバッグする
コードにブレークポイントを設定します。
上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて Webpack 開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。この URL アドレスをコピーします。後でデバッグ構成で指定します。アプリケーションを表示するには、リンクをクリックしてください。
JavaScript デバッグ構成を作成します。これを行うには、メインメニューの に移動し、
をクリックして、リストから JavaScript デバッグを選択します。実行 / デバッグ構成: JavaScript デバッグダイアログで、保存した URL を URL フィールドに貼り付け、構成を保存します。
新しく作成した構成を起動するには、構成のリストから構成を選択し、リストの横にある
をクリックします。
最初のブレークポイントに到達したら、デバッグツールウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断したときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示します。
React アプリケーションを構築する
既存の CLion プロジェクトに 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 コードスニペットを実行するなど。
既知の制限
デバッグセッション中にアプリケーションを初めて開くと、ページの読み込み時に実行されるコード内のブレークポイントの一部にヒットしない場合があります。その理由は、元のソースコードのブレークポイントで停止するには、CLion がブラウザーからソースマップを取得する必要があるためです。ただし、ブラウザーがこれらのソースマップを渡すことができるのは、ページが少なくとも 1 回完全にロードされた後でのみです。回避策として、ブラウザーでページを自分で再ロードします。
関連ページ:
![](https://resources.jetbrains.com/help/img/idea/2023.3/cl_plugins_settings.png)
プラグイン
プラグインは CLion のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、CLion には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にすることはできます...
![](https://resources.jetbrains.com/help/img/idea/2023.3/py_share_project_on_github.png)
GitHub でホストされているプロジェクトを管理する
プロジェクトをチェックアウトする (クローン):CLion から直接貢献したいリポジトリのクローンを作成し、それに基づいて新しいプロジェクトを作成できます。メインメニューで、に移動します。Git メニューが使用できない場合は、を選択します。バージョン管理から取得ダイアログで、左側の GitHub を選択します。次のいずれかを実行して、GitHub にログインします。トークンがある場合は、トークンを使用するをクリックし、トークンをトークンフィールドに貼り付けて、ログインをクリックします。それ以外の場合は...
![](https://resources.jetbrains.com/help/img/idea/2023.3/ws_package_manager_configuration_select_package_manager.png)
npm、pnpm、Yarn
CLion は npm、pnpm、Yarn、Yarn 2、Yarn 3 と統合されているため、組み込みのターミナルで、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。CLion では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。CLion は、package.json ファイルを解析してスクリプトの定義を認識し、スクリプトをツリービューに表示して、ツリー内のスクリプトと package.json ファイル内のその定義の間を移動できる...
![](https://resources.jetbrains.com/help/img/idea/2023.3/cl_trust_cmake_prj_dialog.png)
プロジェクトのセキュリティ
潜在的なセキュリティリスクを防ぐために、CLion では、プロジェクトのソースがわからない場合にプロジェクトを開く方法を決定できます。CLion は、オープニングプロセス中に実行されるタスクまたは構成について警告し、信頼できるソースを構成できるようにします。不明なソースからプロジェクトを開く:CMake、Makefile、Gradle プロジェクトを開くと、CLion はロードプロセス中にビルドスクリプトを実行します。これらのビルドスクリプトには、任意の(潜在的に危険な)コードを含めることができ...
![](https://resources.jetbrains.com/help/img/idea/2023.3/cl_completion_basic.png)
コード補完
このセクションでは、コーディングプロセスのスピードアップを可能にするコンテキスト対応コード補完のさまざまなテクニックについて説明します。基本補完:基本コード補完は、可視性スコープ内で名前、タイプ、キーワードを完成させるのに役立ちます。コード補完を呼び出すと、CLion はコンテキストを分析し、現在のキャレット位置から到達可能な選択肢を提案します (提案にはライブテンプレートも含まれます)。基本コード補完がフィールド、パラメーター、変数宣言の一部に適用されている場合、CLion は項目型に応じて...
![](https://resources.jetbrains.com/help/img/idea/2023.3/cl_livetemplate_settings.png)
ライブテンプレート
ライブテンプレートを使用して、ループ、条件、宣言、print ステートメントなどの一般的な構造をコードに挿入します。コードスニペットを展開するには、対応するテンプレートの省略形を入力してを押します。を押し続けると、テンプレート内の 1 つの変数から次の変数に移動します。を押して、前の変数に移動します。次のデモは、ライブテンプレートの使用箇所と、関数の抽出、パラメーターの抽出、ラムダパラメーターを抽出するリファクタリングを示しています。ライブテンプレートの種類:次のタイプのライブテンプレー