はじめに
AngularJSはGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。データバインディング機能によるビューとモデルの分離や、ディレクティブ（独自タグ）によるシンプルな記述など、HTML／JavaScriptでWebページを構築するための様々な機能を提供しています。
バージョン1といえる現行AngularJS（以降「AngularJS 1」と記述）に対して、次世代版のAngularである「Angular 2」が開発中です。2016年6月時点のバージョンは2.0.0-rc2で、正式リリースが間近に迫っています。
図1 次世代版のAngular 2が開発中（公式Webページより）
Angular 2はデータバインディングやディレクティブといったAngularJS 1の特徴を引き継ぎつつ、最新JavaScript規格への対応などの進歩を果たしています。一方でAngularJS 1からの変更点も多く、AngularJS 1の経験者にとっても最初の敷居は高いかもしれません。
そこで本連載では、Angular 2を利用する方法を、順を追って紹介していきます。初回となる今回は最初にAngular 2の概要を説明します。次にAngular 2を体験できるサンプルコードをいくつか作成して、Angular 2への最初の一歩を踏み出します。
対象読者
- AngularJSの経験があり、次バージョンの動向が気になる方
- JavaScriptフレームワークがどんなものか試したい方
- 新しい物には飛びつかずにはいられない方
必要な環境
Angular 2はJavaScriptフレームワークですが、公式Webサイトで提供されるドキュメントやサンプルの充実度はTypeScriptが優っています。TypeScriptはマイクロソフトが提唱したAltJS（コンパイルしてJavaScriptに変換する言語）です。本連載のサンプルはTypeScriptで記述していきます。
また、サンプルの実行にはNode.jsが必要になります。
今回は以下の環境で動作を確認しています。
-
Windows 10 64bit版
- Node.js v6.2.0 64bit版
- Microsoft Edge 25.10586.0.0
Angular 2の特徴
冒頭で述べたように、Angular 2がAngularJS 1から変わった点は少なくありません。そのいくつかを主にコードを記述する観点から説明していきます。
最新JavaScript規格によるモジュール化
Angular 2では現状最新のJavaScript規格であるECMAScript 2015を多く取り入れています。ES2015 modulesによるモジュール化により、作成したコンポーネントを部品として使い回すことができます。Angular 2自身はモジュール化を必須としていませんが、公式Webサイトで公開されているドキュメントやサンプルの多くはモジュール化を前提に記述されています。
TypeScriptをプッシュ
公式Webサイトでは、TypeScript、JavaScript、Dartの3言語についてドキュメントが公開されています。DartはGoogleが開発したAltJSです。この3言語のうち、Webサイトでドキュメントやサンプルが最も充実しているのはTypeScriptです。公式Webサイトで他言語のドキュメントを参照すると内容が存在せず、TypeScript版を参照するように案内される場合があります。
このような状況から、Angular 2を利用するならTypeScriptが最も使いやすいといえます。本連載でもサンプルコードの記述にTypeScriptを利用します。
AngularJS 1とは基本的に別物
Angular 2のWebサイトではAngularJS 1を利用したWebアプリをAngular 2に移行する手順が公開されており、開発サイドもマイグレーションを意識していることが伺えます。
しかし、マイグレーションが必要ということは、そのままでは互換性がないということになります。Angular 2は新しい仕様や思想が多く取り入れられており、AngularJS 1とは基本的に別物です。ただしデータバインディングの記法などAngularJS 1を踏襲しているものもあります。
