はじめてのAngularアプリケーション(Quick Start)

下記のAngularの「Quick Start」を試してみます。

Quick Start に沿って試す

前提条件

まず、Angularには、Node.js バージョン8.xまたは10.xが必要です。

下記でインストールされているか、とバージョンが確認できます。

[~/workspace] $ node --version
v10.11.0

あとは、Node.jsと一緒にインストールされますが、パッケージマネージャのnpmも必要です。

下記でインストールされているか、とバージョンが確認できます。

[~/workspace] $ npm -v
6.4.1

STEP0: 空のプロジェクト作成

本家の Quick Start では、いきなりアプリケーション作成していますが、

  • STEP1の Angular CLI をグローバルにインストールしたくない

ので、空のプロジェクトを作成して、その中にアプリケーションを作っていきます。

[~/workspace] $ mkdir angular-quickstart
[~/workspace] $ cd angular-quickstart/
[~/workspace/angular-quickstart] $ npm init -y

STEP1: Angular CLIのインストール

Angular CLI をインストールします。

STEP0で書いたとおり、ローカルにインストールします。

[~/workspace/angular-quickstart] $ npm install --save-dev @angular/cli

STEP2: 初期アプリケーションの作成

Angular CLI を使って、初期アプリケーションを作成します。

[~/workspace/angular-quickstart] $ npx ng new my-app

STEP3: アプリを起動する

初期アプリケーションには「Welcome to my-app!」が含まれているので、起動してそのアプリを確認できます。

[~/workspace/angular-quickstart] $ cd my-app
[~/workspace/angular-quickstart/my-app] $ npx ng serve --open

実行して、下記の画像が表示されれば成功です。

welcome

Quick Startで何ができたか

できたもの一覧

「node_modules」は省いてますが、下記ができたもの一覧です。

番号を振ってあるところを調べたので説明していきます。

.
├── my-app
│   ├── README.md
│   ├── angular.json ・・・(1)
│   ├── e2e ・・・(4)
│   │   ├── protractor.conf.js
│   │   ├── src
│   │   │   ├── app.e2e-spec.ts
│   │   │   └── app.po.ts
│   │   └── tsconfig.e2e.json
│   ├── package-lock.json
│   ├── package.json
│   ├── src ・・・(2)
│   │   ├── app
│   │   │   ├── app.component.css
│   │   │   ├── app.component.html
│   │   │   ├── app.component.spec.ts
│   │   │   ├── app.component.ts
│   │   │   └── app.module.ts
│   │   ├── assets
│   │   ├── browserslist
│   │   ├── environments
│   │   │   ├── environment.prod.ts
│   │   │   └── environment.ts
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   ├── karma.conf.js
│   │   ├── main.ts
│   │   ├── polyfills.ts
│   │   ├── styles.css
│   │   ├── test.ts
│   │   ├── tsconfig.app.json ・・・(3)
│   │   ├── tsconfig.spec.json
│   │   └── tslint.json
│   ├── tsconfig.json ・・・(3)
│   └── tslint.json ・・・(5)
├── package-lock.json
└── package.json

(1) angular.json : Angularの設定

angular.jsonはAngularの設定です。Angular CLIのngコマンドは、この設定に従って動作します。このファイル自体もAngular CLIのngコマンドで初期設定が作成されるので不思議ですが、Angular CLIの動作をカスタマイズできます。

たくさんの設定があるので、他の記事で詳しく調べて行きたいと思いますが、

$ npx ng new my-app

で作成されるのが、「ワークスペース」と「アプリケーション」ということに気づくまで、”projects”や”root”がよくわかりませんでした。「ng new」はワークスペースとアプリケーションの区別が意識されないので、使っては駄目です。

(2) src : ソース

モジュールやコンポーネントはこのsrcディレクトリの配下に格納されます。この設定もangular.jsonに記述されています。

(3) tsconfig.json : TypeScriptの設定

tsconfig.jsonにはTypeScriptのトランスパイルに関する設定が記述されています。

tsconfig.app.jsonにも設定が記述されていますが、tsconfig.jsonを拡張する形で設定が記述されています。

  • my-app/tsconfig.jsonは、ワークスペースの設定
  • my-app/src/tsconfig.app.jsonは、アプリケーションの設定

となっています。わかりにくいですね。ここでも「ng new」でワークスペースとアプリケーションを同時に作ってしまったことに問題あります。なので、なおさら「ng new」は使っては駄目です。

(4) e2e : ブラウザを使ったテストコード

e2eは、ブラウザを使った自動テストのコードです。設定はangular.jsonにかかれています。

ほとんどの開発アプリでは、ここまでのテストツールは使うことはないです。

「–minimal」をオプションで付与してアプリケーションを作れば、生成されません。

(5) tslint.json : 静的コード解析ツールの設定

tslint.jsonは静的コード解析ツールの設定です。