近頃のjava script界隈 エセフロントエンジニアからみた世界 2017-feb
TRANSCRIPT
![Page 1: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/1.jpg)
近頃の JavaScript界隈若干ふるめ・・・
2017/02/21 Hiroshi Kaseya
![Page 2: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/2.jpg)
本日のゴール
JavaScript界隈の状況を知る 自身の開発現場で適用するモノの候補を得る
![Page 3: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/3.jpg)
みなさんは、人材ではなく、人財です!
この社内勉強会にいらっしゃっている方や、スライドをみてくださっている方のポテンシャルは、すごいんです。
そういった方のポテンシャルを引き出す手伝いをさせていただければ幸いです
![Page 4: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/4.jpg)
![Page 5: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/5.jpg)
さて、はじめましょうか・・・
![Page 6: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/6.jpg)
![Page 7: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/7.jpg)
Safe Harbor
ここに記載される内容は、小職の個人的な意見であり、所属組織や会社を代表するものではありません。 内容は 2017年 2月 21日時点のものであり、小職の意見も同様です。 サーバサイド JavaScriptには触れません。また、説明を簡便にするため、あえて考慮した説明にはしておりません。 今回は、すべて裏を取りながら作成した資料ではなく、小職の記憶や理解 で記載されている箇所もあります。
![Page 8: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/8.jpg)
今回のアジェンダです
1. JavaScriptのバージョン2. モジュール化3. ビルドツール4. パッケージマネージャ5. フレームワーク6. altJS
![Page 9: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/9.jpg)
1. JavaScriptのバージョン
JavaScriptは、 Ecma Internationalにより標準化されています。 ここにいる皆さんが書かれている JavaScriptは、バージョン3もしくは5です。 ECMAScript4は、途中で断念されました。
![Page 10: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/10.jpg)
1. JavaScriptのバージョン
巷間で言われる” HTML5”とともに登場したのはバージョン6となります。 バージョン6からは、標準化された年をつけて呼ばれます。
バージョン6: ECMAScript 2015 バージョン7: ECMAScript 2016※でも、 ES6とかで検索したほうが、情報が多く出てくるような気がします
バージョン7は、まだまだ手を出すには早いと思います。 今、手を出すならば、バージョン6です
![Page 11: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/11.jpg)
1. JavaScriptのバージョン
バージョン6も、すべてのモダンブラウザがすべての仕様をサポートしているわけではないです。 http://kangax.github.io/compat-table/es6/
そのため、トランスパイルをするためのツールが存在しています。 バージョン6の機能をサポートしていないブラウザ向けの変換ツールです。 有名どころでは、 babelです。昔の名前は 6to5.
babelは、 ECMAScript2015だけでなく、 Reactの JSXとかもサポートしたり裾野を広げてます
このトランスパイルを、デプロイ前に行う必要があります。 そこで、ビルドツールが必要になってきます。
![Page 12: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/12.jpg)
ビルドの前に、ちょっとモジュールの話をさせてください
![Page 13: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/13.jpg)
2. モジュール化
昔の JavaScriptは、静的ページにちょっとした動きをつけるだけに利用されてきました。 この頃の JavaScriptは、それほど大きな規模ではありませんでした。
昨今は、ブラウザ上のコードも複雑化してきています。
すごい量の<script>タグが記載されているサイトとか見たことありませんか? そしてそれらがすべてグローバルに関数を定義していたり・・・。
依存関係を考えると、保守性は高くはないですよね。
そこで、スクリプトをモジュール化が必要になってきます
![Page 14: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/14.jpg)
2. モジュール化
モジュール化することで それぞれのモジュールが結合度を低下させることができ、結果として保守性が高まります。
名前空間がクリーンになります
再利用性が高まります
![Page 15: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/15.jpg)
2. モジュール化
モジュール化の形式として以下のものがよく知られています。 CommonJS
サーバサイド JavaScriptである Node.jsで使われています そのままの形式では、ブラウザが実行できないのでトランスパイルが必要
AMD 必要な時に非同期に読み込むという特徴があります
RequireJSを使うことで、ブラウザで実行可能 必要になってからモジュールをロードするのは処理待ちが発生する
ECMAScript2015のModule CommonJSと立ち位置が似ている 今後は、 CommonJSはModuleへシフトしていく
(いや、すでにしている。小職はまだだが)
![Page 16: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/16.jpg)
3. ビルドツール
ビルドの目的(タスク)として以下のようなものがあるかと。 トランスパイル
ES2015 -> ES5 CommonJS -> ブラウザで実行可能な形式
そのほかに・・・
![Page 17: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/17.jpg)
3. ビルドツール
ビルドの目的(タスク)として以下のようなものがあるかと。 トランスパイル
ES2015 -> ES5 CommonJS -> ブラウザで実行可能な形式
バンドル 複数の Scriptファイルをひとつにまとめる
圧縮・難読化 改行やコメントの削除
必要なものは残してくれる(OSSのコメントとか) 変数名を変更したり、未使用の変数を削除したり・・・
特別なルールで JavaScriptを記述することでドラスティックに変更するものも Clousure Compiler
![Page 18: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/18.jpg)
3. ビルドツール
有名どころのビルドツールは Grunt
タスクを宣言的に記述
Gulp タスクを JavaScriptで記述 前はタスクを実行するプラグインが Gruntより少ないと言われていました
最近はそれも解消されているようです。
実際に小さなプロジェクトで利用しましたが、プラグインで困ったことはなかったです。
![Page 19: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/19.jpg)
3. ビルドツール
トランスパイルのタスクを実行するには CommonJS: browserify, webpack AMD: webpack ECMASCript2015, 2016: babel, webpackの babelプラグイン※小職の少ない経験で・・・
※バンドルもトランスパイル
圧縮のタスク 小職は、 webpackを使っていたので、 UglifyJsPluginでトランスパイル・バンドル時に圧縮もしてしまいました。
UglifyJsPlugin自身が圧縮しているのではなく、他の圧縮ツールを呼んでいる 便利なインタフェースを提供する一方で、車輪の再発明をしないようにしているのですねと一緒におこなえます
![Page 20: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/20.jpg)
これでビルドはできるようになった。
でも、まだ開発環境という面倒なモノが残っている
![Page 21: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/21.jpg)
4. パッケージマネージャ
ビルドツールを整えたり、開発に便利なツール類をそろえたりしてくれる bower
フロントエンドに特化したパッケージマネージャ
npm nodejs(サーバサイド JavaScript)用のパッケージマネージャ 今やフロントエンドまでカバーしている
bowerの領域を呑み込んでいる jspm
イケてる子のようですが、まだ仲良くありません。
ライブラリの参照先として npmに加えて githubも指定できるそうです
![Page 22: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/22.jpg)
開発環境もそろいましたね。
昨今は、フレームワークを使って開発することが多いですが、
そのあたりはどうなっているのでしょうか?
五月雨で紹介していきます 抜けは多いです。だっていっぱいあるんだもの・・・(涙)
![Page 23: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/23.jpg)
5. フレームワーク
jQuery うちの会社には、大好きな人が多いですよね。
DOMを操作することに特化しています
jQueryUI jQueryで書かれた UI 部品
jQueryMobile モバイル向けのフレームワーク
ページ遷移や UI 部品などを提供
![Page 24: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/24.jpg)
5. フレームワーク
Knockout 双方向バインディングをサポート
Viewと ViewModelのバインディング
OracleJET Oracleが提供する OSSを含んだ統合的なライブラリ
機能の紹介( Oracles社資料より抜粋 ) 豊富な UIコンポーネント 高度な双方向バインディング
高度なルーティング・システム
スマートなリソース管理
検証フレームワーク
出典: http://www.oracle.com/technetwork/jp/developer-tools/jet/overview/jet-datasheet-2714142-ja.pdf
![Page 25: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/25.jpg)
5. フレームワーク
React 仮想的な DOMを操作することで、 DOMの変更量を減らす
jQueryとの併用はムリ
HTMLをスクリプト内に記述することになるので、可読性に難がある Isomorphicなアプリを作ることができる (後述) Angular(後述 ) vs Reactの論争が勃発
Flux Reactを使って画面を描画するMVCアーキテクチャ
フレームワークとして扱われることも多いが、むしろ考え方としたほうがよいかと。
![Page 26: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/26.jpg)
5. フレームワーク
AngularJS フルスタックの重量級フレームワーク
自由度が低い
バージョン 2が出たが、バージョン 1とは互換性なし
バージョン 1のメンテナンスは、当面は継続する
バージョン 2は、 TypeScript 版と Dart 版がある
コンポーネントベースのフレームワークにしたいようだ。
Aurelia AngularJSのエンジニアが、 Angularを離れて立ち上げた
AngularJS2と同様、コンポーネントベース
![Page 27: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/27.jpg)
5. フレームワーク
Isomorphic Javascript Universal JavaScriptと、最近では呼ぶが、こちらが完全に定着した感はない
サーバサイドとクライアントサイドが同じコードベースであること サーバサイドでは Nodejs + Expressとかで動かす感じですかね
初回ロードが、早くなります。 一回、 JavaScriptを実行しないと表示されないページとくらべれば、一目瞭然
SPA(シングルページアプリケーション)などでは JavaScriptも巨大となりますし問題になりそう
SEOに有利。 JavaScriptを理解できないクローラのせいでユーザへの露出が減ってしまう
Googleのクローラは JavaScriptを理解してくれる
![Page 28: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/28.jpg)
最後に altJSを紹介します
![Page 29: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/29.jpg)
6. altJS
JavaScriptにトランスパイルされることを前提とした言語です。
CSSに詳しい方は、 Sassや Lessと同じような感じだと思ってください。
![Page 30: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/30.jpg)
6. altJS
CoffeeScript altJSの先駆者です。
当時は、巨大化しつつある JavaScriptをどうやって開発するかというときでした。 Rubyの影響を受けているそうです
TypeScript 型付きの言語で、 ECMAScriptの進化に沿うように開発が行われています。
MSが強烈にサポートしています。
C#の開発者であるアンダース・ヘルスバーグが開発しています。
AngularJS2は、 TypeScriptで開発されています
![Page 31: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/31.jpg)
6. altJS
CoffeeScript altJSの先駆者です。
当時は、巨大化しつつある JavaScriptをどうやって開発するかというときでした。 Rubyの影響を受けているそうです
TypeScript 型付きの言語で、 ECMAScriptの進化に沿うように開発が行われています。
MSが強烈にサポートしています。
C#の開発者であるアンダース・ヘルスバーグが開発しています。
AngularJS2は、 TypeScriptで開発されています
![Page 32: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/32.jpg)
6. altJS
CoffeeScript, TypeScriptが情報としては充実しています。
他には・・・
※すみません、普段、これらの言語の紹介記事すら読めていません Dart
Googleが開発しました。
Haxe マルチプラットフォーム
ActionScript, C++, php, Javaなどが書き出せる
![Page 33: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/33.jpg)
まとめ
React+Fluxや AngularJS2は今後、デファクトになっていくかもしれませんが、まだ採用には早いと思います。
この界隈の進化は早く、1,2年で賞味期限切れになっているものが多くあるように感じます。
そこで、小職は、そこそこ枯れたものを使っていくという戦略を基本線に据えるのがよいのではないかと、考えます。
![Page 34: 近頃のJava script界隈 エセフロントエンジニアからみた世界 2017-Feb](https://reader037.vdocuments.net/reader037/viewer/2022103105/58b8962d1a28ab3e3a8b69ef/html5/thumbnails/34.jpg)
さいごに ご清聴ありがとうございました