近頃のjava script界隈エセフロントエンジニアからみた世界 2017-feb

近頃の JavaScript界隈若干ふるめ・・・

2017/02/21 Hiroshi Kaseya

本日のゴール

JavaScript界隈の状況を知る自身の開発現場で適用するモノの候補を得る

みなさんは、人材ではなく、人財です！

この社内勉強会にいらっしゃっている方や、スライドをみてくださっている方のポテンシャルは、すごいんです。

そういった方のポテンシャルを引き出す手伝いをさせていただければ幸いです

さて、はじめましょうか・・・

Safe Harbor

ここに記載される内容は、小職の個人的な意見であり、所属組織や会社を代表するものではありません。内容は 2017年 2月 21日時点のものであり、小職の意見も同様です。サーバサイド JavaScriptには触れません。また、説明を簡便にするため、あえて考慮した説明にはしておりません。今回は、すべて裏を取りながら作成した資料ではなく、小職の記憶や理解　で記載されている箇所もあります。

今回のアジェンダです

1. JavaScriptのバージョン2. モジュール化3. ビルドツール4. パッケージマネージャ5. フレームワーク6. altJS

1. JavaScriptのバージョン

JavaScriptは、 Ecma Internationalにより標準化されています。ここにいる皆さんが書かれている JavaScriptは、バージョン３もしくは５です。 ECMAScript4は、途中で断念されました。


巷間で言われる” HTML5”とともに登場したのはバージョン６となります。バージョン６からは、標準化された年をつけて呼ばれます。

バージョン６： ECMAScript 2015 バージョン７： ECMAScript 2016※でも、 ES6とかで検索したほうが、情報が多く出てくるような気がします

バージョン７は、まだまだ手を出すには早いと思います。今、手を出すならば、バージョン６です


バージョン６も、すべてのモダンブラウザがすべての仕様をサポートしているわけではないです。 http://kangax.github.io/compat-table/es6/

そのため、トランスパイルをするためのツールが存在しています。バージョン６の機能をサポートしていないブラウザ向けの変換ツールです。有名どころでは、 babelです。昔の名前は 6to5.

babelは、 ECMAScript2015だけでなく、 Reactの JSXとかもサポートしたり裾野を広げてます

このトランスパイルを、デプロイ前に行う必要があります。そこで、ビルドツールが必要になってきます。

ビルドの前に、ちょっとモジュールの話をさせてください

2. モジュール化

昔の JavaScriptは、静的ページにちょっとした動きをつけるだけに利用されてきました。この頃の JavaScriptは、それほど大きな規模ではありませんでした。

昨今は、ブラウザ上のコードも複雑化してきています。

すごい量の<script>タグが記載されているサイトとか見たことありませんか？そしてそれらがすべてグローバルに関数を定義していたり・・・。

依存関係を考えると、保守性は高くはないですよね。

そこで、スクリプトをモジュール化が必要になってきます


モジュール化することでそれぞれのモジュールが結合度を低下させることができ、結果として保守性が高まります。

名前空間がクリーンになります

再利用性が高まります


モジュール化の形式として以下のものがよく知られています。 CommonJS

サーバサイド JavaScriptである Node.jsで使われていますそのままの形式では、ブラウザが実行できないのでトランスパイルが必要

AMD 必要な時に非同期に読み込むという特徴があります

RequireJSを使うことで、ブラウザで実行可能必要になってからモジュールをロードするのは処理待ちが発生する

ECMAScript2015のModule CommonJSと立ち位置が似ている今後は、 CommonJSはModuleへシフトしていく

（いや、すでにしている。小職はまだだが）

3. ビルドツール

ビルドの目的（タスク）として以下のようなものがあるかと。トランスパイル

ES2015 -> ES5 CommonJS -> ブラウザで実行可能な形式

そのほかに・・・


ビルドの目的（タスク）として以下のようなものがあるかと。トランスパイル

ES2015 -> ES5 CommonJS -> ブラウザで実行可能な形式

バンドル複数の Scriptファイルをひとつにまとめる

圧縮・難読化改行やコメントの削除

必要なものは残してくれる（OSSのコメントとか）変数名を変更したり、未使用の変数を削除したり・・・

特別なルールで JavaScriptを記述することでドラスティックに変更するものも Clousure Compiler


有名どころのビルドツールは Grunt

タスクを宣言的に記述

Gulp タスクを JavaScriptで記述前はタスクを実行するプラグインが Gruntより少ないと言われていました

最近はそれも解消されているようです。

実際に小さなプロジェクトで利用しましたが、プラグインで困ったことはなかったです。


トランスパイルのタスクを実行するには CommonJS: browserify, webpack AMD: webpack ECMASCript2015, 2016: babel, webpackの babelプラグイン※小職の少ない経験で・・・

※バンドルもトランスパイル

