PhpStorm 2025.3 ヘルプ

Angular

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

始める前に

  1. Node.js をダウンロードしてインストールします。

  2. 設定 | プラグインページのインストール済みタブで、JavaScript and TypeScript および Angular と AngularJS に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。

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

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

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

Create a new Angular app

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

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

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

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

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

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

  6. オプション:

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

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

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

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

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

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

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

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

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

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

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

    npm install @angular/core

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

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

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

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

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

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

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

  1. ウェルカム画面でリポジトリのクローンをクリックします。

    あるいは、メインメニューからファイル | 新規 | バージョン管理からプロジェクト、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 のコンテキストメニューまたはプロジェクトツールウィンドウ Alt+1 から 'npm install' の実行または実行 'yarn install' を選択します。

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

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

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

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

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

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

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

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

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

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

Angular 言語サービスを構成する

PhpStorm は、コード補完、エラー検出とハイライト表示、ヒント、Angular テンプレート内のナビゲーションなど、Angular 固有の完全なコーディング支援を提供します。Angular プロジェクトのコーディング支援は、Angular 言語サービス(英語)、TypeScript 言語サービス(英語)、内部 PhpStorm パーサーとコードインスペクションのみから取得するように設定できます。

デフォルトでは、Angular 言語サービスは有効になっており、ステータスバーの言語サービスウィザードに表示されます。

  1. Angular 設定を開くには、ステータスバーの the language services running on current file icon をクリックし、the Open Settings icon をクリックします。

    Angular language service widget

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

  2. .ts ファイルのコーディング支援を受けるサービスを指定します。

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

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

Angular 言語サービスを再起動する

  • ステータスバーの the language services running on current file icon をクリックし、Angular TypeScript <バージョン> の横にある the Restart Service icon をクリックします。

    Angular language service widget - Restart Service

型評価を構成する

  • ステータスバーの the Service-Powered Type Engine icon をクリックし、型評価を取得したいサービスの横にあるチェックボックスをオンにします。準備ができたら、PhpStorm を再起動します。

    Service-Powered Type Engine widget

  • または、Ctrl+Alt+S を押して設定を開き、設定 | 言語 & フレームワーク | TypeScript | Angular を選択し、自動を選択して、サービス駆動型エンジンを有効にするチェックボックスを選択します。

    デフォルトでは、チェックボックスはオフになっているため、型評価、解決、コードインスペクション、およびリファクタリングは、PhpStorm 内部 TypeScript エンジンからの型情報に基づいて行われます。

    このデフォルトの動作は、PhpStorm 内部の TypeScript エンジンが使用する型評価アルゴリズムが Angular 言語サービスのアルゴリズムと異なるため、パフォーマンスの問題や型解決におけるバグを引き起こす可能性があります。チェックボックスをオンにすることで、これらの問題を回避できる場合があります。

メモリ処理を構成する

PhpStorm は言語サービスとのスムーズな統合を提供することに努めていますが、PhpStorm 自体ではなく言語サービスによって引き起こされる out-of-memory エラーが発生する可能性があります。

out-of-memory エラーを防止、またはシームレスに解決して言語サービスの安定した動作を確保するには、メモリ処理を設定する必要があります。詳しくは言語サービスを参照してください。

Angular 言語サービスのメモリ処理設定は、常に TypeScript 言語サービスから継承されます。

TypeScript 言語サービスのメモリ処理を構成する

  1. Ctrl+Alt+S を押して設定を開き、設定 | 言語 & フレームワーク | 言語サービス | TypeScript に移動します。

  2. 言語サービスメモリ領域で、メモリ処理モードを選択します。

    • メモリを増やし、言語サービスを自動的に再起動するには、利用可能な場合はメモリを自動的に増加するを選択します。

    • または、メモリ制限を設定するを選択し、言語サービスで使用する最大メモリを指定します。

      指定されたメモリサイズが使用可能な RAM を超える場合、PhpStorm はツールチップに適切な値を提案します。

コンポーネント

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

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

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

Create an Angular component using a predefined code snippet

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

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

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

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

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

    Make component standalone

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

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

PhpStorm では、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. 開いたダイアログで、新しいコンポーネントの名前を指定します。

スタンドアロンコンポーネント

プロジェクトで Angular 19(英語) を使用している場合、コンポーネント、パイプ、ディレクティブはデフォルトで standalone になります。NgModules で宣言されているコンポーネントの場合は、standalone: false を設定してください。

PhpStorm は、non-standalone パイプ、ディレクティブ、コンポーネントの不正なインポートと、非スタンドアロンコンポーネント内の imports プロパティの使用を検出します。

Incorrect usage imports directives in non-standalone components

シグナル

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

Angular signals

シグナルを作成する

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

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

    Create Angular signal: inspection popup

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

    Create Angular signal: intention action

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

