Angular
Angular(英語) は、クロスプラットフォームアプリケーションを構築するための一般的なフレームワークです。JetBrains Rider は Angular のサポートを提供し、新しい Angular アプリの作成やコンポーネントの作業からデバッグやテストまで、開発プロセスのすべてのステップで役立ちます。
始める前に
Node.js をダウンロードしてインストールします。
設定 | プラグインページのインストール済みタブで、JavaScript と TypeScript および Angular と AngularJS に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。
ディレクトリ構造で編成され、ソリューションファイルを持たないアプリケーションを開くには、Ctrl+Shift+O を押すか、メインメニューからフォルダーの選択をクリックします。
を選択し、アプリケーションのルートフォルダーを選択して、コードを記述して編集する
Angular コンポーネントを作成する
JetBrains Rider を使用すると、いくつかの方法で Angular コンポーネントを作成できます。
関連する .ts、.html、.css ファイルの束を含むコンポーネントフォルダーを作成します。
専用のリファクタリングを使用したテンプレートからコンポーネントを抽出します。
事前定義されたテンプレートを使用してコンポーネントを作成する
JetBrains Rider は、a-component
、a-component-inline
、a-component-root
などの Angular コンポーネントを作成するための事前定義されたライブテンプレートを提供します。
![Create an Angular component using a predefined code snippet](https://resources.jetbrains.com/help/img/rider/2024.1/ws_create_angular_component_predefined_template.png)
ライブテンプレートの詳細については、「ライブテンプレート」を参照してください。
事前定義されたテンプレートの完全なリストを表示するには、設定 / 環境設定ダイアログ (Ctrl+Alt+S) を開き、 に移動して、Angular ノードを展開します。
エディターで、Ctrl+J を押し、リストから適切なテンプレート(たとえば、
a-component
)を選択してから、Enter を押します。JetBrains Rider はコンポーネントスタブを生成し、キャンバスのあるフィールドにキャレットを配置し、そこでコンポーネント名が指定されるのを待ちます。コンポーネント名を入力すると、Angular スタイルガイド(英語)に従ってセレクターの名前とテンプレート URL が自動的に入力されます。
必要に応じて、インスペクションポップアップを使用して新しいコンポーネントをスタンドアロン(英語)にします。
WebStorm ブログで、コードスニペットの使用と作成(英語)の変数を使用してテンプレートをカスタマイズする方法を学びます。
コンポーネントフォルダーを作成する
JetBrains Rider では、1 回のアクションで Angular コンポーネントのファイルの束を作成し、それらすべてを別のフォルダーに配置することもできます。これを行うには、いくつかの子テンプレートを含むファイルテンプレートを使用する必要があります。親テンプレートからファイルを作成すると、子テンプレートの関連ファイルが自動的に生成されます。
たとえば、ロジック用の example.component.ts、テンプレート用の example.component.html、スタイル用の example.component.css など、多数のコンポーネントファイルを含む example フォルダーを作成するとします。2 つの親テンプレートを含むファイルテンプレートを作成すると、3 つのファイルすべてが一度に生成され、別のフォルダーに配置されます。
設定 / 環境設定ダイアログ(Ctrl+Alt+S)で、 を選択します。
まず、TypeScript コンポーネントファイルのテンプレートを作成します。
ファイルタブで、ツールバーの追加ボタン (
) をクリックします。
新しい Unnamed テンプレートがリストに追加されます。
右側のペインで、テンプレート名を指定し、Angular コンポーネントとし、ファイル拡張子として
component.ts
とします。ファイル名フィールドに
$NAME/$NAME
と入力します。必要に応じて、コードテンプレートを追加します。例:
/* * Created by ${USER} on ${DATE} */ import { Component } from '@angular/core';
適用をクリックします。
関連する HTML ファイルの子テンプレートを作成します。
親テンプレート Angular コンポーネントを選択し、ツールバーの子テンプレートファイルの作成ボタン
をクリックします。
子テンプレートが Angular コンポーネントテンプレートに追加されます。
右側のペインで、ファイル名フィールドに
$NAME/$NAME
と入力し、component.html
拡張子を指定します。
適用をクリックします。
関連するスタイルシートの子テンプレートを作成します。
親テンプレート Angular コンポーネントを選択し、ツールバーの
をクリックします。子テンプレートが Angular コンポーネントテンプレートに追加されます。
右側のペインで、ファイル名フィールドに
$NAME/$NAME
と入力し、component.css
拡張子を指定します。
OK をクリックしてテンプレートを保存します。
コンポーネントファイルを作成します。
コンポーネントファイルを保存するフォルダーのコンテキストメニューから、example)に使用される名前を指定します。
を選択します。開いたダイアログで、フォルダーとその中のコンポーネントファイル(この例では
テンプレートからコンポーネントを抽出する
Angular コンポーネントを抽出しますリファクタリングは、angular.json ファイル内の schematic 設定を考慮して、ng generate component
を実行することで機能します。
HTML テンプレートファイルで、Angular コンポーネントに抽出するコードフラグメントを選択します。
選択のコンテキストメニューから
を選択します。または、Ctrl+Alt+Shift+T を押して、リファクタリングポップアップから を選択します。
開いたダイアログで、新しいコンポーネントの名前を指定します。
Angular 信号
JetBrains Rider を使用すると、信号(英語)、計算(英語)、およびエフェクト(英語)のテンプレートから直接 Angular 信号(英語)を簡単に作成できます。
![Angular signals](https://resources.jetbrains.com/help/img/rider/2024.1/angular_signals.png)
信号を作成する
必要な関数を書きます。JetBrains Rider はインスペクションを実行し、新しい関数を未解決としてハイライトします。
ハイライトされた関数の上にマウスを置き、ポップアップ内の信号 '<関数 name>' を作成しますリンクをクリックします。
あるいは、ハイライトされた機能にカーソルを置き、Alt+Enter を押して、
を選択します。JetBrains Rider を選択すると、新しい信号のスタブが生成されるコンポーネント TypeScript ファイルが表示されます。必要に応じてプレースホルダーを入力します。
Angular 信号のハイライトを構成する
Ctrl+Alt+S を押して設定を開き、エディター | カラースキームの切り替え | Angular テンプレートを選択します。
リストからシグナルを選択し、フォアグラウンドの横にある色の表示をクリックします。
好みの色を選択し、適用をクリックします。
Angular アプリケーションを移動する
ナビゲーションバー
また、Angular CLI QuickSwitch プラグイン(英語)をダウンロードして、コンピューターにインストールすることもできます。
ngadd で新機能を追加
Angular CLI 6(英語) 以降を使用するプロジェクトでは、Angular の依存関係アクションを使用して新しいライブラリを追加できます。このアクションは ng add
コマンドを実行します。このコマンドは依存関係をインストールし、特別なインストールスクリプトでアプリを更新します。すべてのライブラリが ng add
によるインストールをサポートしているわけではないことに注意してください。
メインメニューからプロジェクトツールウィンドウで Alt+Insert を押してから Angular の依存関係を選択します。
を選択するか、リストから、追加するライブラリを選択します。リストには、
ng add
で確実にインストールできるライブラリが表示されます。リストにないパッケージをインストールするには、その末尾までスクロールして上記にないパッケージをインストールするリンクをダブルクリックし、表示されるダイアログでパッケージ名を指定します。ウィザードの手順に従います。
以下の例は、Angular マテリアルをプロジェクトに追加する方法を示しています。
package.json を使って手動で依存関係を管理している場合でも、JetBrains Rider は ng add
をサポートするパッケージを認識します。package.json にそのようなパッケージを追加すると、JetBrains Rider は ng add
と一緒にそれをインストールすることを提案します。
![JetBrains Rider は、ng add で依存関係を追加することを提案しています JetBrains Rider suggests adding a dependency with ng add](https://resources.jetbrains.com/help/img/rider/2024.1/ws_install_with_ng_add_inspection.png)
パラメーターのヒントを表示する
Angular HTML テンプレートでは、パラメーターヒントはメソッドと関数のパラメーターの名前を表示して、コードを読みやすくします。デフォルトでは、パラメーターヒントは、リテラルまたは関数式である値に対してのみ表示されますが、名前付きオブジェクトに対しては表示されません。
パラメーターのヒントを設定する
設定 / 環境設定ダイアログ(Ctrl+Alt+S)を開き、 に移動します。
パラメーター名の Angular HTML テンプレートを展開します。
対応するチェックボックスを選択して、パラメーターヒントを表示するコンテキストを指定します。
プレビューには、設定で行った変更がコードの外観にどのように影響するかが表示されます。
一部のメソッドおよび関数では、JetBrains Rider はどのコンテキストでもパラメーターヒントを表示しません。除外リスト ... をクリックして、これらのメソッドと機能を表示したり、それらのパラメーターヒントを有効にしたり、リストに新しいアイテムを追加したりします。
任意のコンテキストで任意の値型のパラメーターヒントを非表示にするには、パラメーター名の Angular HTML テンプレートチェックボックスをオフにします。
![Angular テンプレートでパラメーターヒントを構成する Confgure parameter hints in Angular templates](https://resources.jetbrains.com/help/img/rider/2024.1/ws_angular_view_parameter_hints.png)
コードをインスペクションする
JetBrains Rider は、多くの Angular 固有のインスペクションをもたらします。これは、コードを編集するときにエラーを見つけて、それらの迅速な修正を提案できます。
以下の例では、template
と templateUrl
の両方のプロパティが使用されています。JetBrains Rider はエラーを検出し、それについて警告し、迅速な解決策を提案します。
![Angular インスペクション: 重複したプロパティ Angular inspection: duplicate properties](https://resources.jetbrains.com/help/img/rider/2024.1/ws_angular_inspection_duplicate_template.png)
別の例は、*ngIf
および *ngFor
構造ディレクティブの誤った使用について JetBrains Rider が警告する方法を示しています。
![Angular インスペクション: 構造ディレクティブの誤った使い方 Angular inspection: incorrect use of structural directive](https://resources.jetbrains.com/help/img/rider/2024.1/ws_angular_inspection_structural_template.png)
Angular 固有のインスペクションは、スタンドアロンコンポーネント(英語)の不適切な使用を特定できます。以下の例では、JetBrains Rider はスタンドアロンではないコンポーネントのインポートステートメントを検出し、問題の修正を提案します。
![A non-standalone is imported directly](https://resources.jetbrains.com/help/img/rider/2024.1/angular_inspections_import_non_standalone.png)
transform
プロパティの有無にかかわらず、Angular コンポーネントテンプレートから @Input
および @Output
プロパティを作成するためのクイックフィックスを使用すると便利な場合があります。必要なインポートステートメントも自動的に生成されることに注意してください。
![Quick-fix to generate @Input and @Output properties](https://resources.jetbrains.com/help/img/rider/2024.1/angular_inspection_input_output.png)
JetBrains Rider は、適切に宣言されたフィールドを生成するのに役立つコンテキスト認識型フィールドの作成およびメソッドの作成インテンションアクションも提供します。
Angular 固有のインスペクションのリストを表示して構成する
設定 / 環境設定ダイアログ(Ctrl+Alt+S)で、 に移動します。
Angular ノードを展開します。
インスペクションプロファイルと重大度を構成し、事前定義されたインスペクションを無効にして抑制し、カスタムプロファイルを作成します
.
Angular マテリアルデザインコンポーネントを使用する
JetBrains Rider は Angular マテリアル(英語)のコンポーネントと属性を認識し、コーディング支援を提供します。
コンポーネントの補完
属性の補完
コンポーネントまたは属性とその宣言の間のナビゲーション(Ctrl+B を押すか、コンテキストメニューから
を選択します)。
Angular マテリアルをインストール
埋め込みターミナル(Alt+F12)を開き、
ng add @angular/material
と入力します。package.json の
dependencies
に"@angular/material": "^16.2.11"
を追加し、npm install
を実行します。メインメニューで
に移動し、リストから@angular/material
を選択して、開始されるウィザードの手順に従います。
Angular マテリアルの公式 Web サイトでの開始(英語)の詳細を参照してください。
構文ハイライトを構成する
好みや習慣に応じて Angular 対応の構文ハイライトを設定することができます。
設定 / 環境設定ダイアログ(Ctrl+Alt+S)で、 に移動します。
配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、配色: IDE テキストのフォントと色の説明に従ってカスタマイズします。
Angular アプリケーションを実行する
package.json の
start
スクリプトの横にあるガターでをクリックするか、ターミナル Alt+F12 で
npm start
を実行するか、npm ツールウィンドウ ( ) でstart
タスクをダブルクリックします。アプリケーションがコンパイルされ、開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。アプリケーションが @angular/cli で生成された場合、デフォルトの URL は http://localhost:4200/ です。このリンクをクリックすると、アプリケーションが表示されます。
実行 / デバッグ構成を介して Angular アプリケーションを実行する
Angular CLI で作成されたアプリケーションの場合、JetBrains Rider は npm 構成を生成します。この構成は、開発サーバーを起動し、開発モードでアプリケーションを起動する ng serve
コマンドを実行します。
それ以外の場合は、ホスト、ポートなどの実際の設定を手動で実行 / デバッグ構成を作成するする必要があります。
npm 実行 / デバッグ構成を作成する
実行構成の編集を選択します。
に進みます。あるいは、ツールバーのリストから開いた実行構成の編集ダイアログで、ツールバーの追加ボタン (
) をクリックし、リストから npm を選択します。
開いた実行 / デバッグ構成: npm ダイアログの構成タブで、使用する package.json の場所、Node.js インタープリター、およびパッケージマネージャーを指定します。
コマンドフィールドで、リストから実行を選択し、次にスクリプトリストから実行するスクリプトを選択します。ほとんどの場合、デフォルトの
start
スクリプトになりますが、カスタムポートでアプリケーションを実行するなど、package.json で別のスクリプトを構成することもできます。オプション:
ブラウザーでアプリケーションを開くには、次のように構成を更新します。ブラウザー / Live Edit タブで、起動後チェックボックスをオンにし、アプリケーションを開くブラウザーを選択して、アプリケーションが実行される URL アドレスを指定します。
アプリケーションをデバッグする場合は、Google Chrome(英語) または別の Chromium ベースのブラウザー(英語)を選択します。
アプリケーションの実行
ツールバーの実行ウィジェットのリストから、npm タイプの実行構成を選択します。これは、自動生成された Angular CLI サーバー構成、または上記のように自分で作成したカスタム構成にすることができます。
をクリックします。
アプリケーションがコンパイルされ、開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。アプリケーションが @angular/cli で生成された場合、デフォルトの URL は http://localhost:4200/ です。このリンクをクリックすると、アプリケーションが表示されます。
または、上記のように、 JetBrains Rider が起動時にアプリケーションを開くようにします。
Angular アプリケーションをデバッグする
デバッグセッションは、実行 / デバッグ構成を起動するから開始することも、開発モードでアプリケーションが実行されている URL を表示する実行ツールウィンドウから開始することもできます。
実行 / デバッグ構成を介してデバッグを開始する
Angular アプリケーションをデバッグするには、2 つの実行 / デバッグ構成が必要です。
上記のように、開発モードでアプリケーションを起動するための npm 構成。
開発モードで実行されているアプリケーションにデバッガーを接続するための JavaScript デバッグ構成。
npm 実行 / デバッグ構成を使用して Angular アプリケーションを実行およびデバッグするに従って、npm 構成内に JavaScript デバッグ構成を作成して、一度に起動することができます。
または、JavaScript デバッグ実行 / デバッグ構成でデバッグを開始するに従って、npm と JavaScript デバッグ実行 / デバッグ構成を個別に起動します。
単一の npm 実行 / デバッグ構成で Angular アプリケーションを実行およびデバッグする
コードにブレークポイントを設定します。
上記の説明に従って npm 構成を作成します。
開いた実行 / デバッグ構成: npm ダイアログの構成タブで、使用する package.json の場所、Node.js インタープリター、およびパッケージマネージャーを指定します。
コマンドフィールドで、リストから実行を選択し、次にスクリプトリストから実行するスクリプトを選択します。ほとんどの場合、デフォルトの
start
スクリプトになりますが、カスタムポートでアプリケーションを実行するなど、package.json で別のスクリプトを構成することもできます。ブラウザー / Live Edit タブで、起動後チェックボックスを選択し、リストから Google Chrome(英語) または別の Chromium ベースのブラウザー(英語)を選択し、JavaScript デバッガーを使用するチェックボックスを選択して、アプリケーションを実行する URL を指定します。
実行をクリックします。
構成を再実行するには、実行ウィジェットのリストから構成を選択し、その横にある
をクリックします。
JetBrains Rider はアプリケーションを開発モードで実行し、同時にデバッグセッションを起動します。
最初のブレークポイントに到達したら、デバッグウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断したときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示します。
JavaScript デバッグ実行 / デバッグ構成でデバッグを開始する
コードにブレークポイントを設定します。
上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。この URL をコピーして、後で JavaScript デバッグ構成で指定します。
JavaScript デバッグ構成を作成します。これを行うには、メインメニューの に移動し、
をクリックして、リストから JavaScript デバッグを選択します。
Angular CLI を使用してアプリケーションを生成した場合、JetBrains Rider は、デフォルト名アプリケーションのデバッグとデフォルト URL
http://localhost:4200
を持つ JavaScript デバッグ実行 / デバッグ構成をすでに作成しています。JavaScript デバッグノードのリストからこの実行 / デバッグ構成を選択します。開いた実行 / デバッグ構成: JavaScript デバッグダイアログで、構成の名前と、開発モードでアプリケーションが実行されている URL アドレスを指定します。この URL は、上記のように、実行ツールウィンドウまたはターミナルにコピーできます。
デバッグをクリックします。
構成を再実行するには、実行ウィジェットのリストから構成を選択し、その横にある
をクリックします。
最初のブレークポイントに到達したら、デバッグウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断したときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示します。
実行ツールウィンドウまたは組み込みのターミナルからデバッグを開始する
アプリケーションが localhost
の開発モードで実行されている場合、特に Angular CLI を使用して生成された場合は、> 実行ツールウィンドウまたは組み込みのターミナルから直接デバッグセッションを開始できます。
コードにブレークポイントを設定します。
上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。アプリケーションが @angular/cli で生成された場合、デフォルトの URL は http://localhost:4200/ です。Ctrl+Shift を押したまま、この URL リンクをクリックします。JetBrains Rider は、タイプ JavaScript デバッグの自動生成された Angular アプリケーション構成を使用してデバッグセッションを開始します。
あるいは、リストから自動生成された Angular アプリケーション構成を選択し、リストの横にあるデバッグボタン
をクリックします。
最初のブレークポイントに到達したら、デバッグツールウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断したときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示します。
Node.js 17 以降のトラブルシューティング
Node.js バージョン 17 以降を使用している場合、デバッグセッション中にネットワーク接続の問題が発生し、デバッガーの接続やソースマップのロードで問題が発生する可能性があります。
回避策は、package.json の start
スクリプトを次のように更新して、--host 127.0.0.1
をサーバーに渡すことです。
プロジェクト内で複数のフレームワークを使用する
場合によっては、1 つの Angular プロジェクト内で他のフレームワークを使用する必要があることがあります。
各ファイルでコンテキスト認識コーディング支援を受けるには、構成ファイル .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/rider/2024.1/several_frameworks_context_project_structure.png)
プロジェクト内の各ファイルに対してコンテキスト認識型の支援を受けるには、次のコードを .ws-context
に追加します。
関連ページ:
![](https://resources.jetbrains.com/help/img/rider/2024.1/rdr_plugins_settings.png)
プラグインのインストール
プラグインは JetBrains Rider のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrai...
![](https://pleiades.io/icons/rider.png)
Web 固有のライブテンプレート
ライブテンプレートを使用して、ループ、条件、宣言、print ステートメントなどの一般的な構造をコードに挿入します。コードスニペットを展開するには、対応するテンプレートの省略形を入力してを押します。を押し続けると、テンプレート内の 1 つの変数から次の変数に移動します。を押して、前の変数に移動します。ライブテンプレートの種類:次のタイプのライブテンプレートが区別されます。シンプルなテンプレートには固定プレーンテキストのみが含まれています。シンプルなテンプレートを展開すると、テキストが自動
![](https://resources.jetbrains.com/help/img/rider/2024.1/solution_explorer_full_search.png)
エクスプローラーウィンドウ
ソリューションエクスプローラーを使用すると、さまざまな視点からソリューションを確認し、新しいアイテム(ディレクトリ、ファイル、クラスなど)の作成、エディターでのファイルのオープン、必要なコードフラグメントへの移動などのさまざまなタスクを実行できます。このツールウィンドウのほとんどの機能には、コンテンツペインのコンテキストメニューコマンドとして、関連するショートカットを介してアクセスします。また、ビューには、作成されたスクラッチファイル、クエリコンソール、拡張スクリプトを管理できるスクラッチとコン...
![](https://resources.jetbrains.com/help/img/rider/2024.1/cl_colorscheme_duplicate.png)
配色: IDE テキストのフォントと色
開発者は、エディターのソースコード、検索結果、デバッガー情報、コンソールの入出力など、多くのテキストリソースを操作します。このテキストのフォーマットには色とフォントスタイルが使用されており、一目で理解できるようになります。JetBrains Rider では、IDE テキストで使用される色とフォントを定義する構成可能な配色から選択できます。事前定義された配色を使用するか、あなたの好みに合わせてカスタマイズすることができます。スキームを共有することも可能です。配色を選択を押して設定を開き、を選択し...
![](https://resources.jetbrains.com/help/img/rider/2024.1/ws_npm_docker_run_configuration_docker_container_settings.png)
実行 / デバッグ構成: NPM
作成: このダイアログでは、npm および Yarn スクリプトをローカルで実行するための構成を作成します。現在のコンテキストにおける「ローカル」とは、JetBrains Rider 自体がコンピューターにインストールされている Node.js を起動し、その後スクリプトの実行を開始することを意味します。スクリプトが開発モードでアプリケーションを起動する場合、構成を変更してデバッグセッションも開始することができます。これを行うには、ブラウザー / ライブ編集タブに移動し、アプリケーションが実行される URL...
![](https://resources.jetbrains.com/help/img/rider/2024.1/breakpoint_condition_example.png)
ブレークポイント
ブレークポイントを使用すると、特定のステートメントでプログラムの実行を一時停止し、変数値、コールスタック、その他のプログラムパラメーターを分析したり、式を評価したり、プログラムをステップ実行したりできます。JetBrains Rider では、次の型のブレークポイントを操作できます。行ブレークポイント、コード内の特定の文に設定できます。実行がこの行に達すると、デバッガーはプログラムの実行を中断します。行ブレークポイントは実行可能な行にのみ設定できます。コメント、宣言、空行は、行ブレークポイントの...