圧縮のタスク小職は、 webpackを使っていたので、 UglifyJsPluginでトランスパイル・バンドル時に圧縮もしてしまいました。

UglifyJsPlugin自身が圧縮しているのではなく、他の圧縮ツールを呼んでいる便利なインタフェースを提供する一方で、車輪の再発明をしないようにしているのですねと一緒におこなえます

これでビルドはできるようになった。

でも、まだ開発環境という面倒なモノが残っている

4. パッケージマネージャ

ビルドツールを整えたり、開発に便利なツール類をそろえたりしてくれる bower

フロントエンドに特化したパッケージマネージャ

npm nodejs（サーバサイド JavaScript）用のパッケージマネージャ今やフロントエンドまでカバーしている

bowerの領域を呑み込んでいる jspm

イケてる子のようですが、まだ仲良くありません。

ライブラリの参照先として npmに加えて githubも指定できるそうです

開発環境もそろいましたね。

昨今は、フレームワークを使って開発することが多いですが、

　そのあたりはどうなっているのでしょうか？

五月雨で紹介していきます抜けは多いです。だっていっぱいあるんだもの・・・（涙）

5. フレームワーク

jQuery うちの会社には、大好きな人が多いですよね。

DOMを操作することに特化しています

jQueryUI jQueryで書かれた UI 部品

jQueryMobile モバイル向けのフレームワーク

ページ遷移や UI 部品などを提供


Knockout 双方向バインディングをサポート

Viewと ViewModelのバインディング

OracleJET Oracleが提供する OSSを含んだ統合的なライブラリ

機能の紹介（ Oracles社資料より抜粋 ) 豊富な UIコンポーネント高度な双方向バインディング

高度なルーティング・システム

スマートなリソース管理

検証フレームワーク

出典： http://www.oracle.com/technetwork/jp/developer-tools/jet/overview/jet-datasheet-2714142-ja.pdf


React 仮想的な DOMを操作することで、 DOMの変更量を減らす

jQueryとの併用はムリ

HTMLをスクリプト内に記述することになるので、可読性に難がある Isomorphicなアプリを作ることができる (後述） Angular(後述 ) vs Reactの論争が勃発

Flux Reactを使って画面を描画するMVCアーキテクチャ

フレームワークとして扱われることも多いが、むしろ考え方としたほうがよいかと。


AngularJS フルスタックの重量級フレームワーク

自由度が低い

バージョン 2が出たが、バージョン 1とは互換性なし

バージョン 1のメンテナンスは、当面は継続する

バージョン 2は、 TypeScript 版と Dart 版がある

コンポーネントベースのフレームワークにしたいようだ。

Aurelia AngularJSのエンジニアが、 Angularを離れて立ち上げた

AngularJS2と同様、コンポーネントベース


Isomorphic Javascript Universal JavaScriptと、最近では呼ぶが、こちらが完全に定着した感はない

サーバサイドとクライアントサイドが同じコードベースであることサーバサイドでは Nodejs + Expressとかで動かす感じですかね

初回ロードが、早くなります。一回、 JavaScriptを実行しないと表示されないページとくらべれば、一目瞭然

SPA（シングルページアプリケーション）などでは JavaScriptも巨大となりますし問題になりそう

SEOに有利。 JavaScriptを理解できないクローラのせいでユーザへの露出が減ってしまう

Googleのクローラは JavaScriptを理解してくれる

最後に altJSを紹介します

6. altJS

JavaScriptにトランスパイルされることを前提とした言語です。

CSSに詳しい方は、 Sassや Lessと同じような感じだと思ってください。

6. altJS

CoffeeScript altJSの先駆者です。

当時は、巨大化しつつある JavaScriptをどうやって開発するかというときでした。 Rubyの影響を受けているそうです

TypeScript 型付きの言語で、 ECMAScriptの進化に沿うように開発が行われています。

MSが強烈にサポートしています。

C#の開発者であるアンダース・ヘルスバーグが開発しています。

AngularJS2は、 TypeScriptで開発されています

6. altJS

CoffeeScript, TypeScriptが情報としては充実しています。

他には・・・

　　※すみません、普段、これらの言語の紹介記事すら読めていません Dart

Googleが開発しました。

Haxe マルチプラットフォーム

ActionScript, C++, php, Javaなどが書き出せる

まとめ

React+Fluxや AngularJS2は今後、デファクトになっていくかもしれませんが、まだ採用には早いと思います。

この界隈の進化は早く、１，２年で賞味期限切れになっているものが多くあるように感じます。

そこで、小職は、そこそこ枯れたものを使っていくという戦略を基本線に据えるのがよいのではないかと、考えます。

さいごにご清聴ありがとうございました

近頃のjava script界隈 エセフロントエンジニアからみた世界 2017-feb

Engineering

近頃のjava script界隈エセフロントエンジニアからみた世界 2017-feb