IntelliJ IDEA 2020.3 ヘルプ

Angular

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

始める前に

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

  2. 設定 / 環境設定 | プラグインページで Angular と AngularJS バンドルプラグインが有効になっていることを確認してください。詳細については、プラグインの管理を参照してください。

新しい Angular アプリケーションの作成

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

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

  1. メインメニューからファイル | 新規 | プロジェクトを選択するか、ウェルカム画面の新規プロジェクトボタンをクリックします。

  2. 新規プロジェクトダイアログで、左側のペインで JavaScript を選択します。

  3. 右側のペインで、AngularCLI を選択し、次へをクリックします。

  4. ウィザードの 2 ページ目で、プロジェクト名とそれを作成するフォルダーを指定します。Node インタープリターフィールドに、使用する Node.js インタープリターを指定します。リストから設定済みのインタープリターを選択するか、または追加を選択して新しいインタープリターを設定します。

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

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

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

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

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

  1. メインメニューからファイル | 新規 | プロジェクトを選択するか、ウェルカム画面の新規プロジェクトボタンをクリックします。

  2. 新規プロジェクトダイアログで、左側のペインで JavaScript を選択します。

  3. 右側のペインで、JavaScript を選択し、次へをクリックします。

  4. ウィザードの 2 ページ目で、プロジェクト名と作成するフォルダーを指定します。

  5. 「完了」をクリックすると、IntelliJ IDEA はのプロジェクトを作成して開きます。

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

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

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

    npm install @angular/core

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

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

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

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

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

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

バージョン管理からアプリケーションのソースを確認してください

  1. ウェルカム画面で VCS から取得をクリックするか、メインメニューから VCS | バージョン管理から取得を選択します。

  2. 呼び出されたダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。

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

Angular アプリケーションの実行とデバッグ

上記の Angular CLI で作成されたアプリケーションの場合、IntelliJ IDEA はデフォルト設定で 2 つの実行 / デバッグ構成を生成します。

  • デフォルト名が Angular CLI サーバーnpm 構成。この構成では、開発サーバーを起動してアプリケーションを開発モードで起動する ng serve コマンドを実行します。

  • デフォルト名 Angular アプリケーションJavaScript デバッグ構成。この設定はデバッグセッションを開始します。

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

  1. ツールバーのリストから Angular CLI サーバー実行構成を選択し、リストの横にある Run をクリックします。

    または、ターミナル Alt+F12npm start を実行するか、npm ツールウィンドウ表示 | ツールウィンドウ | npm)で start タスクをダブルクリックします。

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

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

    Running Angular CLI app: the Webpack Development server is ready

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

アプリケーションの作成方法と実行場所に応じて、さまざまな方法でデバッグセッションを開始できます。

Angular CLI で作成されたアプリケーションのデバッグ

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

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

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

    Start a debugging session via a run configuration

localhost で実行されているアプリケーションをデバッグする

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

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

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

    Starting a debugging session from the Run tool window

カスタム URL で実行されているアプリケーションをデバッグする

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

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

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

  4. JavaScript デバッグ構成を作成します。これを行うには、メインメニューの実行 | 実行構成の編集に移動し、the Add icon をクリックして、リストから JavaScript デバッグを選択します。実行 / デバッグ構成: JavaScript デバッグダイアログで、保存した URL を URL フィールドに貼り付け、構成を保存します。

  5. 新しく作成した構成を起動するには、構成のリストから構成を選択し、リストの横にある the Debug button をクリックします。

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

Angular アプリケーションをナビゲートする

Angular プロジェクトで作業する場合、TypeScript、テンプレート、スタイルファイルなどの異なるコンポーネントファイル間をジャンプする必要があります。IntelliJ IDEA では、ナビゲーションバープロジェクトビュー、またはファイルに移動アクション Ctrl+Shift+N を使用してそれを行うことができます。

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

さらに別の方法は関連するシンボルポップアップです。

  1. Angular コンポーネントファイルで、Ctrl+Alt+Home を押すか、メインメニューからナビゲート | 関連するシンボルまたはコンテキストメニューから移動 | 関連するシンボルを選択します。IntelliJ IDEA は、関連ファイルのリストを含む関連するシンボルポップアップを表示します。TypeScript コンポーネントファイルでは、ポップアップにはこのファイルにインポートされたすべてのシンボルもリストされます。

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

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

    2. テンプレート

    3. テスト

    4. スタイル

