WebStorm 2024.1 ヘルプ

Angular

Angular(英語) は、クロスプラットフォームアプリケーションを構築するための一般的なフレームワークです。WebStorm は Angular のサポートを提供し、新しい Angular アプリの作成やコンポーネントの作業からデバッグやテストまで、開発プロセスのすべてのステップで役立ちます。

始める前に

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

  2. 設定で Angular と AngularJS プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに Angular と AngularJS と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。

新しい Angular アプリケーションを作成する

新しい Angular アプリケーションの構築を開始する推奨方法は Angular CLI(英語) です。WebStorm はこれをダウンロードし、npx(英語) を使用して実行します。その結果、アプリケーションはすぐに使用できる TypeScript および Webpack 構成でブートストラップされます。

もちろん、Angular CLI を自分でダウンロードするか、空の WebStorm プロジェクトを作成して Angular をインストールできます。

Create a new Angular app
  1. ウェルカム画面で新規プロジェクトの作成をクリックするか、メインメニューからファイル | 新規 | プロジェクトを選択します。新しいプロジェクトダイアログが開きます。

  2. 左側のペインで、Angular CLI を選択します。

  3. プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。

  4. Node インタープリターフィールドに、使用する Node.js インタープリターを指定します。リストから設定済みのインタープリターを選択するか、追加を選択して新しいインタープリターを設定します。

  5. Angular CLI リストから、npx --package @angular/cli ng を選択します。

    または、npm バージョン 5.1 以前の場合、ターミナル Alt+F12npm install -g @angular/cli を実行して、@angular/cli パッケージを自分でインストールします。アプリケーションを作成するときに、@angular/cli パッケージが保存されているフォルダーを選択します。

  6. オプション:

    • 追加パラメーターフィールドに、Angular CLI に渡す追加の新しいオプション(英語)を指定します。このフィールドではコード補完を使用できます。オプションの名前を入力し始めるか、Ctrl+Space を押すと、WebStorm に使用可能なオプションとその説明が表示されます。

    • Angular バージョン 16(英語) 以降を使用している場合は、スタンドアロンのコンポーネントを使用した新規プロジェクトの作成チェックボックスを選択することもできます。詳細については、Angular オフィシャル Web サイト(英語)を参照してください。

  7. 作成をクリックすると、WebStorm は、必要なすべての構成ファイルを含む Angular 固有のプロジェクトを生成し、必要なすべての依存関係をダウンロードします。

空の WebStorm プロジェクトを作成する

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

  2. 左側のペインで、空のプロジェクトを選択します。

  3. プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。

  4. 作成をクリックすると、WebStorm はのプロジェクトを作成して開きます。

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

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

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

    npm install @angular/core

    これにより、フレームワークの重要なランタイム部分とともにコア Angular パッケージがインストールされます。

Angular の一部である他のパッケージもインストールする必要がある場合があります。パッケージのリスト(英語)を参照してください。

既存の Angular アプリケーションから始めます

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

すでにマシン上にあるアプリケーションソースを開く

  • ウェルカム画面で開くをクリックするか、メインメニューからファイル | 開くを選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。

バージョン管理からアプリケーションのソースをチェックアウト

  1. ウェルカム画面で VCS から取得をクリックします。

    あるいは、メインメニューからファイル | 新規 | バージョン管理からプロジェクトGit | クローンVCS | バージョン管理から取得を選択します。

    メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce

  2. 表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。

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

  • ポップアップで 'npm install' の実行または実行 'yarn install' をクリックします。

    Open an application and download the dependencies

    npm(英語)Yarn 1(英語)、または Yarn 2(英語) を使用できます。詳細については、npm および Yarn を参照してください。

  • あるいは、エディターまたはプロジェクトツールウィンドウの package.json のコンテキストメニューから 'npm install' の実行または実行 'yarn install' を選択します。

プロジェクトのセキュリティ

WebStorm の外部で作成され、そこにインポートされたプロジェクトを開くと、WebStorm は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。

