近頃のjava script界隈 エセフロントエンジニアからみた世界 2017-feb
Post on 12-Apr-2017
65 Views
Preview:
TRANSCRIPT
近頃の 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は、途中で断念されました。
1. JavaScriptのバージョン
巷間で言われる” HTML5”とともに登場したのはバージョン６となります。 バージョン６からは、標準化された年をつけて呼ばれます。
バージョン６： ECMAScript 2015 バージョン７： ECMAScript 2016※でも、 ES6とかで検索したほうが、情報が多く出てくるような気がします
バージョン７は、まだまだ手を出すには早いと思います。 今、手を出すならば、バージョン６です
1. JavaScriptのバージョン
バージョン６も、すべてのモダンブラウザがすべての仕様をサポートしているわけではないです。 http://kangax.github.io/compat-table/es6/
そのため、トランスパイルをするためのツールが存在しています。 バージョン６の機能をサポートしていないブラウザ向けの変換ツールです。 有名どころでは、 babelです。昔の名前は 6to5.
babelは、 ECMAScript2015だけでなく、 Reactの JSXとかもサポートしたり裾野を広げてます
このトランスパイルを、デプロイ前に行う必要があります。 そこで、ビルドツールが必要になってきます。
ビルドの前に、ちょっとモジュールの話をさせてください
2. モジュール化
昔の JavaScriptは、静的ページにちょっとした動きをつけるだけに利用されてきました。 この頃の JavaScriptは、それほど大きな規模ではありませんでした。
昨今は、ブラウザ上のコードも複雑化してきています。
すごい量の<script>タグが記載されているサイトとか見たことありませんか？ そしてそれらがすべてグローバルに関数を定義していたり・・・。
依存関係を考えると、保守性は高くはないですよね。
そこで、スクリプトをモジュール化が必要になってきます
2. モジュール化
モジュール化することで それぞれのモジュールが結合度を低下させることができ、結果として保守性が高まります。
名前空間がクリーンになります
再利用性が高まります
2. モジュール化
モジュール化の形式として以下のものがよく知られています。 CommonJS
サーバサイド JavaScriptである Node.jsで使われています そのままの形式では、ブラウザが実行できないのでトランスパイルが必要
AMD 必要な時に非同期に読み込むという特徴があります
RequireJSを使うことで、ブラウザで実行可能 必要になってからモジュールをロードするのは処理待ちが発生する
ECMAScript2015のModule CommonJSと立ち位置が似ている 今後は、 CommonJSはModuleへシフトしていく
（いや、すでにしている。小職はまだだが）
3. ビルドツール
ビルドの目的（タスク）として以下のようなものがあるかと。 トランスパイル
ES2015 -> ES5 CommonJS -> ブラウザで実行可能な形式
そのほかに・・・
3. ビルドツール
ビルドの目的（タスク）として以下のようなものがあるかと。 トランスパイル
ES2015 -> ES5 CommonJS -> ブラウザで実行可能な形式
バンドル 複数の Scriptファイルをひとつにまとめる
圧縮・難読化 改行やコメントの削除
必要なものは残してくれる（OSSのコメントとか） 変数名を変更したり、未使用の変数を削除したり・・・
特別なルールで JavaScriptを記述することでドラスティックに変更するものも Clousure Compiler
3. ビルドツール
有名どころのビルドツールは Grunt
タスクを宣言的に記述
Gulp タスクを JavaScriptで記述 前はタスクを実行するプラグインが Gruntより少ないと言われていました
最近はそれも解消されているようです。
実際に小さなプロジェクトで利用しましたが、プラグインで困ったことはなかったです。
3. ビルドツール
トランスパイルのタスクを実行するには 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 部品などを提供
5. フレームワーク
Knockout 双方向バインディングをサポート
Viewと ViewModelのバインディング
OracleJET Oracleが提供する OSSを含んだ統合的なライブラリ
機能の紹介（ Oracles社資料より抜粋 ) 豊富な UIコンポーネント 高度な双方向バインディング
高度なルーティング・システム
スマートなリソース管理
検証フレームワーク
出典： http://www.oracle.com/technetwork/jp/developer-tools/jet/overview/jet-datasheet-2714142-ja.pdf
5. フレームワーク
React 仮想的な DOMを操作することで、 DOMの変更量を減らす
jQueryとの併用はムリ
HTMLをスクリプト内に記述することになるので、可読性に難がある Isomorphicなアプリを作ることができる (後述） Angular(後述 ) vs Reactの論争が勃発
Flux Reactを使って画面を描画するMVCアーキテクチャ
フレームワークとして扱われることも多いが、むしろ考え方としたほうがよいかと。
5. フレームワーク
AngularJS フルスタックの重量級フレームワーク
自由度が低い
バージョン 2が出たが、バージョン 1とは互換性なし
バージョン 1のメンテナンスは、当面は継続する
バージョン 2は、 TypeScript 版と Dart 版がある
コンポーネントベースのフレームワークにしたいようだ。
Aurelia AngularJSのエンジニアが、 Angularを離れて立ち上げた
AngularJS2と同様、コンポーネントベース
5. フレームワーク
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 altJSの先駆者です。
当時は、巨大化しつつある JavaScriptをどうやって開発するかというときでした。 Rubyの影響を受けているそうです
TypeScript 型付きの言語で、 ECMAScriptの進化に沿うように開発が行われています。
MSが強烈にサポートしています。
C#の開発者であるアンダース・ヘルスバーグが開発しています。
AngularJS2は、 TypeScriptで開発されています
6. altJS
CoffeeScript, TypeScriptが情報としては充実しています。
他には・・・
※すみません、普段、これらの言語の紹介記事すら読めていません Dart
Googleが開発しました。
Haxe マルチプラットフォーム
ActionScript, C++, php, Javaなどが書き出せる
まとめ
React+Fluxや AngularJS2は今後、デファクトになっていくかもしれませんが、まだ採用には早いと思います。
この界隈の進化は早く、１，２年で賞味期限切れになっているものが多くあるように感じます。
そこで、小職は、そこそこ枯れたものを使っていくという戦略を基本線に据えるのがよいのではないかと、考えます。
さいごに ご清聴ありがとうございました
top related