VS Codeのエージェントモードを拡張するには、を試してください！

Visual Studio Code で Angular を使用する

Angular は、Google によって開発および保守されている人気の Web 開発プラットフォームです。Angular は、主要なプログラミング言語として TypeScript を使用します。Visual Studio Code エディターは、TypeScript の IntelliSense とコードナビゲーションを標準でサポートしているため、他の拡張機能をインストールすることなく Angular 開発を行うことができます。

Welcome to app

注: Angular 開発を始めるのに役立つように、便利な拡張機能、設定、コードスニペットを含む Angular プロファイルテンプレートを使用できます。

Angular へようこそ

このチュートリアルでは、Angular CLI を使用します。コマンドラインインターフェイスをインストールして使用し、Angular アプリケーションサーバーを実行するには、Node.js JavaScript ランタイムと npm (Node.js パッケージマネージャー) がインストールされている必要があります。npm は Node.js に含まれており、Node.js のダウンロードからインストールできます。

ヒント: マシンに Node.js と npm が正しくインストールされているかテストするには、node --version と npm --version を入力します。

Angular CLI をインストールするには、ターミナルまたはコマンドプロンプトで次のように入力します

npm install -g @angular/cli

インストールには数分かかる場合があります。これで、次のように入力して新しい Angular アプリケーションを作成できます

ng new my-app

my-app は、アプリケーションのフォルダー名です。ng new コマンドは、生成されるアプリケーションのオプションを尋ねてきます。デフォルトを受け入れるには、Enter キーを押してください。 TypeScript で Angular アプリケーションを作成し、その依存関係をインストールするのに数分かかる場合があります。

新しいフォルダーに移動し、ng serve と入力して Web サーバーを起動し、ブラウザーでアプリケーションを開くことで、Angular アプリケーションをすばやく実行してみましょう

cd my-app
ng serve

ブラウザーの https://:4200 に "Welcome to app!!" と表示されるはずです。VS Code でアプリケーションを確認している間、Web サーバーは実行したままにしておきます。

VS Code で Angular アプリケーションを開くには、別のターミナル (またはコマンドプロンプト) を開き、my-app フォルダーに移動して code . と入力します

cd my-app
code .

構文ハイライトと括弧の照合

次に、src\app フォルダーを展開し、app.component.ts ファイルを選択します。VS Code がさまざまなソースコード要素の構文を強調表示していることに気づくでしょう。また、カーソルを括弧の上に置くと、対応する括弧も選択されます。

angular bracket matching

IntelliSense

ファイル内のテキストの上にマウスをホバーすると、VS Code がソースコード内の主要な項目に関する情報を提供することがわかります。変数、クラス、Angular デコレーターなどは、この情報が表示される例の一部です。

angular decorator hover

app.component.ts で入力を始めると、スマートな提案やコードスニペットが表示されます。

angular suggestions

情報ボタン (i) をクリックすると、より多くのドキュメントを含むフライアウトが表示されます。

angular intellisense

VS Code は、コードインテリジェンス (IntelliSense) に TypeScript 言語サービスを使用しており、自動型取得 (ATA) という機能があります。ATA は、package.json で参照されている npm モジュールの npm 型定義ファイル (*.d.ts) をプルダウンします。

定義へ移動、定義をピーク

TypeScript 言語サービスを通じて、VS Code はエディター内で[定義へ移動] (F12) や[定義をここに表示] (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)) を通じて型定義情報を提供することもできます。app.module.ts ファイルを開き、bootstrap プロパティ宣言内の AppComponent にカーソルを合わせ、右クリックして[定義をここに表示] を選択します。Peek ウィンドウが開き、app.component.ts からの AppComponent の定義が表示されます。

angular peek definition

Escape を押してピークウィンドウを閉じます。

Hello World

サンプルアプリケーションを "Hello World" に更新しましょう。app.component.ts ファイルに戻り、AppComponent の title 文字列を "Hello World" に変更します。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Hello World';
}

app.component.ts ファイルを保存すると、実行中のサーバーのインスタンスが Web ページを更新し、"Welcome to Hello World!!" と表示されます。

ヒント: VS Code は自動保存をサポートしており、デフォルトでは遅延後にファイルを保存します。[ファイル] メニューの [自動保存] オプションをオンにするか、files.autoSave ユーザー設定を直接構成してください。

hello world

Angular のデバッグ

クライアント側の Angular コードをデバッグするには、組み込みの JavaScript デバッガーを使用します。

