引用元
Angular2、Githubをみているとすごい勢いでリリース作業が行われていますね。alpha.47までバージョンを重ね、昨日もすごい勢いでコミットが行われてました。まだIssueも600件以上ありつつ、そろそろAngular2来るなっ！と期待に胸をふくらませてるところです。
そこで、本稿では、すでにpublicになっているドキュメンテーションから、AngularJSからAngular2への進化の方向、jsフレームワーク自体が独自進化していく方向を考えたいと思います。
この記事は、Angular 2 Advent Calendar 2015の4日目の記事です。
[2016年7月4日 Angular2のコードサンプルを最新のものに変更]
Angular2とは
本稿をご覧の皆さんはご存知な気はしますが、Angular2はGoogle謹製のjsフレームワーク AngularJS（以降、「Angular1」）の後継バージョンとなっております。
AngularJSはいいjsフレームワークだったのですが、問題点整理をすると「重い」とか「記述ルールがややこしい」とかいろいろでてきたらしく、「それだったら、その問題点をがさっと整理し直して後継バージョンを出すぞ！」と気合の入った当プロジェクト。
気合が入りすぎて、互換性はほとんどありません。
どれぐらい互換性がないといいますと、「Angular 1 と Angular 2 の連携：シームレスなアップグレードの方法について」を見ればわかりやすいのですが、Angular1で書いた資産をAngular2で使うのは無理だろうけど、Angular2は便利だから、混在させることができるよ！というとてもクールな互換性のなさ。いや違う。クールな互換性の作り方。
実際、Angular1のコードをAngular2に直すのは「これ、別フレームワークに書き直すようなものじゃん」となっており、労が多いのでやめた方がいいです・・・。
しかし、Angular1と比べて「処理速度は3〜5倍」「inputとoutputに分かれて書きやすくなった」「TypeScriptを推奨しているので、コードの保守性が圧倒的に優れてる（どっちかというとTypeScriptの成果ですが）」などなどありますので、これからjsフレームワークの採用を決めるなら有力候補の一角になるだろうと思っております。
実質、Facebook謹製のReactJSとAngular2が二強になるのではないのでしょうか。
Angular1からAngular2への変化
jsサイドの記述ルールは、Angular 2 最新リリースを試してみたがとてもわかりやすいのでそちらに譲るとして、ここではviewサイドの記述ルールを見ていこうと思います。
まずinputの記述ですが、上から、Angular1,Angular2となっております（登場順）
1 2 3 4 5 | // Angular1<input type="text" ng-model="hoge" />// Angular2<input type="text" [(ngModel)]="hoge" /> |
何か感じませんか？
例えば、繰り返し処理をviewファイルで行う時の処理。
1 2 3 4 5 | // Angular1<li ng-repeat="option in options">...</li> //連想配列optionsの中身をoptionとして展開// Angular2<li *ngFor="let option of options">...</li> //連想配列optionsの中身をoptionとして展開 |
ボタンをクリックした時の処理。
1 2 3 4 5 | // Angular1<button type="submit" ng-click="click()" />// Angular2<button type="submit" (click)="click()" /> |
Angular1までは、ng-*という属性を利用してviewファイルのjs的処理を行っていました。
これは、HTML5のカスタム属性data-*を拡張したもので、「data-ng-*」と表現することもできます。つまりは、Angular1はW3C勧告のHTML5の範囲内での拡張を目指して実装しているものとみることができます。
それに対して、Angular2は自由奔放です。属性に、[]を使ってみたり、*を入れたり、()を入れたり。はじめてドキュメントをみた時、何それと二度見、三度見をしましたｗ
ちなみに、同じようにGoogle謹製であるjsフレームワーク「Polymer」はもっと自由です。PHPは次のように表します。
1 | <paper-input label="Input label"></paper-input> |
paper-inputって何。それってブラウザ認識するの。しないよね。全部jsでフィルタリングして表示するのにここまでやるの？！ということで、Polymerってプロトタイプなんだと実感したというのは別の話としまして、Angularはこのような進化を遂げてきています。
jsフレームワークの独自進化を考える
前項の傾向から
１．jsが有効化されているのが当たり前の時代になった
２．W3Cの拡張空間を仮想DOMによってjsフレームワークが作ろうとしている
の二点が結構はっきりしてきたように感じます。
「jsが有効化されているのが当たり前の時代になった」は、以前から開発しているエンジニアにとって身近だと思います。「jsが無効化されてても操作できるようにしなさい（IEしねっ）」というのは一時代前のお作法でした。
しかし、ガラゲーが減り、スマホが当たり前になって、IEのシェアが落ちていく中で、この作法は当たり前ではなくなり、「jsは有効化されてて当たり前」に入ったからこそ、jsフレームワークでviewを構築するような時代に入ったことを感じます。
もうひとつの「W3Cの拡張空間を仮想DOMによってjsフレームワークが作ろうとしている」はかなり大切な局面だと思っていまして、ブラウザ間差異はjsフレームワークで吸収する前提のもと、これからもどんどんとjsフレームワークが独自進化を遂げていくのではないでしょうか。
例えば、<input type=”date”>という入力は、現行Chromeでは自動入力用にブラウザが用意したカレンダーがでてきますが、IE/FireFoxでは<input type=”text”>と同様に挙動します。html5で定義されているもの、ブラウザによっては未対応の機能もいくつかあり、
エンジニアが使いたい機能 ＞ W3C勧告で採用される機能 ＞ 現行でブラウザが実装している機能 ＞ エンドユーザが享受する機能
となっていた世界が
エンジニアが使いたい機能 ＞ jsフレームワークが採用した機能 ＞ エンドユーザが享受する機能
となるというのは、大きな時代の変化ではないでしょうか。この変化を象徴しているのが、まさにAngular1からAngular2への変化かと思っております。
それでは、また。
0 コメント:
コメントを投稿