Untrusted project warning

次のいずれかのオプションを選択します。

  • セーフモードでプレビュー : この場合、WebStorm はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。

    WebStorm はエディター領域の上部に通知を表示し、プロジェクトを信頼リンクをクリックして、いつでもプロジェクトをロードできます。

  • プロジェクトを信頼 : この場合、WebStorm はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての WebStorm 機能が使用可能になることを意味します。

  • 開かない : この場合、WebStorm はプロジェクトを開きません。

プロジェクトのセキュリティの詳細を参照してください。

コードを記述して編集する

この章では、Angular 固有のヒントを提供します。一般的なガイドラインについては、ソースコードの作成と編集および TypeScript を参照してください。

Angular コンポーネントを作成する

WebStorm を使用すると、いくつかの方法で Angular コンポーネントを作成できます。

事前定義されたテンプレートを使用してコンポーネントを作成する

WebStorm は、a-componenta-component-inlinea-component-root などの Angular コンポーネントを作成するための事前定義されたライブテンプレートを提供します。

Create an Angular component using a predefined code snippet

ライブテンプレートの詳細については、「ライブテンプレート」を参照してください。

事前定義されたテンプレートの完全なリストを表示するには、設定ダイアログ (Ctrl+Alt+S) を開き、エディター | ライブテンプレートに移動して、Angular ノードを展開します。

  1. エディターで、Ctrl+J を押し、リストから適切なテンプレート(たとえば、a-component)を選択してから、Enter を押します。

  2. WebStorm はコンポーネントスタブを生成し、キャンバスのあるフィールドにキャレットを配置し、そこでコンポーネント名が指定されるのを待ちます。コンポーネント名を入力すると、Angular スタイルガイド(英語)に従ってセレクターの名前とテンプレート URL が自動的に入力されます。

  3. 必要に応じて、インスペクションポップアップを使用して新しいコンポーネントをスタンドアロン(英語)にします。

    Make component standalone

WebStorm ブログで、コードスニペットの使用と作成(英語)の変数を使用してテンプレートをカスタマイズする方法を学びます。

コンポーネントフォルダーを作成する

WebStorm では、Angular コンポーネント用の多数のファイルを 1 回の操作で作成し、それらすべてを別のフォルダーに配置することもできます。これを行うには、複数の子テンプレートを持つファイルテンプレートを使用する必要があります。親テンプレートからファイルを作成すると、子テンプレートから関連ファイルが自動的に生成されます。詳細については、複数のファイルを含むテンプレートを参照してください。

たとえば、ロジック用の example.component.ts、テンプレート用の example.component.html、スタイル用の example.component.css など、多数のコンポーネントファイルを含む example フォルダーを作成するとします。2 つの親テンプレートを含むファイルテンプレートを作成すると、3 つのファイルすべてが一度に生成され、別のフォルダーに配置されます。

  1. 設定ダイアログ(Ctrl+Alt+S)で、エディター | ファイルおよびコードテンプレートを選択します。

  2. まず、TypeScript コンポーネントファイルのテンプレートを作成します。

    1. ファイルタブで、ツールバーの追加ボタン (the Create Template button) をクリックします。

      Add new template

      新しい Unnamed テンプレートがリストに追加されます。

    2. 右側のペインで、テンプレート名を指定し、Angular コンポーネントとし、ファイル拡張子として component.ts とします。

    3. ファイル名フィールドに $NAME/$NAME と入力します。

    4. 必要に応じて、コードテンプレートを追加します。例:

      /* * Created by ${USER} on ${DATE} */ import { Component } from '@angular/core';
    Create parent template

    適用をクリックします。

  3. 関連する HTML ファイルの子テンプレートを作成します。

    1. 親テンプレート Angular コンポーネントを選択し、ツールバーの子テンプレートファイルの作成ボタン the Create Child Template File をクリックします。

      Add child template icon

      子テンプレートが Angular コンポーネントテンプレートに追加されます。

    2. 右側のペインで、ファイル名フィールドに $NAME/$NAME と入力し、component.html 拡張子を指定します。

    Create child template: component.html

    適用をクリックします。

  4. 関連するスタイルシートの子テンプレートを作成します。

    1. 親テンプレート Angular コンポーネントを選択し、ツールバーの the Create Child Template File をクリックします。子テンプレートが Angular コンポーネントテンプレートに追加されます。

    2. 右側のペインで、ファイル名フィールドに $NAME/$NAME と入力し、component.css 拡張子を指定します。

  5. OK をクリックしてテンプレートを保存します。

  6. コンポーネントファイルを作成します。

    コンポーネントファイルを保存するフォルダーのコンテキストメニューから、新規 | Angular コンポーネントを選択します。開いたダイアログで、フォルダーとその中のコンポーネントファイル(この例では example)に使用される名前を指定します。

    Create an Angular component from a multiple files template in a separate folder

