Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

最新トレンドを取り込んで進化する次世代AngularJS「Angular 2」最初の一歩

次世代Webアプリケーションフレームワーク「Angular 2」の活用 第1回

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

 Webアプリケーションフレームワークとして知られる「AngularJS」の次世代版「Angular 2」がまもなくリリースされます。そこで本連載では、Angular 2の活用方法をサンプルとともに紹介していきます。初回となる今回は、Angular 2の概要を紹介し、Angular 2の最初の一歩を踏み出すためのサンプルコードを作っていきます。

目次

はじめに

 AngularJSはGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。データバインディング機能によるビューとモデルの分離や、ディレクティブ(独自タグ)によるシンプルな記述など、HTML/JavaScriptでWebページを構築するための様々な機能を提供しています。

 バージョン1といえる現行AngularJS(以降「AngularJS 1」と記述)に対して、次世代版のAngularである「Angular 2」が開発中です。2016年6月時点のバージョンは2.0.0-rc2で、正式リリースが間近に迫っています。

図1 次世代版のAngular 2が開発中(公式Webページより)

図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サイトで公開されているドキュメントやサンプルの多くはモジュール化を前提に記述されています。

図2 Angular 2ではモジュール化を多用(公式Webページより)
図2 Angular 2ではモジュール化を多用(公式Webページより)

TypeScriptをプッシュ

 公式Webサイトでは、TypeScript、JavaScript、Dartの3言語についてドキュメントが公開されています。DartはGoogleが開発したAltJSです。この3言語のうち、Webサイトでドキュメントやサンプルが最も充実しているのはTypeScriptです。公式Webサイトで他言語のドキュメントを参照すると内容が存在せず、TypeScript版を参照するように案内される場合があります。

図3 JavaScript版が存在しないドキュメント(公式Webページより)
図3 JavaScript版が存在しないドキュメント(公式Webページより)

 このような状況から、Angular 2を利用するならTypeScriptが最も使いやすいといえます。本連載でもサンプルコードの記述にTypeScriptを利用します。

AngularJS 1とは基本的に別物

 Angular 2のWebサイトではAngularJS 1を利用したWebアプリをAngular 2に移行する手順が公開されており、開発サイドもマイグレーションを意識していることが伺えます。

図4 AngularJS 1からAngular 2への移行手順が公開されている(公式Webページより)
図4 AngularJS 1からAngular 2への移行手順が公開されている(公式Webページより)

 しかし、マイグレーションが必要ということは、そのままでは互換性がないということになります。Angular 2は新しい仕様や思想が多く取り入れられており、AngularJS 1とは基本的に別物です。ただしデータバインディングの記法などAngularJS 1を踏襲しているものもあります。


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

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2012年2月時点での登録メンバは37名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:次世代Webアプリケーションフレームワーク「Angular 2」の活用

おすすめ記事

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5