Angular TIPS

Angular TIPS

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

2017年5月24日

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

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

【対応バージョン】 Angular 4以降。v2初期時点のインストール方法に関しては「Angular 2を利用するには?(準備編)」を参照してください。

 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 例えばAngularJS 1では特徴的であったng-appng-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)が必要となります。あらかじめ以下のサイトからインストールしておくようにしてください。

1Angular QuickStartをダウンロードする

 「Angular QuickStart Source」(以降、QuickStart)とは、Angularアプリを開発するための最低限のファイルを備えた、アプリの骨組みです。Angularとその関連ライブラリを動作するための設定ファイルをはじめ、ごくシンプルなサンプルアプリが含まれています。QuickStartを利用することで、簡単な手順でアプリ開発を開始できます。

 QuickStartは、以下のアドレスからダウンロードできます。

2QuickStartを解凍&配置する

 ダウンロードしたファイルを解凍すると、/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を動作するための最低限の設定がすでに書かれており、少なくとも最初のうちはあまり触れることはないでしょう。

3Angularをインストールする

 以上を確認できたら、コマンドプロンプト(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"})
リスト1 Angularの動作に必要なライブラリをインストール

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

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

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

処理対象:ライブラリインストール カテゴリ:基本
処理対象:設定ファイル カテゴリ:基本
処理対象:QuickStart カテゴリ:基本

※以下では、本稿の前後を合わせて5回分(第1回~第5回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

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

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

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

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

3. 【現在、表示中】≫ Angularの特徴とは? 開発環境を構築するには?

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

4. Angularの基本構造を理解して、アプリ開発を始めるには?

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

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

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

イベント情報(メディアスポンサーです)

サイトからのお知らせ

Twitterでつぶやこう!