テンプレートからコンポーネントを抽出する

Angular コンポーネントを抽出しますリファクタリングは、angular.json ファイル内の schematic 設定を考慮して、ng generate component を実行することで機能します。

  1. HTML テンプレートファイルで、Angular コンポーネントに抽出するコードフラグメントを選択します。

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

    または、Ctrl+Alt+Shift+T を押して、リファクタリングポップアップからコンポーネントの抽出を選択します。

    Extract a component: Refactor This
  3. 開いたダイアログで、新しいコンポーネントの名前を指定します。

Extract an Angular component from a template

Angular 信号

WebStorm を使用すると、信号(英語)計算(英語)、およびエフェクト(英語)のテンプレートから直接 Angular 信号(英語)を簡単に作成できます。

Angular signals

信号を作成する

  1. 必要な関数を書きます。WebStorm はインスペクションを実行し、新しい関数を未解決としてハイライトします。

  2. ハイライトされた関数の上にマウスを置き、ポップアップ内の信号 '<関数 name>' を作成しますリンクをクリックします。

    Create Angular signal: inspection popup

    あるいは、ハイライトされた機能にカーソルを置き、Alt+Enter を押して、信号 '<関数 name>' を作成しますを選択します。

    Create Angular signal: intention action
  3. WebStorm を選択すると、新しい信号のスタブが生成されるコンポーネント TypeScript ファイルが表示されます。必要に応じてプレースホルダーを入力します。

Angular 信号のハイライトを構成する

  1. Ctrl+Alt+S を押して設定を開き、エディター | カラースキームの切り替え | Angular テンプレートを選択します。

  2. リストからシグナルを選択し、フォアグラウンドの横にある色の表示をクリックします。

    Angular signal: configure highlighting
  3. 好みの色を選択し、適用をクリックします。

Angular アプリケーションを移動する

Angular プロジェクトで作業する場合、TypeScript、テンプレート、スタイルファイルなどのさまざまなコンポーネントファイル間を移動する必要があります。コード内を移動するには、次のオプションを使用できます。

また、Angular CLI QuickSwitch プラグイン(英語)をダウンロードして、コンピューターにインストールすることもできます。

  1. 関連ファイルのリストを表示して関連シンボルポップアップを呼び出すには、次のいずれかの操作を実行します。

    • Ctrl+Alt+Home を押します。

    • メインメニューから移動 | 関連シンボルを選択します。

    • エディター内の任意の領域を右クリックし、移動先 | 関連シンボルを選択します。

    TypeScript コンポーネントファイルでは、このファイルにインポートされたすべてのシンボルもポップアップに一覧表示されます。

    Navigating through an Angular app using the Related Symbol popup
  2. ファイルを開くには、ファイルを選択して Enter を押します。または、各ファイルの種類に関連付けられている番号を使用します。

    1. コンポーネントクラスを含む TypeScript ファイル

    2. テンプレート

    3. テスト

    4. スタイル

ngadd で新機能を追加

