2017-07-11

Angular4 + TypeScript ことはじめ

Angular4 + TypeScript の環境を @angular/cli という CLI でサクッと作れるようなので試してみた。

Angular のバージョンについて

Angular は v1 系を「AngularJS」と呼称し、v2 系以降、2017年7月現在の最新版である v4 系を「Angular」と呼称する。v3 系は存在せず、v2 系から v4 系に一気にバージョンアップした。以降は半年ごとにメジャーバージョンアップするようだ。

v2 系から「Angular CLI」が用意されたのだが、v2 系の Angular CLI は「angular-cli」というパッケージ名で、こちらは既に更新が停止している。一方、v4 系以降の Angular CLI は「@angular/cli」というパッケージ名なので注意。@angular/cli を使う場合は、angular-cli と同じコマンドを使うために共存ができないので、angular-cli が既にグローバルインストールされていればアンインストールし、@angular/cli をインストールする必要がある。

作業環境

MacOS Sierra
Mac 標準のターミナル

Windows マシンでやる場合は「Mac 標準のターミナル」の代わりに「GitBash」を入れて使えば OK。

事前環境確認

作業を始める前に、Node.js・npm のバージョンを確認する。あまり古いと @angular/cli などが動かないようなので、それなりに新しめのモノを用意すること。

Windows なら Nodist、Mac なら Nodebrew で Node.js・npm のバージョン管理をするとよろし。

Node.js をバージョン管理できる体制でインストールする

自分は以下の環境で進める。

$ node -v
v6.11.0

$ npm -v
3.10.10

@angular/cli をインストールする

まずは Angular4 を CLI で操作できる @angular/cli をグローバルインストールする。

$ npm i -g @angular/cli

# インストールされたか確認する
$ ng -v

これだけ。

使えるコマンドは ng help および、ng help (サブコマンド名) で確認することができる。

Angular4 アプリの雛形を生成する

ng new コマンドで、Angular4 アプリを作るための作業ディレクトリの作成・Git・npm の初期設定などを一括でやってくれる。

オプションで、ルーティングの設定ファイルと、スタイルシートに SCSS ファイルを作るように指定しておく。

$ ng new MyApp --routing --style scss

  # この辺が勝手に行われているイメージ
  $ mkdir MyApp && cd $_
  $ git init
  $ npm init -y
  # あと諸々の雛形ファイルの作成

# 作成されたディレクトリに移動する
$ cd MyApp/

# インストールされている npm パッケージを眺めてみたりする…
$ npm ls --depth=0

Angular4 アプリが動くか確認する

$ ng serve コマンドで、簡易サーバを立ち上げることができる。

$ ng serve

http://localhost:4200/ にアクセスして、サンプルページが表示されていたら OK。

コンソールは起動したままになっており、Live-Reload が標準装備されている。ファイルを更新すると自動的に再ビルドしてくれる。終了する時は Ctrl + C。

ひとまずこれで、Angular4 + TypeScript なアプリの雛形が確認できた。以降は @angular/cli が提供する Scaffolding 機能 (ng generate コマンド) を使ってサクッとソースを自動生成し、サクッとアプリ開発を進めていこうと思う。