Chapter 01

はじめに

lacolaco
lacolaco
2021.05.18に更新

この本について

この本はAngularアプリケーション開発のためのブラウザ拡張 Angular DevTools の基本的な使い方を日本語で解説するガイドです。

執筆時のAngular DevToolsのバージョンは 1.0.0 です。

対象読者

  • Angular DevToolsで何ができるのかを知りたい方
  • Angular DevToolsの基本的な使い方を知りたい方

著者情報

lacolaco / Suguru Inatomi

Angular DevToolsとは?

Angular DevToolsとは、Angularアプリケーション特有のデバッグやプロファイリング機能を有した、Angularチーム謹製の開発者ツールです。

開発者はAngular DevToolsによってアプリケーションの構造を理解し、ディレクティブとコンポーネントの状態をデバッグできます。また、プロファイル機能によってコンポーネントの変更検知サイクルやそれらのトリガー、およびAngularがそれらに費やした時間などが表示され、アプリケーションの実行時パフォーマンスを分析できます。

まずは公式ブログでのアナウンスと紹介動画をご覧ください。

https://goo.gle/angular-devtools

https://youtu.be/bavWOHZM6zE

公式ドキュメントでも基本的な使い方がわかります。

https://angular.io/guide/devtools

この本ではそれぞれの機能についてもう少し詳しく紹介し、どのように使うと効果的か解説します。

インストール

Angular DevToolsはChromeエクステンションとして配布されており、Chromeの開発者ツールの一部として利用できます。

Chrome Web Store

インストールを完了すると、開発者ツールに"Angular"タブが追加されます。

事前準備: Angularの開発モード

Angularアプリケーションには開発モードとプロダクションモードがあり、Angular DevToolsが利用できるのは開発モードで起動された場合だけです。デフォルトでは開発モードが有効であり、Angular CLIで作成されたプロジェクトであれば ng serve コマンドで実行すればAngular DevToolsを利用できます。一方、enableProdMode() を呼び出して起動される場合はプロダクションモードとなるため、Angular DevToolsを利用できません。

main.ts
// Angular CLIにより生成される典型的な main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { environment } from './environments/environment';
import { AppModule } from './app/app.module';

// プロダクションモードを有効にする = 開発モードを無効にする
if (environment.production) {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Angular DevToolsはバージョン9から導入されたIvyの上に成り立っています。そのため、Angular バージョン9以前のバージョンや、Ivyが無効化されたアプリケーションでは使用できないことに注意しましょう。