>>  賞品はこちらで紹介しています 
Angular 2 TIPS

Angular 2 TIPS

Angular 2を利用するには?(準備編)

2016年11月22日

人気のJavaScriptフレームワーク「Angular 2」の基本機能を目的別リファレンスの形式でまとめる連載スタート。まずはその特徴とインストール方法を説明する。

  • このエントリーをはてなブックマークに追加

 Angular 2とは、グーグル(Google)とコミュニティによって開発が進められているJavaScriptフレームワークです。オープンソースライセンスであるMITに基づいて配布されています*1

 名前の通り、AngularJS 1.xの後継となるフレームワークですが、その中身は大幅に様変わりしています。フルスタック、データバインディング、ディレクティブといった基本的な概念は引き継ぎつつも、個々の構文は全くの別ものと考えた方がよいでしょう(もちろん、共通する部分もそれなりにはあります)。

 そこで本連載でも、AngularJS 1.xに対応したAngularJS TIPSとは分けて、新たなシリーズとして、Angular 2の基本機能を目的別リファレンスの形式でまとめていきます。

Angular 2の特徴

 Angular 2による開発を始める前に、Angular 2の特徴をコーディングという観点からまとめておきます。

1コンポーネント指向

 コンポーネントとは、ページの一部を表した部品のこと。ビューレイアウト)、ロジック、そして、コンポーネントを構成するメタ情報から構成されます。Angular 2では、アプリを複数のコンポーネントとして組み立てる「コンポーネント指向」が前提となっていることから*2、機能単位に実装を分離しやすく、コードの見通しが良くなっています。

  • *2 例えばAngularJS 1では特徴的であったng-appng-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やフォルダー名は自由に決めて構いません。以降、このフォルダーのことをアプリケーションルートと呼びます。

2Angular 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)
Angular 2の動作に必要なライブラリをインストール

 npm installコマンドは「package.jsonファイルで宣言されたパッケージをまとめてインストールしなさい」という意味です。以上のような結果が得られたら、Angular 2のインストールは成功しています。

 この段階で、アプリケーションルートの配下には、以下のようなフォルダー/ファイルができているはずです。

/atips …… アプリケーションルート
 ├─ /node_modules …… Angular 2で利用するライブラリ一式
 ├─ package.json
 ├─ tsconfig.json
 └─ systemjs.config.js
npm installコマンドを実行した後のアプリの構造

 以上、準備編はここまでです。次回、実装編では今回設定したフォルダーに対して、「こんにちは、世界!」を表示するためのコードを追加していきます。

処理対象:ライブラリインストール カテゴリ:基本
処理対象:設定ファイル カテゴリ:基本
1. 【現在、表示中】≫ Angular 2を利用するには?(準備編)

人気のJavaScriptフレームワーク「Angular 2」の基本機能を目的別リファレンスの形式でまとめる連載スタート。まずはその特徴とインストール方法を説明する。

2. Angular 2を利用するには?(実装編)

初めてのAngular 2開発。誤解のしようもない最も基本的な“Hello World”を作成して、Angular 2アプリの基本構造を理解しよう。

3. コンポーネントに適用すべきテンプレートを指定するには?(template/templateUrlパラメーター)

@ComponentデコレーターのtemplateパラメーターやtemplateUrlパラメーターを使って、コンポーネントにテンプレート(ビュー)を適用する方法を説明する。

4. コンポーネントの値をビューに反映させるには?({{...}})

JavaScriptのオブジェクトをHTMLテンプレートに結び付けるためのデータバインドを記述するためのInterpolation記法の基礎を解説する。

5. ビューの中で「安全に」プロパティ/メソッドにアクセスするには?(「?.」演算子)

プロパティやメソッドを呼び出す際にレシーバーオブジェクトがnullでないことを確認した上で呼び出せる「?.」演算子の基本的な使い方を解説する。

GrapeCity Garage 記事内容の紹介

Azure Central の記事内容の紹介

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • グレープシティ株式会社
  • 日本マイクロソフト株式会社