Angularの特徴とは？ 開発環境を構築するには？：Angular TIPS

連載目次

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

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

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

　Angularは、バージョン2の登場時点では「Angular 2」のように、バージョン付きで呼ばれていましたが、現在は「Angular」（バージョンなし）が正式名称です。本連載でも、あえてバージョンを強調する場合を除いては、単に「Angular」と表記します。

Angularの特徴

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

【1】コンポーネント指向

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

【2】開発言語にはTypeScriptがお勧め

　Angularは、TypeScriptベースで実装されており、公式サイトのドキュメントでもTypeScriptベースの解説が充実しています。標準的なJavaScriptやグーグル発のaltJSであるDartなども利用できますが、特別な理由がないのであれば、開発にはAngular推奨のTypeScriptを利用するのが無難でしょう。

　TypeScriptは、JavaScript構文の正当な拡張なので、本来のJavaScriptコードがほぼそのままで動作しますし、TypeScript構文に書き換えるのも容易です。JavaScriptのもととなるECMAScriptの最新仕様もいち早く取り入れているため、TypeScriptを学ぶことで、自然と次世代のJavaScript構文を学べるというお得感もあります。TypeScriptの基本構文については、以下のような記事も併せて参照してください。

【3】さまざまなモダン技術を組み合わせている

　Angularは、イマドキのJavaScript技術を積極的に利用しています。上で挙げたTypeScriptの他にも、表1に示すような技術が利用されています。

　これらのライブラリになじみのない人にとっては、いきなりハードルが上がったように感じるかもしれません。しかし、これらの技術は、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を、アプリに関係する最上位のフォルダーという意味で、アプリケーションルートと呼びます。

　アプリケーションルートの配下には、以下のようなフォルダー／ファイルが用意されています（主なものを抜粋しています）。

　「＊」の付いたファイルは、設定ファイルです。Angularを動作するための最低限の設定がすでに書かれており、少なくとも最初のうちはあまり触れることはないでしょう。

【3】Angularをインストールする

　以上を確認できたら、コマンドプロンプト（Windows）やターミナル（Mac）などを使って以下のコマンドを実行してください（※アプリケーションルートのパスは、適切なものに置き換えてください）。

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

　アプリケーションルートの配下に/node_modulesというフォルダーができていることを確認してください。/node_modulesフォルダーには、インストールされたライブラリ一式が保存されています。

　以上、Angularを利用するための準備はここまでです。次回は実装編として、QuickStartで用意されているサンプルアプリを読み解き、Angularアプリの基本的な構造を理解します。

「Angular TIPS」