AngularJSユーザーのためのAngular2超入門：MEANスタックで始めるWebアプリ開発入門（終）（2/2 ページ）

MEANスタックを用いたWebアプリの開発方法について紹介していく本連載。今回は、前回カスタムディレクティブで解説しきれなかった内容と、最近リリースされたAngular2を紹介します。

[中村修太，クラスメソッド]

multiElement

　これまで説明してきたように、通常のディレクティブは、単一の要素に対して属性名を指定します。しかしmultiElementプロパティをtrueに設定することで、ディレクティブの開始と終了の要素名をそれぞれ指定することが可能になります。

　下記例では、「multiDir」という名前でmultiElement属性をtrueに設定したディレクティブを定義します。この場合、開始時の要素は「multi-dir-start」、終了時の要素名は「multi-dir-end」となります。

　multiElementの動作を確認してみましょう。まずはheadタグ内で、次のようにCSSクラスを定義します。

<style type="text/css">
    .example { color: red; }
</style>

　続いてディレクティブの定義です。link関数内で、対象の要素に対して先ほど定義したCSSクラスを追加しています。

・・・
}).directive('multiDir', function () {
    return {
        multiElement : true,
        link : function (scope,iElement,iAttrs,controller,iTransclude) {
            angular.forEach(iElement,function(el) {
                angular.element(el).addClass("example");
            });
        }
    }
});

　カスタムディレクティブを呼び出す部分は下記のようになります。

<div multi-dir-start>head</div>
<p>my multi directive</p>
<div multi-dir-end>end</div>

　このサンプルコードを実行すると、multi-dir-startからmulti-dir-endまで

CSSが適用されます。

　本章では、ディレクティブ作成時によく使用されるプロパティをいくつか紹介しました。

　ここで紹介した以外にもさまざまなディレクティブ用プロパティがあるので、公式ドキュメントでご確認ください。

Angular2の基礎知識

　本連載でも何度か触れていましたが、2016年9月にAngularJS 2.0が正式リリースされました。AngularJS 2.0は1.x系の後継フレームワークと位置付けられていますが、大幅な変更が行われており、互換性はほとんどない状況です。

　AngularJS 2.0では、以前と比べてどのような変更がなされているのでしょうか。

主な変更点について、公式ドキュメントも参考にしつつ、紹介していきます。

名前が「Angular」に

「Angular JS 2.0」「Angular2」などと呼ばれていますが、後述するようにJavaScript以外の言語でも記述可能なためか、正式な名前は「Angular」となっているようです。公式サイトを見ると、「Angular version 2.x」などと記述されています（※本記事では、ここからAngular2に統一します）。

JavaScriptは使用可能だが、TypeScriptが推奨されている

　現状、Angular2の公式ドキュメントでは、TypeScript、JavaScript、Dart向けに記述されています。Angular2はES（EcmaScript） 5/6でも記述が可能になっていますが、TypeScriptが推奨されています。

パフォーマンスが大きく向上

　AngularJS 1.xよりもビューの描画速度が大幅に向上しており、以前の3倍から5倍程度高速になっているとのことです。テンプレートのプリコンパイルやビューのキャッシュを利用し、メモリ使用量やCPUにかかる負荷も軽減されています。

1.x系と互換性はない

　Angular2はAngularJS 1.xの後継ですが、互換性はほとんどないため、別のフレームワークと考えていいでしょう。

　ここでは、AngularJS 1.xとAngular2をシームレスに統合（integration）させるための手順を紹介しています。

新しいテンプレートシンタックス

　HTMLテンプレートのシンタックスも刷新されています。例えば、下記のような違いがあります。

<input type="text" ng-model="foo" />
<li ng-repeat="opt in opts">...</li>
<input type="button" ng-click="click()" />

AngularJS 1.x

<input type="text" [(ngModel)]="foo" />
<li *ngFor="let opt of opts">...</li>
<input type="button" (click)="click()" />

Angular2

　比較してみると分かるように、双方向バインディング時の指定方法やイベントのバインディング指定方法、「ng-xxx」として使用していたディレクティブの指定方法が変更されています。記述の自由度が増した感じですね。慣れるまでは少し時間がかかるかもしれません。

AngularJS 1.xを深く知るには公式ドキュメントで

　今回はカスタムディレクティブでよく使用されるであろうプロパティと、Angular2の概要を紹介しました。今回紹介したプロパティを使ってカスタムディレクティブを作成することで、ビュープログラムがシンプルに記述できます。

　公式サイトでも言及されている通り、AngularJS 1.x系は、今後もメンテナンスし続けられる予定です。現状ではAngularJS 1.x系の方が、Angular2に比べて圧倒的にユーザー数が多いので、しばらくは並行的にバージョンアップされていくと思われます。

　どちらも直近でサポートに問題はなさそうなので、新規にAngularJSを用いた開発を行うのであればAngular2を、既存のAngularJSアプリがあればそのまま1.x系を使用し続けるのが良さそうです。

　Angular2はかなり大きな変更となっていますが、パフォーマンスや機能など、いろいろとバージョンアップしているので、新規開発時にはAngular2の採用も検討してみてください。

　本連載では第6回からAngularJSについて解説をしてきました。その中でAngularJSの基礎的な部分はだいたい紹介できたと思います。しかし、AngularJSは本連載で解説しきれなかった機能も数多く持っているので、公式ドキュメントを参考に、他の機能も確認してみてください。

MEANスタック構成は今も有力なアーキテクチャ

　さて、2014年12月に始まった本連載も、今回で最終回です。連載開始から2年ほど経過しましたが、相変わらずWebアプリやフロントエンドのフレームワークの需要は高い状況が続いています。

　最近はReactやAureliaなどの新しいフレームワークや、Fluxなどのアーキテクチャが登場しており、AngularJSに迫る勢いです（もしかしたらAngularJSより人気が上かもしれません）。そういった場合、MEAN構成の技術の中から必要に応じて取捨選択してアプリを開発しましょう。

　MEANスタック構成のアプリケーションは、今も有力なアーキテクチャになっていますので、MEANスタックアプリを作成する際、本連載が何かの助けとなれば幸いです。

　これまで本連載をご覧いただき、ありがとうございました。

著者紹介

中村修太（なかむら しゅうた）

クラスメソッド勤務の新しもの好きプログラマーです。数年前に東京から山口県に引っ越し、現在もリモート勤務しています。最近の趣味は空手とぬか漬け作り。