Angular 2を利用するには？（準備編）：Angular TIPS
人気のJavaScriptフレームワーク「Angular 2」の基本機能を目的別リファレンスの形式でまとめる連載スタート。まずはその特徴とインストール方法を説明する。
※現在では、Web標準技術を利用したアプリ開発が広く普及し、そのためのフレームワークも多数存在しています。その中でも主流のフレームワークの1つである「Angular」を活用し、そのための知識を備えることには大きな意味があります。本連載は、Angularユーザーに向けて、その使いこなしTIPSを紹介するものです。なお、本連載は「Build Insider」で公開していた連載「Angular Tips」を同サイトおよび筆者の了解を得たうえで、本フォーラムに移行したものです。記事はBuild Insiderで公開した状態のまま移行しているため、用語統一などの基準が＠ITの通常の記事とは異なる場合があります。
Angular 2とは、グーグル（Google）とコミュニティによって開発が進められているJavaScriptフレームワークです。オープンソースライセンスであるMITに基づいて配布されています*1。
*1 JavaScriptフレームワークとはなんぞや、という点については、別稿「TIPS：AngularJSを利用するには？」も併せて参照してください。
名前の通り、AngularJS 1.xの後継となるフレームワークですが、その中身は大幅に様変わりしています。フルスタック、データバインディング、ディレクティブといった基本的な概念は引き継ぎつつも、個々の構文は全くの別ものと考えた方がよいでしょう（もちろん、共通する部分もそれなりにはあります）。
そこで本連載でも、AngularJS 1.xに対応したAngularJS TIPSとは分けて、新たなシリーズとして、Angular 2の基本機能を目的別リファレンスの形式でまとめていきます。
Angular 2の特徴
Angular 2による開発を始める前に、Angular 2の特徴をコーディングという観点からまとめておきます。
【1】コンポーネント指向
コンポーネントとは、ページの一部を表した部品のこと。ビュー（レイアウト）、ロジック、そして、コンポーネントを構成するメタ情報から構成されます。Angular 2では、アプリを複数のコンポーネントとして組み立てる「コンポーネント指向」が前提となっていることから*2、機能単位に実装を分離しやすく、コードの見通しが良くなっています。
*2 例えばAngularJS 1では特徴的であったng-appやng-controllerのようなディレクティブは、Angular 2ではもはやありません。Angular 2では、これらは全てコンポーネントとして表現できるからです。
【2】開発言語にはTypeScriptがお勧め
Angular 2は、TypeScriptベースで実装されており、公式サイトのドキュメントでもTypeScriptベースの解説が充実しています。標準的なJavaScriptやグーグル発のaltJSであるDartなども利用できますが、特別な理由がないのであれば、開発にはAngular推奨のTypeScriptを利用するのが無難でしょう。
TypeScriptは、JavaScript構文の正当な拡張なので、本来のJavaScriptコードがほぼそのままで動作しますし、TypeScript構文に書き換えるのも容易です。JavaScriptのもととなるECMAScriptの最新仕様もいち早く取り入れているため、TypeScriptを学ぶことで、自然と次世代のJavaScript構文を学べるというお得感もあります。TypeScriptの基本構文については、以下のような記事も併せて参照してください。
【3】さまざまなモダン技術を組み合わせている
Angular 2は、イマドキのJavaScript技術を積極的に利用しています。上で挙げたTypeScriptの他にも、以下のような技術が利用されています。
| 技術 | 概要 |
|---|---|
| SystemJS | モジュールを動的にロードするためのライブラリ |
| RxJS | JavaScriptで非同期処理を実装するためのライブラリ |
| Zone.js | 非同期処理のコンテキストを管理／操作するためのライブラリ |
| 表1 Angular 2を構成するライブラリ | |
これらのライブラリになじみのない人にとっては、いきなりハードルが上がったように感じるかもしれません。しかし、これらの技術は、Angular 2の基本を学ぶ上で最初から知っていなければならないというものではありませんし、恐れることはありません。まずは、このような技術が使われているんだな、という程度で覚えておきましょう。
Angular 2の理解を深める中で、これらの技術についても理解しておけばよいのです。また、このことは、Angular 2を学ぶということで、最新のJavaScript技術を習得できることも意味します。
Angular 2をインストールする
以上、Angular 2の概要を理解できたところで、ここからはAngular 2でアプリを開発するための準備を進めていきます。なお、Angular 2の開発ではNode.js 4以上（と、そのパッケージ管理システムであるnpm）が必要となります。あらかじめ以下のサイトからインストールしておくようにしてください。
【1】アプリケーションフォルダーを作成する
まずは、アプリに関係するファイル一式を格納するためのフォルダーを作成しましょう。本稿ではWindows環境で「c:\data\atips」としますが、もちろん、開発環境とするOSやフォルダー名は自由に決めて構いません。以降、このフォルダーのことをアプリケーションルートと呼びます。
【2】Angular 2の設定ファイルを準備する
Angular 2の動作に必要となるファイルは、以下の通りです。
| ファイル名 | 概要 |
|---|---|
| package.json | アプリそのもの、Angular 2で利用するライブラリの情報を定義 |
| tsconfig.json | TypeScriptコンパイラーの動作設定 |
| systemjs.config.js | モジュールローダー（SystemJS）の設定情報 |
| 表2 Angular 2アプリで利用する設定ファイル | |
基本的なアプリを開発するための最低限の設定コードは、Angular 2公式サイトの「QUICKSTART」（英語）で提供されています。まずは、ここで示されている内容そのままにファイルを作成し、今後必要になったところで、設定を追加していけばよいでしょう。設定ファイル一式は、次のリンク先からダウンロードすることもできます。
ファイルは、全てアプリケーションルートの直下に保存します。ファイルの準備ができたら、コマンドプロンプトから以下のコマンドを実行してください（※アプリケーションルートのパスは、適切なものに置き換えてください）。
> cd C:\data\atips …… アプリケーションルートに移動
> npm install …… インストールを開始
npm WARN package.json angular-quickstart@1.0.0 No description
……中略……
lite-server@2.2.2 node_modules\lite-server
├── connect-history-api-fallback@1.3.0
├── minimist@1.2.0
├── lodash@4.16.6
├── connect-logger@0.0.1 (moment@2.15.2)
└── browser-sync@2.17.5 (emitter-steward@1.0.0, server-destroy@1.0.1, dev-ip@1.0.1, qs@6.2.1, immutable@3.8.1, ua-parser-js@0.7.10, browser-sync-client@2.4.3, http-proxy@1.15.1, opn@4.0.2, portscanner@1.0.0, resp-modifier@6.0.2, connect@3.5.0, serve-static@1.11.1, eazy-logger@3.0.2, micromatch@2.3.11, serve-index@1.8.0, fs-extra@0.30.0, yargs@6.0.0, bs-recipes@1.2.3, socket.io@1.5.0, localtunnel@1.8.1, rx@4.1.0, easy-extender@2.3.2, chokidar@1.6.0, browser-sync-ui@0.6.1)
npm installコマンドは「package.jsonファイルで宣言されたパッケージをまとめてインストールしなさい」という意味です。以上のような結果が得られたら、Angular 2のインストールは成功しています。
この段階で、アプリケーションルートの配下には、以下のようなフォルダー／ファイルができているはずです。
| /atips | …… アプリケーションルート | |
|---|---|---|
| ├─ | /node_modules | …… Angular 2で利用するライブラリ一式 |
| ├─ | package.json | |
| ├─ | tsconfig.json | |
| └─ | systemjs.config.js | |
| npm installコマンドを実行した後のアプリの構造 | ||
以上、準備編はここまでです。次回、実装編では今回設定したフォルダーに対して、「こんにちは、世界！」を表示するためのコードを追加していきます。
処理対象：ライブラリインストール カテゴリ：基本
処理対象：設定ファイル カテゴリ：基本
Copyright© Digital Advantage Corp. All Rights Reserved.