Posted by 山崎富美 Developer Relations Team

[本記事は、AngularJS チームのソフトウェアエンジニアである Miško Hevery が 6 月 14 日 に Google Developers Blog に投稿した 「Better Web Templating with AngularJS 1.0」という記事を元に、翻訳したものです。詳しくは元記事をご覧ください。 - 山崎]

 AngularJS を使えば、まるで通常より賢いブラウザを使っているかのように、ウェブアプリケーションを開発することができます。AngularJS は HTML のシンタックスを拡張し、アプリケーションコンポーネントを明確かつ簡潔に表現することができ、HTML 自体をテンプレート言語として使うことができます。 さらに、AngularJS は双方向のデータバインディング経由で、UI （ビュー）からのデータと JavaScript オブジェクト（モデル）を自動的に同期します。

先日 AngularJS 1.0 をリリースし、最新のバージョンは 1.0.1 となっています。 初期の頃から、AngularJS をご利用いただいた皆さんに感謝いたします。また、まだ利用していない方々にも AngularJS をぜひご体験いただければ嬉しく思います。

AngularJS の目標は、ウェブアプリケーションの構造を作る時に、結果を推測しながらプログラミングすることを減少させ、ウェブクライアントアプリから、煩わしさや、定形的な部分を取り除くことです。まずはこの目標を達成できたと考えておりますので、是非 AngularJS をお試しください。

AngularJS の主な機能は以下の通りです。
  • 双方向データバインディング: AngularJS は、UI での変更をモデルに、モデルでの変更を UI に、自動的に反映します。クラス継承や、ラッパー、あるいは getter や setter メソッドは必要ありません。モデルは JavaScript ネイティブの配列のようなシンプルなものでも、JavaScript で作られた複雑な型でも構いません。
  • テンプレートとしての HTML: AngularJS は HTML 仕様と互換性をもつアプリ固有の要素、属性、クラスタイプなどで既存の HTML の語彙を拡張します。
  • HTML で再利用できるコンポーネント: AngularJS を使えば、カスタム要素や属性によって、動作を追加したり DOM を変更するなど、HTML のシンタックスを拡張する手段を提供します。<div><div><div> ではなく <tab>, <calendar> あるいは <colorpicker> のように書きたいと思いませんか？key=’ctrl-s’ という属性を追加することによって、キーボードのショートカットを追加したいと思いませんか？<blink>タグが恋しくはないですか？これらすべてのことが AngularJS では可能です。
  • ビューとルート: AngularJS では簡単なルート設定でアプリ内のサブビューを変更することができます。URL ディープリンクも自由にできます。
  • テストとテスト容易性: アプリの出荷はそのアプリをテストするということを意味します。そこで、AngularJS は、共通的なモックを提供します。Dependency Injection を十分に活用し、アプリの振る舞いとビューを切り離したテストを容易にする MVC 構造を推奨しています。また、AngularJS は、エンドツーエンドのシナリオランナーを備えており、アプリケーションの状態を正しく理解することによって、テストの効率は上がるでしょう。
AngularJS についてもっと知りたい方は、下記のライブコーディング動画をご覧ください。


こちらは AngularJS を使って Todo リストを作る、チュートリアル動画です。


angularjs.org にて、サンプルコード、チュートリアル、ビデオ、API ドキュメントを是非ご覧ください。皆さんのご意見、フィードバック、質問などを Google+ とメーリングリストでお待ちしております。

また、Developer Advocate の北村英志が HTML5 とか勉強会にて行った、AngularJS についての講演動画をご紹介します。


日本語で AngularJS について情報交換を行うためのコミュニティ AngularJS Japan Users Group も立ち上がりました。ぜひご参加ください。