Angular CLI 6(英語) 以降を使用するプロジェクトでは、Angular の依存関係アクションを使用して新しいライブラリを追加できます。このアクションは ng add コマンドを実行します。このコマンドは依存関係をインストールし、特別なインストールスクリプトでアプリを更新します。すべてのライブラリが ng add によるインストールをサポートしているわけではないことに注意してください。

  1. メインメニューからファイル | 新規を選択するか、プロジェクトツールウィンドウで Alt+Insert を押してから Angular の依存関係を選択します。

  2. リストから、追加するライブラリを選択します。リストには、ng add で確実にインストールできるライブラリが表示されます。リストにないパッケージをインストールするには、その末尾までスクロールして上記にないパッケージをインストールするリンクをダブルクリックし、表示されるダイアログでパッケージ名を指定します。

  3. ウィザードの手順に従います。

    以下の例は、Angular マテリアルをプロジェクトに追加する方法を示しています。

    Adding Angular Material to a project with ng add

package.json を使って手動で依存関係を管理している場合でも、WebStorm は ng add をサポートするパッケージを認識します。package.json にそのようなパッケージを追加すると、WebStorm は ng add と一緒にそれをインストールすることを提案します。

WebStorm suggests adding a dependency with ng add

Angular Schematics でコード生成

WebStorm は、@angular/material などのライブラリで定義された schematics と Angular CLI 自体で定義された schematics の両方を使用してコードを生成できます。

  1. メインメニューからファイル | 新規を選択するか、プロジェクトツールウィンドウで Alt+Insert を押してから Angular Schematic を選択します。

  2. リストから、関連する schematic を選択します。schematics の名前の入力を開始すると、入力するにつれてリストが縮小します。

    Choosing Angular Schematic
  3. 表示されたダイアログで、生成する schematic の名前と、必要に応じて追加オプションを指定します。WebStorm は schematic の説明を示し、コード補完と利用可能なオプションの説明を提供します。

    Generating Angular CLI schematic: code completion and description is provided

パラメーターのヒントを表示する

Angular HTML テンプレートでは、パラメーターヒントはメソッドと関数のパラメーターの名前を表示して、コードを読みやすくします。デフォルトでは、パラメーターヒントは、リテラルまたは関数式である値に対してのみ表示されますが、名前付きオブジェクトに対しては表示されません。

パラメーターのヒントを設定する

  1. 設定ダイアログ(Ctrl+Alt+S)を開き、エディター | インレイヒントに移動します。

  2. パラメーター名Angular HTML テンプレートを展開します。

  3. 対応するチェックボックスを選択して、パラメーターヒントを表示するコンテキストを指定します。

    プレビューには、設定で行った変更がコードの外観にどのように影響するかが表示されます。

  4. 一部のメソッドおよび関数では、WebStorm はどのコンテキストでもパラメーターヒントを表示しません。除外リスト ... をクリックして、これらのメソッドと機能を表示したり、それらのパラメーターヒントを有効にしたり、リストに新しいアイテムを追加したりします。

  5. 任意のコンテキストで任意の値型のパラメーターヒントを非表示にするには、パラメーター名Angular HTML テンプレートチェックボックスをオフにします。

Confgure parameter hints in Angular templates

コードをインスペクションする

WebStorm は、多くの Angular 固有のインスペクションをもたらします。これは、コードを編集するときにエラーを見つけて、それらの迅速な修正を提案できます。

以下の例では、templatetemplateUrl の両方のプロパティが使用されています。WebStorm はエラーを検出し、それについて警告し、迅速な解決策を提案します。

Angular inspection: duplicate properties

別の例は、*ngIf および *ngFor 構造ディレクティブの誤った使用について WebStorm が警告する方法を示しています。

Angular inspection: incorrect use of structural directive

Angular 固有のインスペクションは、スタンドアロンコンポーネント(英語)の不適切な使用を特定できます。以下の例では、WebStorm はスタンドアロンではないコンポーネントのインポートステートメントを検出し、問題の修正を提案します。