ng add を使用して Angular アプリケーションに新しい機能を追加する

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

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

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

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

    Adding Angular Material to a project with ng add

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

IntelliJ IDEA suggests adding a dependency with ng add

そのような依存関係がすでにインストールされている場合は、ng add を使用してそれを再インストールすることをお勧めします。 package.json ファイルで、パッケージの名前を選択し、Alt+Enter を押して、ng add で再インストールをクリックします。

Reinstalling a package with ng add

Angular Schematics を使用したコードの生成

Angular CLI 6(英語) プロジェクトでは、IntelliJ IDEA は、@angular/material のようなライブラリで定義された schematics と、Angular CLI 自体で定義された schematics の両方を使用してコードを生成することができます。以前のバージョンでは、IntelliJ IDEA は Angular CLI で定義されたコンポーネント、サービス、その他の青写真のみを生成します。

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

  2. 一覧から、該当する schematic を選択します。

    Choosing Angular Schematic

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

    Generating Angular CLI schematic: code completion and description is provided

Angular アプリケーションコードのインスペクション

IntelliJ IDEA には、コードを編集してエラーを素早く修正する際にエラーを見つけるのに役立つ、Angular 固有のインスペクションが多数用意されています。

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

Angular inspection: duplicate properties

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

Angular inspection: incorrect use of structural directive

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

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

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

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

Angular マテリアルコンポーネントの使用

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

  • コンポーネントの補完

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

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

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

構文ハイライトの構成

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

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、エディター | カラースキーム | Angular テンプレートに移動します。

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

関連ページ:

プラグインを管理する

このサイトのメニューやアクション名表記は日本語です。IntelliJ IDEA を日本語化するには、日本語言語パックのインストールを参照してください。プラグインは以下に示すように IntelliJ IDEA のコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、コーディング演習と検証で新しい...

npm、pnpm、Yarn

IntelliJ IDEA は npm、Yarn、Yarn 2、pnpm と統合されているため、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。Node.js と NPM ページは、パッケージを管理するための専用 UI を提供します。もちろん、組み込みのターミナルのコマンドラインからも実行できます。IntelliJ IDEA では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。IntelliJ IDEA は、package.jso...

実行 / デバッグ構成: NPM

このダイアログで、npm および Yarn スクリプトをローカルで実行するための構成を作成します。現在のコンテキストでの「ローカル」とは、IntelliJ IDEA 自体がコンピューターにインストールされた Node.js を開始し、スクリプトの実行を開始することを意味します。npm、pnpm、Yarn の詳細を参照してください。始める前に:Node.js をダウンロードしてインストールします。npm もインストールされ、それを使用する場合は準備完了です。Yarn を使用するには、Yarn オフィシャル W...

デバッグツールウィンドウ

デバッガーセッションを開始すると、デバッグツールウィンドウが表示されます。このウィンドウを使用して、デバッガーセッションを制御し、プログラムデータ(フレーム、スレッド、変数など)を表示して分析し、さまざまなデバッガーアクションを実行します。これは、デバッグツールウィンドウの概要です。ツールウィンドウの使用に関する一般的な手順については、ツールウィンドウを参照してください。デフォルトでは、プログラムがブレークポイントに到達するとデバッグツールウィンドウが開き、セッションが終了しても非表示にはなりま...

デバッガーセッションを開始する

デバッガーセッションの開始は、通常モードでのプログラムと非常に似ています。デバッガーはバックグラウンドで接続されているため、デバッガーセッションを開始するために特別な設定を行う必要はありません。IntelliJ IDEA からプログラムを実行できる場合は、同じ構成を使用してプログラムをデバッグすることもできます。このトピックは、実行 / デバッグ構成の理解に依存しています。IntelliJ IDEA は追加のセットアップなしで単純なアプリケーションをデバッグする方法を提供しますが、デバッガーを効...

中断されたプログラムを調べる

デバッガーセッションの開始後、デバッグツールウィンドウが表示され、次のいずれかが発生するまでプログラムが正常に実行されます。ブレークポイントがヒットしました、プログラムを手動で一時停止する、その後、プログラムは中断され、現在の状態を調べたり、実行を制御したり、実行時にさまざまなシナリオをテストしたりできます。誤ってデバッグツールウィンドウを閉じた場合は、メインメニューからを選択するか、を押して再度開きます。フレームを調べる:プログラムの状態はフレームで表されます。プログラムが一時停止すると、