注: このチュートリアルでは、Edge ブラウザーがインストールされていることを前提としています。Chrome を使用してデバッグしたい場合は、起動 type を chrome に置き換えてください。Firefox ブラウザー用のデバッガーもあります。

ブレークポイントを設定する

app.component.ts にブレークポイントを設定するには、行番号の左側にあるガターをクリックします。これにより、赤い丸として表示されるブレークポイントが設定されます。

set a breakpoint

デバッガーを構成する

最初にデバッガーを構成する必要があります。そのためには、[実行とデバッグ] ビュー (⇧⌘D (Windows、Linux Ctrl+Shift+D)) に移動し、[create a launch.json file] リンクを選択して launch.json デバッガー構成ファイルを作成します。[Select debugger] ドロップダウンリストから Web App (Edge) を選択します。これにより、プロジェクトの新しい .vscode フォルダーに、Web サイトを起動するための構成を含む launch.json ファイルが作成されます。

この例では 1 つ変更が必要です。url のポートを 8080 から 4200 に変更します。launch.json は次のようになります。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "https://:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

F5 を押すか、緑色の矢印をクリックしてデバッガーを起動し、新しいブラウザーインスタンスを開きます。ブレークポイントが設定されているソースコードは、デバッガーがアタッチされる前に起動時に実行されるため、Web ページを更新するまでブレークポイントにはヒットしません。ページを更新すると、ブレークポイントにヒットするはずです。

hit breakpoint

ソースコードをステップスルー (F10) したり、AppComponent などの変数を検査したり、クライアント側の Angular アプリケーションのコールスタックを確認したりできます。

debug variable

デバッガーとその利用可能なオプションの詳細については、ブラウザーデバッグに関するドキュメントを参照してください。

Angular プロファイルテンプレート

プロファイルを使用すると、現在のプロジェクトやタスクに応じて、拡張機能、設定、UI レイアウトをすばやく切り替えることができます。Angular 開発を始めるのに役立つように、便利な拡張機能と設定がまとめられたプロファイルである Angular プロファイルテンプレートを使用できます。プロファイルテンプレートをそのまま使用することも、独自のワークフローに合わせてさらにカスタマイズするための出発点として使用することもできます。

プロファイルテンプレートは、プロファイル > プロファイルの作成... ドロップダウンから選択します。

Create Profile dropdown with profile templates

プロファイルテンプレートを選択すると、設定と拡張機能を確認し、新しいプロファイルに含めたくない個々の項目を削除できます。テンプレートに基づいて新しいプロファイルを作成した後、設定、拡張機能、または UI に加えられた変更はプロファイルに保持されます。

人気のスターターキット

このチュートリアルでは、Angular CLI を使用して単純な Angular アプリケーションを作成しました。最初の Angular アプリケーションを構築するのに役立つ、優れたサンプルやスターターキットがたくさんあります。

レシピ

VS Code チームは、より複雑なデバッグシナリオのためのレシピを作成しました。そこには、Angular CLI でのデバッグレシピがあり、これも Angular CLI を使用し、生成されたプロジェクトの単体テストのデバッグについて詳しく説明しています。

MEAN スターター

完全な MEAN (MongoDB, Express, Angular, Node.js) スタックの例を見たい場合は、MEAN.JS をご覧ください。そこにはドキュメントとサンプル MEAN プロジェクト用のアプリケーションジェネレーターがあります。MongoDB をインストールして起動する必要がありますが、すぐに MEAN アプリケーションを実行できます。VS Code には、Azure Databases 拡張機能による優れた MongoDB サポートもあります。

React

React はユーザーインターフェイスを構築するためのライブラリであり、Angular よりもミニマルです。VS Code で React を使用する例を見たい場合は、VS Code で React を使用するチュートリアルをご覧ください。React アプリケーションの作成と、JavaScript デバッガー用の launch.json ファイルの構成について説明します。

Angular 拡張機能

VS Code が標準で提供する機能に加えて、VS Code 拡張機能をインストールして、より高度な機能を利用できます。

上の拡張機能タイルをクリックして、Marketplace で説明とレビューを読んでください。

他の Angular 拡張機能を見つけるには、拡張機能ビュー (⇧⌘X (Windows、Linux Ctrl+Shift+X)) を開き、「angular」と入力して、Angular 拡張機能のフィルターされたリストを表示します。

angular extensions

コミュニティは、便利な拡張機能 (リンター、デバッガー、スニペットなど) を 1 つのダウンロードにまとめた「拡張機能パック」も作成しています。利用可能な Angular 拡張機能パックを確認するには、フィルターに「拡張機能パック」カテゴリを追加します (angular @category:"extension packs")。

08/07/2025