A non-standalone is imported directly

transform プロパティの有無にかかわらず、Angular コンポーネントテンプレートから @Input および @Output プロパティを作成するためのクイックフィックスを使用すると便利な場合があります。必要なインポートステートメントも自動的に生成されることに注意してください。

Quick-fix to generate @Input and @Output properties

WebStorm は、適切に宣言されたフィールドを生成するのに役立つコンテキスト認識型フィールドの作成およびメソッドの作成インテンションアクションも提供します。

Angular 固有のインスペクションのリストを表示して構成する

  1. 設定ダイアログ(Ctrl+Alt+S)で、エディター | インスペクションに移動します。

  2. Angular ノードを展開します。

  3. インスペクションプロファイルと重大度を構成し、事前定義されたインスペクションを無効にして抑制し、カスタムプロファイルを作成します

    コードインスペクションに従って。

Angular マテリアルデザインコンポーネントを使用する

WebStorm は Angular マテリアル(英語)のコンポーネントと属性を認識し、コーディング支援を提供します。

  • コンポーネントの補完

    A list of suggested completion variants for an Angular component
  • 属性の補完

    A list of suggested completion variants for an Angular attribute
  • コンポーネントまたは属性とその宣言の間のナビゲーション(Ctrl+B を押すか、コンテキストメニューから移動先 | 宣言を選択します)。

Angular マテリアルをインストール

  • 埋め込みターミナルAlt+F12)を開き、ng add @angular/material と入力します。

  • package.jsondependencies"@angular/material": "^16.2.11" を追加し、npm install を実行します。

  • メインメニューでファイル | 新規 | Angular の依存関係に移動し、リストから @angular/material を選択して、開始されるウィザードの手順に従います。

    AInstall Angualar Material

Angular マテリアルの公式 Web サイトでの開始(英語)の詳細を参照してください。

構文ハイライトを構成する

好みや習慣に応じて Angular 対応の構文ハイライトを設定することができます。

  1. 設定ダイアログ(Ctrl+Alt+S)で、エディター | カラースキームの切り替え | Angular テンプレートに移動します。

  2. 配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、色とフォントの説明に従ってカスタマイズします。

Angular アプリケーションを実行する

  1. package.jsonstart スクリプトの横にあるガターで the Run icon をクリックするか、ターミナル Alt+F12npm start を実行するか、npm ツールウィンドウ ( 表示 | ツールウィンドウ | npm) で start タスクをダブルクリックします。

    Run an Angular app in the development mode from package.json
  2. アプリケーションがコンパイルされ、開発サーバーの準備ができるまで待ちます。

    実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。アプリケーションが @angular/cli で生成された場合、デフォルトの URL は http://localhost:4200/ です。このリンクをクリックすると、アプリケーションが表示されます。

    Running Angular CLI app: the Development server is ready

実行 / デバッグ構成を介して Angular アプリケーションを実行する

上記のように、WebStorm 新しいプロジェクトウィザードで Angular CLI を使用して作成されたアプリケーションの場合、WebStorm はデフォルト名 Angular CLI サーバーnpm 構成を生成します。この構成は、開発サーバーを起動し、開発モードでアプリケーションを起動する ng serve コマンドを実行します。

それ以外の場合は、ホスト、ポートなどの実際の設定を手動で実行 / デバッグ構成を作成するする必要があります。

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

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

    Open the Edit Configurations dialog

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

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

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

    npm run/debug configuration
  3. オプション:

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

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

    Browser / Live Edit tab: select browser

アプリケーションの実行

  1. ツールバーの実行ウィジェットのリストから、npm タイプの実行構成を選択します。これは、自動生成された Angular CLI サーバー構成、または上記のように自分で作成したカスタム構成にすることができます。

  2. Run をクリックします。

    Run a Vue.js app in the development mode via a run/debug configuration
  3. アプリケーションがコンパイルされ、開発サーバーの準備ができるまで待ちます。

    実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。アプリケーションが @angular/cli で生成された場合、デフォルトの URL は http://localhost:4200/ です。このリンクをクリックすると、アプリケーションが表示されます。

    Running Angular CLI app: the Development server is ready

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

