Angular
Angular(英語) は、クロスプラットフォームアプリケーションを構築するための一般的なフレームワークです。IntelliJ IDEA は Angular のサポートを提供し、新しい Angular アプリの作成やコンポーネントの作業からデバッグやテストまで、開発プロセスのすべてのステップで役立ちます。
始める前に
Node.js(英語) をダウンロードしてインストールします。
設定 / 環境設定 | プラグインページで Angular と AngularJS バンドルプラグインが有効になっていることを確認してください。詳細については、プラグインの管理を参照してください。
新しい Angular アプリケーションの作成
新しい Angular アプリケーションの構築を開始するための推奨される方法は Angular CLI(英語) です。これは、IntelliJ IDEA が npx(英語) を使用してダウンロードして実行します。その結果、アプリケーションは、すぐに使用できる TypeScript および Webpack 構成でブートストラップされます。
もちろん、Angular CLI を自分でダウンロードするか、空の IntelliJ IDEA プロジェクトを作成して Angular をインストールできます。
メインメニューから新規プロジェクトボタンをクリックします。
を選択するか、ウェルカム画面の新規プロジェクトダイアログで、左側のペインで JavaScript を選択します。
右側のペインで、AngularCLI を選択し、次へをクリックします。
ウィザードの 2 ページ目で、プロジェクト名とそれを作成するフォルダーを指定します。Node インタープリターフィールドに、使用する Node.js インタープリターを指定します。リストから設定済みのインタープリターを選択するか、または追加を選択して新しいインタープリターを設定します。
Angular CLI リストから、npx --package @angular/ cli ng を選択します。
または、npm バージョン 5.1 以前の場合、ターミナル Alt+F12 で
npm install -g @angular/cli
を実行して、@angular/cli
パッケージを自分でインストールします。アプリケーションを作成するときに、@angular/cli
パッケージが保存されているフォルダーを選択します。オプションで、追加パラメーターフィールドに、Angular CLI に渡す追加の新しいオプション(英語)を指定します。このフィールドではコード補完を使用できます。オプションの名前を入力するか、Ctrl+Space を押すと、IntelliJ IDEA に使用可能なオプションとその説明が表示されます。
完了をクリックすると、IntelliJ IDEA は、必要なすべての構成ファイルを含む Angular 固有のプロジェクトを生成し、必要な依存関係をすべてダウンロードします。
空の IntelliJ IDEA プロジェクトを作成する
メインメニューから新規プロジェクトボタンをクリックします。
を選択するか、ウェルカム画面の新規プロジェクトダイアログで、左側のペインで JavaScript を選択します。
右側のペインで、JavaScript を選択し、次へをクリックします。
ウィザードの 2 ページ目で、プロジェクト名と作成するフォルダーを指定します。
「完了」をクリックすると、IntelliJ IDEA は空のプロジェクトを作成して開きます。
空のプロジェクトに Angular をインストールする
Angular を使用する空のプロジェクトを開きます。
埋め込みターミナル(Alt+F12)に次のように入力します。
npm install @angular/core
これにより、フレームワークの重要なランタイム部分とともにコア Angular パッケージがインストールされます。
Angular の一部である他のパッケージをインストールする必要がある場合もあります。パッケージ(英語)のリスト(英語)を参照してください。
既存の Angular アプリケーションから開始する
既存の Angular アプリケーションの開発を継続するには、IntelliJ IDEA で開き、必要な依存関係をダウンロードします。
すでにマシン上にあるアプリケーションソースを開く
ウェルカム画面で開くまたはインポートをクリックするか、メインメニューから を選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。
バージョン管理からアプリケーションのソースを確認してください
ウェルカム画面で VCS から取得をクリックするか、メインメニューから を選択します。
呼び出されたダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。
依存関係をダウンロードする
ポップアップで実行 'npm install' または実行 'yarn install' をクリックします。
npm(英語)、Yarn 1(英語)、または Yarn 2(英語) を使用できます。詳細については、npm および Yarn を参照してください。
Angular アプリケーションの実行とデバッグ
上記の Angular CLI で作成されたアプリケーションの場合、IntelliJ IDEA はデフォルト設定で 2 つの実行 / デバッグ構成を生成します。
デフォルト名が Angular CLI サーバーの npm 構成。この構成では、開発サーバーを起動してアプリケーションを開発モードで起動する
ng serve
コマンドを実行します。デフォルト名 Angular アプリケーションの JavaScript デバッグ構成。この設定はデバッグセッションを開始します。
Angular アプリケーションを実行する
ツールバーのリストから Angular CLI サーバー実行構成を選択し、リストの横にある
をクリックします。
または、ターミナル Alt+F12 で
npm start
を実行するか、npm ツールウィンドウ( )でstart
タスクをダブルクリックします。アプリケーションがコンパイルされ、Webpack 開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。デフォルトでは http://localhost:4200/ です。このリンクをクリックして、アプリケーションを表示します。
Angular アプリケーションをデバッグする
アプリケーションの作成方法と実行場所に応じて、さまざまな方法でデバッグセッションを開始できます。
Angular CLI で作成されたアプリケーションのデバッグ
コードにブレークポイントを設定します。
上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。
リストから自動生成された Angular アプリケーション構成を選択し、リストの横にある
をクリックします。
localhost で実行されているアプリケーションをデバッグする
コードにブレークポイントを設定します。
上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。デフォルトでは http://localhost:4200/ です。 Ctrl+Shift を押したまま、この URL リンクをクリックします。IntelliJ IDEA は、タイプ JavaScript デバッグの自動生成された Angular アプリケーション構成でデバッグセッションを開始します。
カスタム URL で実行されているアプリケーションをデバッグする
コードにブレークポイントを設定します。
上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて Webpack 開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。この URL アドレスをコピーします。後でデバッグ構成で指定します。アプリケーションを表示するには、リンクをクリックしてください。
JavaScript デバッグ構成を作成します。これを行うには、メインメニューの に移動し、
をクリックして、リストから JavaScript デバッグを選択します。実行 / デバッグ構成: JavaScript デバッグダイアログで、保存した URL を URL フィールドに貼り付け、構成を保存します。
新しく作成した構成を起動するには、構成のリストから構成を選択し、リストの横にある
をクリックします。
最初のブレークポイントに到達したら、デバッグツールウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断したときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示します。
Angular アプリケーションをナビゲートする
Angular CLI QuickSwitch プラグイン(英語)をダウンロードしてコンピューターにインストールすることもできます。
さらに別の方法は関連するシンボルポップアップです。
Angular コンポーネントファイルで、Ctrl+Alt+Home を押すか、メインメニューから関連するシンボルポップアップを表示します。TypeScript コンポーネントファイルでは、ポップアップにはこのファイルにインポートされたすべてのシンボルもリストされます。
またはコンテキストメニューから を選択します。IntelliJ IDEA は、関連ファイルのリストを含むファイルを開くには、ファイルを選択して Enter を押します。または、各ファイルの種類に関連付けられている番号を使用します。
コンポーネントクラスを含む TypeScript ファイル
テンプレート
テスト
スタイル
ng add を使用して Angular アプリケーションに新しい機能を追加する
Angular CLI 6(英語) 以降を使用するプロジェクトでは、Angular の依存関係アクションを使用して新しいライブラリを追加できます。このアクションは ng add
コマンドを実行します。このコマンドは依存関係をインストールし、特別なインストールスクリプトでアプリを更新します。すべてのライブラリが ng add
によるインストールをサポートしているわけではないことに注意してください。
メインメニューからプロジェクトツールウィンドウで Alt+Insert を押してから Angular の依存関係を選択します。
を選択するか、またはリストから、追加するライブラリを選択します。リストには、
ng add
で確実にインストールできるライブラリが表示されます。リストにないパッケージをインストールするには、その末尾までスクロールして上記にないパッケージをインストールするリンクをダブルクリックし、表示されるダイアログでパッケージ名を指定します。以下の例は、Angular マテリアルをプロジェクトに追加する方法を示しています。
package.json を使って手動で依存関係を管理している場合でも、IntelliJ IDEA は ng add
をサポートするパッケージを認識します。 package.json にそのようなパッケージを追加すると、IntelliJ IDEA は ng add
と一緒にそれをインストールすることを提案します。

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

