UUUMエンジニアブログ

UUUMのエンジニアによる技術ブログです

いまどきのJavaScript事情とAngular2のはなし

JavaScript

こんにちは、タナカです。

先日Angularのカンファレンスに参加させていただきました。 Angular2はもちろんですが、JavaScriptの進化についても興味深かったです。
本日の社内勉強会ではカンファレンスで得た情報を含めたいまどきのJavaScipt事情について共有させていただきました。

フレームワークはMVCからコンポーネント指向へ

一昨年リリースされたReat+Fluxが人気となり、フレームワークの注目はMVCからコンポーネント指向に変わってきました。

W3C標準化を進めているWeb Componetsにも追い風になっています。
また、昨今話題のマイクロサービスアーキテクチャーとも相性がいいです。

Web Comonentsのイメージ、各画面部品がコンポーネントとなる f:id:tnuuu:20160328132837j:plain 引用元

Virtual DOMが流行

こちらもReactの影響ですがVirtual DOMが流行しています。
従来のフレームワークに比べてデータバインディングの仕組みがわかりやすく、サーバーサイドスクリプトで行うレンダリングに似た仕組みが指示を得ています。
Virtual DOMはパフォーマンス的にも有利なようです。

従来のデータバインディングによる更新処理 f:id:tnuuu:20160328133252p:plain

Virtual DOMによる更新処理 f:id:tnuuu:20160328133303p:plain 引用元

Streamが流行りつつある

Streamは複数のイベントや非同期処理を行うのに便利な機能です。
次のES2016ではRxJSのObservableが標準化される予定ですので、ブラウザにおいてもStreamの利用が広がるはずです。（ご指摘を受けて修正しました。）
現在のところECMAScriptでの標準化の予定はありませんが、ブラウザにおいてもStreamの利用は増えているようです。Angular2でも一部機能でStreamが利用されています。

Streamについては以下のRxJS紹介記事に詳しく書いてあります。

liginc.co.jp

IE10以下がサポート対象外に

2016年3月31日にVistaのサポートが終了されます。
IEも自動アップデートがデフォルトとなったため、基本的にはIE11以降をサポートすればよいことになります。IEに苦しめられてきた僕的には嬉しい話です。

Androidは4.3（Jelly Bean）以前がサポート対象外に

4.4からはWebViewのブラウザがChromeベースとなったため、HTML5対応が楽になるはずです。
ただし4.3以下のブラウザも全体の割合でいうと1/4ほどいるようです。

参考サイト(http://developer.android.com/)

UI/UXが差別化の武器に

SlackやTwitterをはじめいまどきのサービスはSPAを採用していることが多いです。
また、CSSフレームワークも多数リリースされていて手軽に高品質なUIが利用できるようになったこともあり、全体的にUI/UXのレベルは向上しています。
最近は開発環境も充実しているので、UI/UXに割ける時間も増えました。

HTML5のアプリが現実的なものに

PCでは、SlackやATOMエディターがElectronで作成され実用レベルなのは既に証明されています。
一方スマホはというと、かつてFacebookのザッカーバーグ氏が「HTML5はまだその時期ではない」と発言し、ネイティブアプリへと方向転換したことに象徴されるように、HTML5はこれまで実用レベルでは無いと考えられてきました。
ネックだと言われていたのが、Androidの旧ブラウザです。旧ブラウザは動作速度も遅く、HTML5への対応もいまいちでした。
しかし、この旧ブラウザがサポート対象外になった今、PhoneGAP(Cordova)が再び注目されているようです。
既にネイティブと区別がつかないレベルのアプリも多数リリースされています。

Angular2がもうすぐリリース

今年の6月頃リリースされると言われていますAngular2ですが、 Angular2もまたJavaScriptのトレンドを取り入れたいまどきのフレームワークです。 AngularJS(1)を全面的に作り直し、以下の特徴を持つようになりました。

  • コンポーネント指向
    将来標準化される予定のWeb Componentsもサポート（一部）しています。
  • Virtual DOMを採用
    AngularJS1の複雑だったデータバインディングからシンプルなVirtual DOMへ移行しました。
  • 動作が軽く、モバイルでも問題なく動く
    Virtual DOMを採用した他にも様々な改良で動作が高速化しています。 AngulsrJS1.3に比べて数倍高速化しているようです。
  • サーバーサイドレンダリング対応（予定）
    SPAはSEO上不利な部分もありますが、サーバーサイドレンダリングに対応したことで対策しやすくなりました。

Angularが人気の理由

Angularは国内外で大変人気のあるフレームワークですが、まだ使ったことが無い方も多いと思います。
最後にAngularが人気の理由についてまとめておきます。

  • SPAが手早く開発できる
    Angularはフルスタックなフレームワークで、SPAへの対応も標準機能で対応できます。

  • プラグインやジェネレーターが豊富
    Angularの雛形生成から、サーバー側コードの生成、管理画面の自動生成ができるものまでさまざまなジェネレーターが開発されています。 これらを利用することで、コーディング量を大幅に減らすことができます。 jQuery等で人気があったようなプラグインは、Angularで同等なプラグインが作られていることが多いです。

  • 採用事例が多い
    グーグルだけで数百サイト、AmazonやApple、マイクロソフトの一部サービスでも利用されています。
    Home

  • Goolge製のフレームワークでサポートが手厚い
    2009年に発表され、2012年に1.0がリリースされた1系のサポートはAngular2がリリースされてもしばらく継続されるそうなので、Angular2についても期待できそうです。

まとめ

  • HTML5の時代がやっときた
  • Angular2はいまどきのフレームワーク

www.wantedly.com