Angular アプリケーションをデバッグする

デバッグセッションは、実行 / デバッグ構成を起動するから開始することも、開発モードでアプリケーションが実行されている URL を表示する実行ツールウィンドウから開始することもできます。

実行 / デバッグ構成を介してデバッグを開始する

Angular アプリケーションをデバッグするには、2 つの実行 / デバッグ構成が必要です。

  • 上記のように、開発モードでアプリケーションを起動するための npm 構成。

  • 開発モードで実行されているアプリケーションにデバッガーを接続するための JavaScript デバッグ構成。

npm 実行 / デバッグ構成を使用して Angular アプリケーションを実行およびデバッグするに従って、npm 構成内に JavaScript デバッグ構成を作成して、一度に起動することができます。

または、JavaScript デバッグ実行 / デバッグ構成でデバッグを開始するに従って、npmJavaScript デバッグ実行 / デバッグ構成を個別に起動します。

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

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

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

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

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

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

    npm configuration, Browser tab
  5. 実行をクリックします。

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

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

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

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

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

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

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

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

    上記のように、Angular CLI を使用してアプリケーションを生成した場合、WebStorm は、デフォルト名アプリケーションのデバッグとデフォルト URL http://localhost:4200 を持つ JavaScript デバッグ実行 / デバッグ構成をすでに作成しています。JavaScript デバッグノードのリストからこの実行 / デバッグ構成を選択します。

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

    Create a JavaScript Debug configuration: specify the URL
  5. デバッグをクリックします。

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

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

実行ツールウィンドウまたは組み込みのターミナルからデバッグを開始する

アプリケーションが localhost の開発モードで実行されている場合、特に Angular CLI を使用して生成された場合は、> 実行ツールウィンドウまたは組み込みのターミナルから直接デバッグセッションを開始できます。

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

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

  3. 実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。アプリケーションが @angular/cli で生成された場合、デフォルトの URL は http://localhost:4200/ です。Ctrl+Shift を押したまま、この URL リンクをクリックします。WebStorm は、タイプ JavaScript デバッグの自動生成された Angular アプリケーション構成を使用してデバッグセッションを開始します。

    Starting a debugging session from the Run tool window

    あるいは、リストから自動生成された Angular アプリケーション構成を選択し、リストの横にあるデバッグボタン the Debug button をクリックします。

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

Node.js 17 以降のトラブルシューティング

Node.js バージョン 17 以降を使用している場合、デバッグセッション中にネットワーク接続の問題が発生し、デバッガーの接続やソースマップのロードで問題が発生する可能性があります。

回避策は、package.jsonstart スクリプトを次のように更新して、--host 127.0.0.1 をサーバーに渡すことです。

"start": "ng serve --host=127.0.0.1"

プロジェクト内で複数のフレームワークを使用する

場合によっては、1 つの Angular プロジェクト内で他のフレームワークを使用する必要があることがあります。

