Visual Studio Code での Angular の使用

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

注: 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

ブラウザーの http://localhost:4200 に「Welcome to app!!」と表示されるはずです。VS Code でアプリケーションを見ながら、Web サーバーを実行したままにします。

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

cd my-app
code .

構文の強調表示と括弧のマッチング

次に、src\app フォルダーを展開し、app.component.ts ファイルを選択します。VS Code にはさまざまなソースコード要素の構文の強調表示があり、括弧にカーソルを合わせると、一致する括弧も選択されていることに気付くでしょう。

IntelliSense

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

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

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

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 定義が表示されます。

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 ユーザー 設定 を直接構成します。

Angular のデバッグ

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

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

ブレークポイントの設定

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

デバッガーの構成

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

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

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

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

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

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

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

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

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

プロファイルテンプレートを選択すると、設定と拡張機能を確認し、新しいプロファイルに含めたくない場合は個々の項目を削除できます。テンプレートに基づいて新しいプロファイルを作成した後、設定、拡張機能、または 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 拡張機能のフィルター処理されたリストを表示します。

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