PhpStorm は、contentChild、contentChilden、viewChild、viewChildren シグナルクエリ(英語)を認識し、ハイライトし、ドキュメントと補完を提供し、ナビゲーションをサポートします。

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

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

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

    Angular signal: configure highlighting

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

構造ディレクティブ

PhpStorm は構造ディレクティブ(英語)を認識し、テンプレート内でハイライトを提供します。

バインディングキーとテンプレートコンテキストプロパティについては、ポップアップで補完が提案されます。

Structural directives - completion

ディレクティブ入力にマップされたテンプレートバインディングキーに対して、名前変更リファクタリングが提供されます。

属性を完了するか、Ctrl+P を押すと、パラメーター情報ポップアップが自動的に表示されます。

Structural directives - parameter info popup

ホストリスナーとバインディング

PhpStorm は、ホストリスナー(英語)とバインディング(英語)を完全にサポートします。

  • @HostListener および @HostBinding デコレータの補完、ハイライト、簡単なドキュメント化。

    Support for @HostListener and HostBinding decorators

  • @HostListener のイベント完了

    event completion for HostListeners

  • 型チェックブロック (TCB)(英語) はホストバインディング用に生成されます。

  • ホストバインディングと HTML テンプレートにわたる CSS クラスのサポート

    Usages of CSS classes in host bindings

反応型

PhpStorm は Angular 反応性フォーム(英語)のサポートを提供します。

  • new FormGroup({.. .}) および FormBuilder.group({...}) 呼び出しを使用したフィールド初期化子からネストされたフォームグループモデル構造を構築し、FormBuilder.group({...}) 呼び出しを使用したコンストラクター内のフィールド初期化も行います。

    PhpStorm は、フォームグループオブジェクト初期化子、新しいインスタンス呼び出し (FormGroup、FormControl、FormArray)、および FormBuilder メソッド内の control、group、array を認識します。

    Completion and quick doc in Reactive Forms

  • FormGroup.get() 呼び出しの場合、PhpStorm はコード補完、名前検証、不明なセグメントのクイックフィックス、文字列リテラル内の構文のハイライトを提供します。

    Completion and quick doc in FormGroup.get()

  • HTML テンプレートの formControlName、formGroupName、formArrayName、コード補完、名前検証、欠落しているコントロールを作成するためのクイックフィックス、構文のハイライト、構造の依存関係が提供されます。

    Structural dependency in Reactive Forms

段階的な水分補給

PhpStorm は Angular 19 @defer ハイドレート構文(英語)をサポートしています。

  • コード補完

    Code completion for @defer syntax

  • クイックドキュメントルックアップ

    Quick documentation for @defer syntax

  • Angular バージョン 19 より前のバージョンではエラーが報告されます。

    Error messages for @defer syntax in Angular earlier than 19

HTML テンプレートを制御フローブロックで囲む

  • Angular HTML テンプレートで、コードフラグメントを選択し、Ctrl+Alt+T を押して、リストから囲んでいるコードを選択します。

    Wrap HTML block

ngadd で新機能を追加

公開されているほとんどの Angular ライブラリ(英語)は、Angular の依存関係アクションを使用して追加できます。このアクションは ng add コマンド(英語)を実行し、依存関係をインストールして、現在の作業ディレクトリにあるアプリを更新し、その依存関係を使用するようにします。すべてのライブラリが ng add によるインストールをサポートしているわけではないことに注意してください。

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

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

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

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

    Adding Angular Material to a project with ng add

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

PhpStorm suggests adding a dependency with ng add

Angular Schematics でコード生成

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

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

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

    Choosing Angular Schematic

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

    Generating Angular CLI schematic: code completion and description is provided

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

Angular HTML テンプレートでは、パラメーターヒントはメソッドと関数のパラメーター名を表示し、コードの可読性を向上させます。テンプレートでは、ブロックパラメーターの情報は補完時に表示されます。

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

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

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

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

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

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

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

Configure parameter hints in Angular templates

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

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

重複したプロパティ

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

Angular inspection: duplicate properties

構造ディレクティブの誤った使用

PhpStorm は、*ngIf および *ngFor 構造ディレクティブの誤った使用について警告します。

Angular inspection: incorrect use of structural directive

スタンドアロンコンポーネントの使用

Angular 固有のインスペクションは、スタンドアロンコンポーネント(英語)の不適切な使用を特定できます。以下の例では、PhpStorm がスタンドアロンではないコンポーネントの import 文を検出し、問題のクイックフィックスを提案しています。

A non-standalone is imported directly

未使用のインポート

standalone コンポーネントでは、PhpStorm は未使用のコンポーネント、パイプ、ディレクティブのインポートステートメントを検出し、削除することを提案します。

Angular inspection - unused import

