SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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


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

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

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

はじめに

 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を踏襲しているものもあります。

次のページ
サンプルコードでAngular 2を初体験

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
次世代Webアプリケーションフレームワーク「Angular」の活用連載記事一覧

もっと読む

この記事の著者

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

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9544 2017/04/24 11:01

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング