Angular

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

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

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

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

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

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

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

   

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

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

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

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

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

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

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

      

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

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

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

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

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

   

   適用をクリックします。

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

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

      

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

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

   

   適用をクリックします。

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

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

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

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

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

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

   

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

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

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

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

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

   

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

シグナルを作成する

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

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

   

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

   

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

Angular シグナルのハイライトを構成する

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

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

   

3. 好みの色を選択し、適用をクリックします。

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

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

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

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

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

   

2. ファイルを開くには、ファイルを選択して Enter を押します。または、各ファイルの種類に関連付けられている番号を使用します。

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

   2. テンプレート

   3. テスト

   4. スタイル

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

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

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

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

   

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

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

   

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

   

1. Ctrl+Alt+S を押して設定を開き、言語 & フレームワーク | TypeScript | Angular を選択します。

   または、ステータスバーの言語サービスウィジェットをクリックし、Angular TypeScript を選択して、 をクリックします。

   

2. .ts ファイルのコーディング支援を受けるサービスを指定します。これは、TypeScript 言語サービス(英語)との WebStorm 統合、または内部 WebStorm パーサーとコードインスペクションのみになります。

   • デフォルトでは、自動オプションが選択されているため、WebStorm は適切なコンテキストで TypeScript 言語サービスとの統合を自動的に有効にします。その結果、TypeScript 言語サービスのデータに基づいて型評価が実行され、内部の WebStorm インスペクションも適用されます。

   • 内部 WebStorm パーサーとインスペクションからのデータのみに基づいてコーディング支援を取得するには、無効オプションを選択します。

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

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

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

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

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

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

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

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

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

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

3. インスペクションのプロファイルと重大度を設定し、事前定義のインスペクションを無効にして抑制し、コードインスペクションの説明に従ってカスタムのものを作成します。

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

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

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

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

  

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

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

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

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

1. 実行 | 実行構成の編集に移動します。または、ツールバーの実行ウィジェットから実行構成の編集を選択します。

   

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

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

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

   

3. オプション:

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

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

   

アプリケーションの実行

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

2. をクリックします。

   

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

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

   

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

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

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

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

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

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

   

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

   

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

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

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

   

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

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

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

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

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

   

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

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

   

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

   

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

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

   

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

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

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

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

   

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