未使用のインポートステートメントは、ファイルの再フォーマット時に自動的に削除されることもあります (Ctrl+Alt+Shift+L)。

クイックフィックスとコンテキスト認識アクション

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

Quick-fix to generate @Input and @Output properties

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

Angular 固有のインスペクションの表示と構成

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

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

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

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

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

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

関連シンボルポップアップで移動

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

    • ナビゲーションポップアップで Goto Related をクリックします。

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

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

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

    • ナビゲーションポップアップで Goto Related をクリックします。

      Open the Go To Related Symbol popup from the navigation popup

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

    Navigating through an Angular app using the Related Symbol popup

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

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

    2. テンプレート

    3. テスト

    4. スタイル

使用箇所を移動する

  • シンボルの宣言にキャレットを置き、Ctrl+B を押します。

    シンボルが 1 回だけ使用されている場合、PhpStorm はこの使用箇所を示し、ハイライトします。

    複数の使用箇所が見つかった場合、PhpStorm はそれらをポップアップに表示します。移動する使用箇所を選択して Enter を押すか、リストでクリックします。

  • シンボルの宣言にキャレットを置き、Ctrl+Alt+F7 を押します。

    ツールバーのアイコンを使用して、インポートステートメント (the Show import statements button)、文字列リテラル (the Show Dynamic Usages button)、および HTML ファイル (the Show Component Usages icon) 内のコンポーネントへの参照を表示または非表示にします。

  • 使用方法のヒントを表示をクリックすると使用方法に移動するか、リストから関連するものを選択できます。

ナビゲーションポップアップを使用する

  • ナビゲーションポップアップを有効にするには、Ctrl+Alt+S を押して詳細設定に移動し、Angular エリアのエディターにナビゲーションポップアップを表示するチェックボックスを選択します。検索フィールドを使用すると、チェックボックスを簡単に見つけることができます。

    Disable the Angular navigation popup

  • ナビゲーションポップアップにアクセスするには、エディター内の任意の場所にマウスを移動します。ポップアップに表示されるアイコンのセットは、現在のエディタータブ内のファイルの種類と、コンポーネントに含まれるファイルによって異なります。

  • コンポーネント内のファイル間を移動するには、対応するアイコンをクリックします。たとえば、.component.html ファイルに移動するには、HTML file をクリックします。

  • ポップアップを使用して、ファイル内のスタイルとテンプレートに移動します。

  • Goto Related をクリックすると、関連ファイルのリストを含むポップアップが開きます。

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

PhpStorm は 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.json の dependencies に "@angular/material": "^16.2.11" を追加し、npm install を実行します。

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

    AInstall Angualar Material

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

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

Angular プロジェクトでは、PhpStorm は CSS クラスとプロパティ、HTML 属性とタグ、Angular 入出力バインディングなど、様々なシンボルを認識し、ハイライト表示します。これらのシンボルは、HTML 属性や JavaScript 文字列リテラルなど、様々なコンテキストでハイライト表示されます。

Highlighting symbols in various contexts

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

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

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

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

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

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

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

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

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

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

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

    • 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

  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" } }
2025 年 11 月 04 日
TypeScript をテストする Angular アプリケーションの実行とデバッグ

関連ページ：

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

プラグインは PhpStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケッ...

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

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

npm、pnpm、Yarn

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

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

潜在的なセキュリティリスクを防ぐために、PhpStorm では、プロジェクトのソースがわからない場合に、プロジェクトの操作方法を決定できます。PhpStorm は、実行されるタスクまたは構成について警告し、信頼できるソースを構成できるようにします。不明なソースからプロジェクトを開く：プロジェクトを開くと、PhpStorm を使用すると、未知ソースコードを含むプロジェクトの処理方法をすぐに決定できます。プロジェクトを初めて開くたびに、IDE にプロジェクトを信頼ダイアログが表示されます。これは、...

ソースコードの作成と編集

コードを使用する場合、PhpStorm は作業にストレスがないことを保証します。追加、選択、コピー、移動、編集、折りたたみ、出現箇所の検索、コードの保存に役立つさまざまなショートカットと機能を提供します。エディター内のナビゲーションについては、エディターの基本を参照してください。ファイルの読み取り専用属性の切り替えファイルが読み取り専用の場合、ステータスバー、エディタータブ、プロジェクトツールウィンドウで、閉じた鍵のアイコンがマークされます。ファイルが書き込み可能である場合、ステータスバーに開い...

TypeScript

PhpStorm は TypeScript ソースコードの開発、実行、デバッグをサポートします。PhpStorm は .ts および .tsx ファイルを認識し、ユーザー側で追加の手順を踏むことなく編集するためのコーディング支援を提供します。TypeScript ファイルはアイコン。TypeScript 対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の補完、エラーと構文のハイライト、フォーマット、多数のコードインスペクションとクイックフィックス、および一般的で TypeScript...