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

ブラウザーの 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にはさまざまなソースコード要素の構文強調表示があり、括弧にカーソルを置くと、対応する括弧も選択されることに気付くでしょう。

IntelliSense

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

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

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

VS Codeは、コードインテリジェンス (IntelliSense) にTypeScript言語サービスを使用しており、Automatic Type Acquisition (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)を選択します。これにより、プロジェクトの新しい .vscode フォルダーに launch.json ファイルが作成され、Webサイトを起動するための構成が含まれます。

例のために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ページをリフレッシュするまでブレークポイントにヒットしません。ページをリフレッシュすると、ブレークポイントにヒットするはずです。

ソースコードをステップ実行 (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拡張機能をインストールしてより優れた機能を利用できます。

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

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

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