Visual Studio Code での Angular の利用

Angular は、Google が開発・保守している人気のウェブ開発プラットフォームです。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 キーを押してデフォルト設定を受け入れます。Angular アプリケーションを TypeScript で作成し、依存関係をインストールするのに数分かかる場合があります。

作成されたフォルダーに移動し、ng serve と入力してウェブサーバーを起動し、ブラウザーでアプリケーションを開いて、Angular アプリケーションを素早く実行してみましょう。

cd my-app
ng serve

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

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 にカーソルを合わせ、右クリックして定義をプレビューを選択します。プレビューウィンドウが開き、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 ファイルを保存すると、実行中のサーバーがウェブページを更新し、「Welcome to Hello World!!」と表示されます。

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

hello world

Angular のデバッグ

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

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

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

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

set a breakpoint

デバッガーの設定

最初にデバッガーを設定する必要があります。これを行うには、実行とデバッグビュー (⇧⌘D (Windows, Linux Ctrl+Shift+D)) に移動し、launch.json ファイルを作成します リンクを選択して launch.json デバッガー設定ファイルを作成します。デバッガーの選択ドロップダウンリストから Web App (Edge) を選択します。これにより、プロジェクト内の新しい .vscode フォルダーに 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 キーまたは緑色の矢印を押してデバッガーを起動し、新しいブラウザーインスタンスを開きます。ブレークポイントが設定されたソースコードはデバッガーがアタッチされる前の起動時に実行されるため、ウェブページを更新するまでブレークポイントには到達しません。ページを更新すると、ブレークポイントで停止するはずです。

hit breakpoint

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

debug variable

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

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

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

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

プロファイルテンプレートを選択したら、設定と拡張機能をレビューし、新しいプロファイルに含めたくない個々の項目を削除できます。テンプレートに基づいた新しいプロファイルを作成した後、設定、拡張機能、または UI に行われた変更はプロファイルに永続化されます。

Angular 拡張機能

VS Code が標準で提供する機能に加えて、VS Code 拡張機能をインストールすることで機能を拡張できます。

上の拡張機能のタイルをクリックすると、Marketplace 上の説明とレビューを読むことができます。

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

angular extensions

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

5/28/2026