Angularの特徴とは？ 開発環境を構築するには？：Angular TIPS
人気のJavaScriptフレームワーク「Angular」の基本機能を目的別リファレンスの形式でまとめる連載の第1回【v4以降対応】。まずはその特徴とインストール方法を説明する。
※現在では、Web標準技術を利用したアプリ開発が広く普及し、そのためのフレームワークも多数存在しています。その中でも主流のフレームワークの1つである「Angular」を活用し、そのための知識を備えることには大きな意味があります。本連載は、Angularユーザーに向けて、その使いこなしTIPSを紹介するものです。なお、本連載は「Build Insider」で公開していた連載「Angular Tips」を同サイトおよび筆者の了解を得たうえで、本フォーラムに移行したものです。記事はBuild Insiderで公開した状態のまま移行しているため、用語統一などの基準が＠ITの通常の記事とは異なる場合があります。
Angularとは、グーグル（Google）とコミュニティによって開発が進められているJavaScriptフレームワークです。オープンソースライセンスであるMITに基づいて配布されています*1。
*1 JavaScriptフレームワークとはなんぞや、という点については、別稿「TIPS：AngularJSを利用するには？」も併せて参照してください。
以前は「AngularJS」と呼ばれていたフレームワークの後継ですが、その中身は大幅に様変わりしています。フルスタック、データバインディング、ディレクティブといった基本的な概念は引き継ぎつつも、個々の構文は全くの別ものと考えた方がよいでしょう（もちろん、共通する部分もそれなりにはあります）。
そこで本連載でも、AngularJS 1.xに対応したAngularJS TIPSとは分けて、新たなシリーズとして、Angularの基本機能を目的別リファレンスの形式でまとめていきます。
Angularは、バージョン2の登場時点では「Angular 2」のように、バージョン付きで呼ばれていましたが、現在は「Angular」（バージョンなし）が正式名称です。本連載でも、あえてバージョンを強調する場合を除いては、単に「Angular」と表記します。
Angularの特徴
Angularによる開発を始める前に、Angularの特徴をコーディングという観点からまとめておきます。
【1】コンポーネント指向
コンポーネントとは、ページの一部を表した部品のこと。ビュー（レイアウト）、ロジック、そして、コンポーネントを構成するメタ情報から構成されます。Angularでは、アプリを複数のコンポーネントとして組み立てる「コンポーネント指向」が前提となっていることから*2、機能単位に実装を分離しやすく、コードの見通しが良くなっています。
*2 例えばAngularJS 1では特徴的であったng-appやng-controllerのようなディレクティブは、現在のAngularにはもはやありません。Angularでは、これらは全てコンポーネントとして表現できるからです。
【2】開発言語にはTypeScriptがお勧め
Angularは、TypeScriptベースで実装されており、公式サイトのドキュメントでもTypeScriptベースの解説が充実しています。標準的なJavaScriptやグーグル発のaltJSであるDartなども利用できますが、特別な理由がないのであれば、開発にはAngular推奨のTypeScriptを利用するのが無難でしょう。
TypeScriptは、JavaScript構文の正当な拡張なので、本来のJavaScriptコードがほぼそのままで動作しますし、TypeScript構文に書き換えるのも容易です。JavaScriptのもととなるECMAScriptの最新仕様もいち早く取り入れているため、TypeScriptを学ぶことで、自然と次世代のJavaScript構文を学べるというお得感もあります。TypeScriptの基本構文については、以下のような記事も併せて参照してください。
【3】さまざまなモダン技術を組み合わせている
Angularは、イマドキのJavaScript技術を積極的に利用しています。上で挙げたTypeScriptの他にも、表1に示すような技術が利用されています。
| 技術 | 概要 |
|---|---|
| SystemJS | モジュールを動的にロードするためのライブラリ |
| RxJS | JavaScriptで非同期処理を実装するためのライブラリ |
| Zone.js | 非同期処理のコンテキストを管理／操作するためのライブラリ |
| 表1 Angularを構成するライブラリ | |
これらのライブラリになじみのない人にとっては、いきなりハードルが上がったように感じるかもしれません。しかし、これらの技術は、Angularの基本を学ぶ上で最初から知っていなければならないというものではありませんし、恐れることはありません。まずは、このような技術が使われているんだな、という程度で覚えておきましょう。
Angularの理解を深める中で、これらの技術についても理解しておけばよいのです。また、このことは、Angularを学ぶということで、最新のJavaScript技術を習得できることも意味します。
Angularのバージョンルール
もうひとつ、Angularを利用していく上で無視できないバージョンルールと、バージョンアップの見通しについて、ここで解説しておきます。
Angularの開発チームでは、バージョン番号を決めるルールとして、セマンティックバージョニングを採用することを表明しています。具体的には、以下のようなルールでバージョンが決定します。
＜メジャーバージョン＞.＜マイナーバージョン＞.＜パッチ＞
パッチは、バグフィックスを中心とした微細な更新で、機能の追加はありません。マイナーバージョンは、機能の追加を伴いますが、互換性の維持を保証します。そして、メジャーバージョンアップは、互換性が保たれない、破壊的な更新があることを意味します。セマンティックバージョニングでは、このようなポリシーに基づくことで、バージョンアップの位置づけを明確にしているわけです。
セマンティックバージョニングの採用に伴い、バージョンアップのサイクルについても表明されています。メジャーバージョンアップは6カ月に一度、その間、マイナーバージョンアップが3回行われます。パッチ更新はウィークリーで実施されます。執筆時点での最新バージョンAngular 4が2017年3月にリリースされていますので、このルールにのっとれば、Angular 5が2017年9月、Angular 6が2018年3月にリリースされる予定です。
Angularをインストールする
以上、Angularの概要を理解できたところで、ここからはAngularでアプリを開発するための準備を進めていきます。なお、Angularの開発ではNode.js 4以上（と、そのパッケージ管理システムであるnpm）が必要となります。あらかじめ以下のサイトからインストールしておくようにしてください。
【1】Angular QuickStartをダウンロードする
「Angular QuickStart Source」（以降、QuickStart）とは、Angularアプリを開発するための最低限のファイルを備えた、アプリの骨組みです。Angularとその関連ライブラリを動作するための設定ファイルをはじめ、ごくシンプルなサンプルアプリが含まれています。QuickStartを利用することで、簡単な手順でアプリ開発を開始できます。
QuickStartは、以下のアドレスからダウンロードできます。
【2】QuickStartを解凍＆配置する
ダウンロードしたファイルを解凍すると、/quickstart-masterというフォルダーができるので、適当な名前にリネームした上で、任意のフォルダーに配置します。ここでは「atips」という名前にリネームした上で、Windows環境でc:\dataフォルダーに配置しますが、もちろん、開発環境とするOSやフォルダー名は自由に決めて構いません。以降、c:\data\atipsを、アプリに関係する最上位のフォルダーという意味で、アプリケーションルートと呼びます。
アプリケーションルートの配下には、以下のようなフォルダー／ファイルが用意されています（主なものを抜粋しています）。
| /atips | …… アプリケーションルート | ||
|---|---|---|---|
| ├─ | /src | …… アプリ関連のコード | |
| │ | ├─ | index.html | …… トップページ |
| │ | ├─ | main.ts | …… スタートアップファイル |
| │ | ├─ | ＊system.config.js | …… モジュールローダー（SystemJS）の設定情報 |
| │ | ├─ | ＊tsconfig.json | …… TypeScriptコンパイラーの動作設定 |
| │ | └─ | /app | …… Angularアプリを構成するモジュール／コンポーネントなど（次回解説） |
| ├─ | /e2e | …… E2E（End to End）テスト*3関連のスクリプト | |
| └─ | ＊package.json | …… アプリそのもの、Angularで利用するライブラリの情報を定義 | |
| 図1 QuickStartで用意されている主なフォルダー／ファイル | |||
*3 アプリを構成する全ての部品をまとめて確認する最終的なテスト。インテグレーションテスト、シナリオテストとも言います。
「＊」の付いたファイルは、設定ファイルです。Angularを動作するための最低限の設定がすでに書かれており、少なくとも最初のうちはあまり触れることはないでしょう。
【3】Angularをインストールする
以上を確認できたら、コマンドプロンプト（Windows）やターミナル（Mac）などを使って以下のコマンドを実行してください（※アプリケーションルートのパスは、適切なものに置き換えてください）。
> cd C:\data\atips …… アプリケーションルートに移動
> npm install …… インストールを開始
……中略……
+-- systemjs@0.19.40
| `-- when@3.7.8
+-- tslint@3.15.1
| +-- diff@2.2.3
| +-- findup-sync@0.3.0
| | `-- glob@5.0.15
| `-- underscore.string@3.3.4
| +-- sprintf-js@1.1.0
| `-- util-deprecate@1.0.2
+-- typescript@2.1.6
`-- zone.js@0.8.10
……中略……
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm installコマンドは「package.jsonファイルで用意されたパッケージをまとめてインストールしなさい」という意味です。以上のような結果が得られたら、Angularのインストールは成功しています。
アプリケーションルートの配下に/node_modulesというフォルダーができていることを確認してください。/node_modulesフォルダーには、インストールされたライブラリ一式が保存されています。
以上、Angularを利用するための準備はここまでです。次回は実装編として、QuickStartで用意されているサンプルアプリを読み解き、Angularアプリの基本的な構造を理解します。
処理対象：ライブラリインストール カテゴリ：基本
処理対象：設定ファイル カテゴリ：基本
処理対象：QuickStart カテゴリ：基本
Copyright© Digital Advantage Corp. All Rights Reserved.