Angular Schematics を使用したコードの生成
Angular CLI 6(英語) プロジェクトでは、IntelliJ IDEA は、@angular/material
のようなライブラリで定義された schematics と、Angular CLI 自体で定義された schematics の両方を使用してコードを生成することができます。以前のバージョンでは、IntelliJ IDEA は Angular CLI で定義されたコンポーネント、サービス、その他の青写真のみを生成します。
メインメニューからプロジェクトツールウィンドウで Alt+Insert を押してから Angular Schematic を選択します。
を選択するか、または一覧から、該当する schematic を選択します。
表示されたダイアログで、生成する schematic の名前と、必要に応じて追加オプションを指定します。IntelliJ IDEA は schematic の説明を示し、コード補完と利用可能なオプションの説明を提供します。
Angular アプリケーションコードのインスペクション
IntelliJ IDEA には、コードを編集してエラーを素早く修正する際にエラーを見つけるのに役立つ、Angular 固有のインスペクションが多数用意されています。
以下の例では、template
と templateUrl
の両方のプロパティが使用されています。IntelliJ IDEA はエラーを検出し、それについて警告し、迅速な解決策を提案します。

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

Angular 固有のインスペクションのリストを表示して構成する
設定 / 環境設定ダイアログ Ctrl+Alt+S で、 に移動します。
Angular ノードを展開します。
インスペクションのプロファイルと重大度を設定し、事前定義のインスペクションを無効にして抑制し、コードインスペクションの説明に従ってカスタムのものを作成します。
Angular マテリアルコンポーネントの使用
IntelliJ IDEA は Angular マテリアル(英語)のコンポーネントと属性を認識し、コーディング支援を提供します。
コンポーネントの補完
属性の補完
コンポーネントまたは属性とその宣言の間のナビゲーション( Ctrl+B を押すか、コンテキストメニューから
を選択します)。
Angular マテリアルをインストール
埋め込みターミナル(Alt+F12)に次のように入力します。
Angular CLI バージョン 6 以降の
ng add @angular/material
Angular CLI の以前のバージョンの
npm install --save @angular/material
Angular マテリアルの公式 Web サイトでの開始(英語)の詳細を参照してください。
構文ハイライトの構成
好みや習慣に応じて Angular 対応の構文ハイライトを設定することができます。
設定 / 環境設定ダイアログ Ctrl+Alt+S で、 に移動します。
配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、または色とフォントの構成の説明に従ってカスタマイズします。
関連ページ:

プラグインを管理する
このサイトのメニューやアクション名表記は日本語です。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 は追加のセットアップなしで単純なアプリケーションをデバッグする方法を提供しますが、デバッガーを効...

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