各ファイルでコンテキスト認識コーディング支援を受けるには、構成ファイル .ws-context を作成し、各ファイルまたはフォルダーで使用するフレームワークを指定します。このファイルの設定は、デフォルトの構成を上書きします。

  1. プロジェクトルートで、コンテキストメニューから新規 | ファイルを選択し、ファイル名として .ws-context を指定します。

  2. .ws-context では、次の 2 種類のプロパティを使用します。

    • コンテキスト値文字列を持つ <context-name>

    • コンテキスト詳細オブジェクトを持つ GLOB パターン

  3. 次のコンテキスト値を使用します。

    • framework : vueangularreactsvelteastro

    • angular-template-syntax : V_2 , V_17

    • nextjs-project : nextjs

    • astro-project : astro

    • vue-store : vuex , pinia

    • vue-class-component-library : vue-class-componentvue -property-decoratorvue-facing-decorator

    • jsdoc-dialect : jsdoc-typescript , jsdoc-closure

  4. 簡単にするためにパスのネストを使用します。

    • GLOB パスの最後のセグメントはファイル名パターンであり、* ワイルドカードのみがサポートされます。

    • 最後のセグメントが ** の場合、ネストされたすべてのディレクトリとファイルと一致します。

    • 最上位レベルのコンテキストプロパティには /** パターンが必要です。

  5. 複数のパターンが同じファイル名に一致する場合、曖昧さを解消するために次のルールが使用されます。

    • ** セグメントを除いて、パスセグメント数が最大となるパターンを選択します。

    • 純粋なファイル名パターンであるパターンを選択します。つまり、** または / で終わらないパターンを選択します。

    • 最初に定義されたパターンを選択します。

サンプル

さまざまなフォルダーで使用されている多数のフレームワークを含むプロジェクトがあるとします。

A project with different frameworks

プロジェクト内の各ファイルに対してコンテキスト認識型の支援を受けるには、次のコードを .ws-context に追加します。

{ "framework": "vue", "angular-template-syntax": "V_2", "src/**/app/**": { "framework": null, "app.component.html" : { "framework": "angular", "angular-template-syntax": "V_17" } }, "src/**/p*-editor/*.html" : { "framework" : "angular" } }

関連ページ:

プラグインのインストール

プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...

新規プロジェクトの作成ダイアログ

このダイアログを使用して、空のプロジェクトを作成したり、アプリケーション開発用のフレームワーク固有のプロジェクトスタブを生成したりします。ダイアログの左側のペインには、スタブを生成できるプロジェクトタイプのリストが表示されます。利用可能なプロジェクトタイプのセットは、インストールされてアクティブ化されているプラグインによって異なります。右側のペインの内容は、選択したプロジェクトの種類によって異なります。ロケーションフィールドはすべてのプロジェクトタイプに共通です。空のプロジェクト内容のないプロジ...

GitHub でホストされているプロジェクトを管理する

プロジェクトをチェックアウトする (クローン):WebStorm から直接貢献したいリポジトリのクローンを作成し、それに基づいて新しいプロジェクトを作成できます。メインメニューで、に移動します。Git メニューが使用できない場合は、を選択します。バージョン管理から取得ダイアログで、左側の GitHub を選択します。次のいずれかを実行して、GitHub にログインします。トークンがある場合は、トークンを使用するをクリックし、トークンをトークンフィールドに貼り付けて、ログインをクリックします。それ以外の...

npm、pnpm、Yarn

WebStorm は npm、pnpm、Yarn、Yarn 2、Yarn 3 と統合されているため、組み込みのターミナルで、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。WebStorm では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。WebStorm は、package.json ファイルを解析してスクリプトの定義を認識し、スクリプトをツリービューに表示して、ツリー内のスクリプトと package.json ファイル内のその定...

プロジェクトのセキュリティ

潜在的なセキュリティリスクを防ぐために、WebStorm では、プロジェクトのソースがわからない場合に、プロジェクトの操作方法を決定できます。WebStorm は、実行されるタスク、ファイルウォッチャー、webpack 構成について警告し、信頼できるソースを構成できるようにします。不明なソースからプロジェクトを開く:WebStorm の外部で作成され、そこにインポートされたプロジェクトを開くと、WebStorm は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログ...

プロジェクトを作成

WebStorm では、空のプロジェクトを作成したり、プロジェクトとしてフォルダーを開いたり、VCS からソースをチェックアウトしたり、プロジェクトを作成することができます。また、フレームワークテンプレートを使用してプロジェクトを生成することもできます。そのため、新しいアプリケーションは、必要なすべてのパッケージと構成ですでにブートストラップされています。WebStorm はまたあらゆるプロジェクトの設定、ファイルおよびホールダーを保存し、新しいプロジェクトを作成するときテンプレートとして使用す...