AngularJSの背景を調査してみた

きっかけは、AngularJSの存在を知り、そうすると芋づる式に知らない単語がたくさん出てきて
そもそもJSってなに?なにが目的で生まれて、他のフレームワークと何が違うの?JS使うには他に何が必要なの?
・・・整理したい!!!! ということから調査結果をoutputしようと思う。

JSの変遷

CommonJS、ES6、Node.js、Webpack、Browserify...etc JSの勉強してると、登場する単語が多すぎて、どうも全体像がつかめない。 そして勉強していくにつれて、「これ前提知らないと分からないっしょ...」みたいなことが多数出てきたので、その前提を色々とまとめてみることにした。

JavaScriptが辿った変遷

JavaScriptの歴史をざっくりまとめたよ!

Angularの変遷

AngularJS

  • 2012年6月にリリース
  • 周辺ツールが多い!(Gulp, Bower, Grunt)とか。でもここら辺の勢いは最近あまりないし、独特の書き方がほかに応用できない。

※ Gulp,Grunt・・・タスクランナー(実際にブラウザで使えるまでの諸々の作業を自動化してくれるツール)
 bower・・・パッケージのバージョン管理

Angular2

  • 2016年9月16日にリリース
  • 周辺ツールはAngularCLIが使えればOK。
  • 1→2で結構文法が変わって、互換性もない(重要)

AngularCLI・・・公式コマンドラインツール

Angular4

  • 2017年3月にリリース
  • 周辺ツールはAngularCLIを使えばOK、今後半年ごとにメジャーアップデートされるときにも一緒に進化してくれる予定。
  • 2→4で文法が少し変わった。でも互換性あり! 参考書にAnguar2のやつを使っていてもとりあえずは大丈夫

Angular5

  • 2017年11月にリリース
  • 次バージョンとなるAngular 5のテーマの1つはシンプリシティ。 その1つは、Angularアプリケーションのコンパイルをよりシンプルにする。JITコンパイラだけでなくAHTコンパイラ(A head of time:事前コンパイラ)を採用したが、この2つがあると混乱することもある。今後はAHTコンパイラをデフォルトにすることでビルドの手順を一本化し、余計な作業を減らしていくつもりだ。
  • もう1つはスピードとサイズへの注力。MaterialやIonicを利用したときなどでも最適に扱えるようにする。
  • 最後の1つは、スムーズなアップデートだ。バージョン4のときにもこれを約束したが、将来のバージョンに渡ってもすすめていく。

ところでAngularJSからAngular2になって何が変わったの?

AngularJSはいいjsフレームワークだったが、問題点整理をすると「重い」とか「記述ルールがややこしい」とかいろいろでてきたらしく、「それだったら、その問題点をがさっと整理し直して後継バージョンを出すぞ!」と気合の入った当プロジェクト。 気合が入りすぎて、互換性はほとんどない。 関連記事はこちら。

AngularJS と Angular2 の連携:シームレスなアップグレードの方法について

AngularJSで書いた資産をAngular2で使うのは無理だろうけど、Angular2は便利だから、混在させることができるよ!と書いている。

しかし、AngularJSと比べて「処理速度は3〜5倍」「inputとoutputに分かれて書きやすくなった」「TypeScriptを推奨しているので、コードの保守性が圧倒的に優れてる(どっちかというとTypeScriptの成果ですが)」などなどあるので、これからjsフレームワークの採用を決めるなら有力候補の一角になるだろう。

ところでAngular2からAngular4になって何が変わったの?

  • 色々なコンパイルをするタイミングを変えたので、アップロードされるファイルサイズが小さくなった(30%~50%減)
  • タグがタグに変更(互換性あり)
  • コンポーネントをもう少し細分化
  • @angular/animationってのが追加された、アニメーション使っていた人は注意。使い方は変わっていない
  • AngularCLIのインストールが変更(重要)

JSフレームワークの独自進化について考える

1. jsが有効化されているのが当たり前の時代になった
2. W3Cの拡張空間を仮想DOMによってjsフレームワークが作ろうとしている

の二点が結構はっきりしてきたように感じる。

「jsが無効化されてても操作できるようにしなさい」というのは一時代前のお作法だった。 しかし、ガラケーが減り、スマホが当たり前になって、IEのシェアが落ちていく中で、この作法は当たり前ではなくなり、「jsは有効化されてて当たり前」に入ったからこそ、jsフレームワークでviewを構築するような時代に入ったことを感じる。 今では、「jsが有効化されているのが当たり前の時代になった」ことを多くのエンジニアが実感しているであろう。

もうひとつの「W3Cの拡張空間を仮想DOMによってjsフレームワークが作ろうとしている」はかなり大切な局面だと思っていて、ブラウザ間差異はjsフレームワークで吸収する前提のもと、これからもどんどんとjsフレームワークが独自進化を遂げていくのではないか。 つまり、jsフレームワークが進化していくことにより、W3Cで勧告されるような機能を意識しなくても使用しなくてもよくなるとなるというのは、大きな時代の変化ではないか。 この変化を象徴しているのが、まさにAngular1からAngular2への変化かと思っている。

調査メモ

JSについて

JavaScript界隈の流行の変遷を調査する時は「npm trends」がオススメ ⇒トレンド系を調査するのは何が良いのか?

フロントエンド+JavaScriptの歴史(1) #JavaScript

Angularについて

AngularJSをこれからはじめてみようかな?という人のための記事まとめ

AngularJSとAngular2の比較から、jsフレームワークの独自進化を考える

下記についてまとめるのも楽しいかも。 (詳細や他との比較は次回記載)

Node.js Bower Typings Gulp