JavaScript Tips 2015(PDF 版)

taskie
JavaScript Tips 2015
ES6 リリース記念号
主に ECMAScript 6 と altJS の話
2015/06/06
2015/06/30 改訂
taskie
1 / 46
目次
ECMAScript 6 (+ Babel)
altJS (CoffeeScript, TypeScript, Haxe, Flow)
React(おまけ)
Appendix: ES6 Features
別スライドに分離
2 / 46
このスライドについて
Remark 製
gnab/remark
JavaScript 製スライドショー作成ツール
Markdown でスライドを書ける
ややパーザに癖あり
Syntax Highlighting あり
3 / 46
前提
JavaScript とは
Java ではない
基本的に Chrome, Firefox, IE などのブラウザ上で動く言語
サーバサイド JavaScript 処理系もある
Node.js / io.js
パッケージマネージャ:npm
creationix/nvm か hokaccha/nodebrew でインストールするとよい
Windows は hakobera/nvmw というのがあるらしい(未確認)
4 / 46
ECMAScript 6
5 / 46
ECMAScript
公式サイト:ECMAScript
Ecma International が定めたスクリプト言語の規格 (ECMA-262)
ECMAScript 1st Edition は 1997 年 6 月公開
背景:JavaScript (Netscape) と JScript (IE) が独自進化しすぎて互換性
がない→ 標準化の機運
JavaScript や ActionScript は ECMAScript の方言という扱い
ECMAScript に採用された機能は(将来的に)JavaScript でも使えるよ
うになる(ことが期待される)
6 / 46
歴史
ES3: ECMAScript 3rd Edition(1999 年 12 月‒)
ES4: ECMAScript 4th Edition(放棄)
1st Round (‒2003): Netscape vs. Microsoft
2nd Round (‒2008): Mozilla, Adobe, Opera, Google vs. Microsoft, Yahoo!
→ ECMAScript Harmony へ
ES4 で議論されていた機能は ES5, ES6 以降に引き継がれる
ES5: ECMAScript 5th Edition(2009 年 12 月‒)
ES6: ECMAScript 6th Edition(2015 年 6 月‒)
ES7: ECMAScript 7th Edition(?‒)
7 / 46
ECMAScript 5
2009 年 12 月リリース
2010 年 6 月に修正版の ECMAScript 5.1 がリリースされた
ECMAScript 5 compatibility table
IE 8 (2009 年 3 月‒) では動かない(IE 9: 2011 年 4 月‒)
目安:Bootstrap 3 は IE 8 にギリギリ対応
小粒ながら重要な機能追加がある
参考:ES6の前にES5のベストプラクティスを改めて考えたい - snyk_s
log
8 / 46
ECMAScript 5 の新機能
Object.create , Object.defineProperty
Function.prototype.bind
Array.prototype.indexOf , Array.prototype.forEach ,
Array.prototype.map , ...
JSON
"use strict";
etc...
9 / 46
ECMAScript 6
2015 年 6 月 17 日に正式リリース
ECMAScript 2015 Language Specification ‒ ECMA-262 6th Edition
重要な新機能の追加が多々ある
参考:Overview of ECMAScript 6 features
10 / 46
ECMAScript 6 の新機能
クラス ( class , extends , super )
アロー関数( (x, y) => { ... } )
ブロックスコープの変数 ( let ) 、定数 ( const )
列挙 ( for (var x of xs) )
ジェネレータ ( function * , yield )
テンプレートリテラル ( `${x} + ${y} = ${x + y}` )
etc...
11 / 46
対応状況
ECMAScript 6 compatibility table
各ブラウザ・処理系の対応状況が見られる
最もスコアが高いブラウザは IE 後継の Edge (69%)
前身の IE 11 は 10% 台しかない
Firefox は 60% 台、Chrome は 50% くらい
node.js は 23%、io.js は 43%
どうでもいい機能も多々あるので 60% あれば優秀っぽい
規格がリリースされても実際に動作しなければ意味がない……
12 / 46
Babel
公式サイト:Babel · The compiler for writing next generation
JavaScript
次世代の JavaScript を現世代の JavaScript に変換するトランスパイラ
旧称:6to5 (ES6 to ES5 の意)
$ npm install -g babel でグローバルインストール
使い方
$ babel input.js -o output.js
$ babel-node input.js
13 / 46
try it out
https://babeljs.io/repl/
let x = 42;
{
let x = 0;
}
let pow2 = x => x * x;
class Base {}
class Derived extends Base {}
let xs = [2, 3, 5];
for (let x of xs) console.log(x);
14 / 46
注意
ES6 の全機能に対応しているわけではない
また、ブラウザ(処理系)側のサポートが必要な機能も多々ある
一部の機能を使う場合には polyfill が必要になる
IE, Safari には Symbol.iterator ( for ‒ of に必要)が無い
Caveats · Babel
Polyfill · Babel
$ npm install --save babel して import "babel/polyfill";
( require("babel/polyfill"); ) する
15 / 46
ECMAScript 7
ECMAScript 7 compatibility table
Babel は ES7 にも一部対応している
--stage [0-1] フラグが必要
Experimental · Babel
Stage 2 (Draft) 以上はデフォルトでオンになっている
async / await や配列内包表記などが実装されている
変更がある可能性が非常に高いので実務では使えない
Firefox (39) が SIMD に対応してたり (asm.js 関連) 、Chrome が
Object.observe(AngularJS 関連)に対応してたりする
16 / 46
altJS
17 / 46
altJS
alternative JavaScript
JavaScript にコンパイルすることができる言語
(注:前回発表が 2013 年末だったため 2013 年までの状況と現在の状況を
対比する構成になっています)
18 / 46
CoffeeScript
特徴 (‒2013)
JavaScript の罠を回避するための言語
糖衣構文マシマシ
そこそこ綺麗な JavaScript を吐く
常にオワコン化が危惧されている
19 / 46
近況
Atom (2014‒) の設定は CoffeeScript で書ける
参考:GitHub の ATOM が CoffeeScript で書かれているのはどうなの?
- ワザノバ ¦ wazanova
ES6 の機能で割と楽に JavaScript を書けるようになる(なった)のでオワコ
ン化が危惧されている
CoffeeScript に対応した IDE やエディタは結構多い
Gulp や Webpack などの設定を書く分には便利
20 / 46
利点(ES6 との比較)
オブジェクトリテラルの中括弧 ( { , } ) を省略できる(最重要)
this ( this. ) を @ と書ける
存在演算子がある
foo? , foo?.bar , foo?() , foo ?= bar , foo ? bar
if , for , case ‒ when などが文ではなく式である
セミコロンや関数呼び出しの括弧なども省略できるので DSL 的な用途に向く
JavaScript でセミコロンを省略すると痛い目を見ることがある
参考:Google JavaScript Style Guide 和訳 - セミコロン
インデント言語なのでコールバック関数がネストしたような状況だと読みやす
い場合もある
21 / 46
利点(Babel との比較)
CoffeeScript の吐く JavaScript は基本的に ES3 に準拠している
Babel の for ‒ of は ES6 の機能 ( Symbol.iterator ) に依存してい
るため polyfill が必要になる
22 / 46
欠点
新たな言語を 1 つ覚える手間が増える
JavaScript と CoffeeScript で演算子・キーワードの意味は大きく異なる
ES6 の文法と合わなくなった構文もある
for ‒ in と for ‒ of の意味が ECMAScript とほぼ逆
yield には対応している(そのまま書き出される)が ES6 の for
‒ of を使えないので列挙は手動
文字列に式を埋め込む方法
`${x}` (ES6)
"#{x}" (CoffeeScript)
インデント言語なのでコピペ耐性が低い
23 / 46
TypeScript
特徴 (‒2013)
Microsoft 謹製 altJS
C# を設計した Anders Hejlsberg が関わっている
JavaScript の(ほぼ)上位互換
既存ライブラリとの連携が楽
JavaScript の欠点も若干引き継いでいる
Haxe と比較するとコンパイルが遅い
まともな開発環境が現状 Visual Studio しかない
将来的に伸びる可能性はある
24 / 46
近況
伸びた
ES6 への対応も進んでいる
型定義ファイル(既存 JS ライブラリに型を付けるためのファイル)も多い
borisyankov/DefinitelyTyped
DefinitelyTyped/tsd か vvakame/dtsm を使うとよい
Microsoft が Visual Studio Code (2015/04/30-) を投げつけてきた
コンパイル速度はだいぶ改善された
総コード量が 30 KB を超えたあたりからだんだん VS Code の入力補完が効
かなくなってくる
25 / 46
利点
基本的に型のある JavaScript として書ける
新言語を覚える手間が省ける
便利な文法の追加がある
constructor (public hoge: Hoge) と書くと引数がそのままメンバ変数
になる
enum が存在する
26 / 46
欠点
ECMAScript の欠点は大体 TypeScript の欠点でもある
JavaScript の罠についてある程度知っている必要がある
将来的に本当に ECMAScript TypeScript になるのかは不明
ES6 の機能を本格的に使いたい場合 tsc でコンパイルした結果を更に babel
にかける必要がある
let ループ変数、 class の set / get 、 export / import など
コンパイル時間増
ES6 対応が甘いところが結構ある
generator 周りはほぼ使えない(tsc v1.5.0-beta 時点)
ES6 形式の export に対応していない *.d.ts もある
27 / 46
Haxe
特徴 (‒2013)
型推論が超強力
処理系は OCaml 製
代数的データ型がある
altJS の中では歴史が長く実績がある
ActionScript, Java, PHP, C#, C++ などにも変換できる
既存ライブラリとの連携が難しい
28 / 46
近況
TypeScript 流行の割を食った
型定義ファイルも TypeScript の方が充実している
Haxe の型定義ファイルは lib.haxe.org にある
最近(5月12日)3.2 にバージョンアップした
Haxe3.2の新機能まとめ - Qiita
10周年らしい
29 / 46
利点(TypeScript との比較)
コンパイルが高速
入力補完の速度も優秀
代数的データ型とパターンマッチがある
mixin がある
Ruby, Scala の mixin よりも C# の拡張メソッドに近い
macro がある
メンバ変数/関数を使う際に this. を書く必要がない
ゲーム製作に関しては OpenFL という割と実績のあるクロスプラットフォー
ムのライブラリが存在する
30 / 46
欠点
ユーザが少ない
既存の JavaScript 資産を使い辛い
CommonJS require との相性が悪かった
Haxe 3.2.0で型付きのrequireをする - Qiita
型定義ファイルが少ない
alert 1 つ呼ぶのにも js.Lib.alert みたいな書き方をする必要があ
る
変数名に $ を使えない
吐かれた JavaScript を人間が読むのは難しい
SourceMap 必須
31 / 46
Flow
Flow ¦ A static type checker for JavaScript
2014年11月に公開された新しい処理系(静的型チェッカー)
Facebook 製
処理系は OCaml 製
ただの JavaScript も型検査できる
Babel はデフォルトで Flow 用の型注釈を外してくれる
個人的にはあんまり試してないのでノーコメントで
null チェックとかあるっぽい?
React JSX のサポートもあるようだ
参考:Facebook Flowの初見の感想 - Qiita
32 / 46
React
33 / 46
React
A JavaScript library for building user interfaces ¦ React
Facebook 製
"Just the UI"
いわゆる「MVC の V (View) を作るやつ」
"Virtual DOM"
Virtual DOM をスクラップ & ビルド → Real DOM は差分更新される
サーバサイド (Node.js 上) でも動作する ( React.renderToString )
"one-way reactive data flow"
双方向データバインディング (AngularJS, Backbone) との対比
34 / 46
ここを読みましょう
一人React.js Advent Calendar 2014 - Qiita
VirtualDom - なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita
あなたがReactを使うべき理由 - mizchi's blog
Flux: Facebook が提唱した MVC の再発明
ReactとFluxのこと // Speaker Deck
10分で実装するFlux
実装は乱立している
Dispatcher を無くした spoike/refluxjs というものもあるらしい
35 / 46
JSX
JSX ¦ XML-like syntax extension to ECMAScript
XML を JavaScript に埋め込んだような記法
Babel はデフォルトで JSX を React のオブジェクトに変換してくれる
https://babeljs.io/repl
36 / 46
JSX を使った場合
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(<HelloMessage name="John" />, mountNode);
37 / 46
JSX を使わない場合
var HelloMessage = React.createClass({
render: function() {
return React.createElement("div", null, "Hello ", this.props.name);
}
});
React.render(React.createElement(HelloMessage, { name: "John" }), mountNode);
38 / 46
JSX 記法の利点
簡潔
JSX 記法の欠点
JSX に対応した altJS が少ない
JSX に対応したエディタが少ない
シンタックスハイライトやインデントが崩壊する
39 / 46
React + ES6
ES6 の class で React.Component を継承できる (v0.13‒)
ES6 Classes ¦ Reusable Components ¦ React
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
40 / 46
React + Bootstrap
React-Bootstrap
まだベータ版
以下のような感じで Bootstrap のコンポーネントを配置できる
<ButtonToolbar>
<Button>Default</Button>
</ButtonToolbar>
41 / 46
まとめ
42 / 46
(その前に)気になるもの
Web Components
W3C で策定中
Web Components Current Status - W3C
参考:Web Componentsの基本的な使い方・まとめ
Polymer
Google 製
最近(5月29日)1.0 になった
参考:Polymer と Web Components の違い9選(もとい Polymer の
便利機能) ::ハブろぐ
43 / 46
ビルドについて
ビルド周りの話を全くしていなかった
個人的には gulp.js と webpack を使っている
gulp も webpack もプラグインで万能になるのでどっちに比重を置くかとい
う問題がある
Babel の場合、gulp には gulp-babel、webpack には babel-loader が
ある
大抵の用途なら webpack で完結する気がする
日本語の情報が少なめ
import ( require ) を解決したい場合 webpack か Browserify のどち
らかが必要
44 / 46
まとめ
ECMAScript 6 に備えよう
JavaScript 界の進化は著しい
落ち着いてほしい
登場から 20 年間落ち着いたことがなさそう
未来永劫落ち着くことはないだろう……
頑張って付いて行きましょう……
45 / 46
END
We are hiring!
http://unipro.co.jp/
46 / 46
1 of 46

Recommended

Java scriptの進化 by
Java scriptの進化Java scriptの進化
Java scriptの進化maruyama097
7.3K views262 slides
JavaScript.Next Returns by
JavaScript.Next ReturnsJavaScript.Next Returns
JavaScript.Next Returnsdynamis
7K views112 slides
Bluetoothでgo! by
Bluetoothでgo!Bluetoothでgo!
Bluetoothでgo!Kouji Matsui
5.9K views16 slides
JavaScript MVC入門 by
JavaScript MVC入門JavaScript MVC入門
JavaScript MVC入門大樹 小倉
5.4K views25 slides
.NET vNext by
.NET vNext.NET vNext
.NET vNext信之 岩永
12.5K views47 slides
Modern .NET by
Modern .NETModern .NET
Modern .NET信之 岩永
3.1K views29 slides

More Related Content

What's hot

Javascriptのあれやこれやをまとめて説明してみる by
Javascriptのあれやこれやをまとめて説明してみるJavascriptのあれやこれやをまとめて説明してみる
Javascriptのあれやこれやをまとめて説明してみるShunji Konishi
3K views17 slides
Net fringejp2016 by
Net fringejp2016Net fringejp2016
Net fringejp2016Yusuke Fujiwara
2.1K views43 slides
C# design note sep 2014 by
C# design note sep 2014C# design note sep 2014
C# design note sep 2014信之 岩永
12.8K views30 slides
C#/.NETがやっていること 第二版 by
C#/.NETがやっていること 第二版C#/.NETがやっていること 第二版
C#/.NETがやっていること 第二版信之 岩永
39.4K views216 slides
dotnetconfJP2017_netcore2 by
dotnetconfJP2017_netcore2dotnetconfJP2017_netcore2
dotnetconfJP2017_netcore2Yusuke Fujiwara
844 views40 slides
モダンJavaScript環境構築一歩目 by
モダンJavaScript環境構築一歩目モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目大樹 小倉
16.4K views51 slides

What's hot(19)

Javascriptのあれやこれやをまとめて説明してみる by Shunji Konishi
Javascriptのあれやこれやをまとめて説明してみるJavascriptのあれやこれやをまとめて説明してみる
Javascriptのあれやこれやをまとめて説明してみる
Shunji Konishi3K views
C# design note sep 2014 by 信之 岩永
C# design note sep 2014C# design note sep 2014
C# design note sep 2014
信之 岩永12.8K views
C#/.NETがやっていること 第二版 by 信之 岩永
C#/.NETがやっていること 第二版C#/.NETがやっていること 第二版
C#/.NETがやっていること 第二版
信之 岩永39.4K views
モダンJavaScript環境構築一歩目 by 大樹 小倉
モダンJavaScript環境構築一歩目モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目
大樹 小倉16.4K views
Javaで1から10まで書いた話(sanitized) by Tokuhiro Matsuno
Javaで1から10まで書いた話(sanitized)Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)
Tokuhiro Matsuno12.4K views
JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1 by Y Watanabe
JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1
JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1
Y Watanabe4.4K views
Thread affinity and CPS by Kouji Matsui
Thread affinity and CPSThread affinity and CPS
Thread affinity and CPS
Kouji Matsui1.3K views
Hello, C++ + JavaScript World! - Boost.勉強会 #11 東京 by hecomi
Hello, C++ + JavaScript World! - Boost.勉強会 #11 東京Hello, C++ + JavaScript World! - Boost.勉強会 #11 東京
Hello, C++ + JavaScript World! - Boost.勉強会 #11 東京
hecomi 10.9K views
大規模なJavaScript開発の話 by terurou
大規模なJavaScript開発の話大規模なJavaScript開発の話
大規模なJavaScript開発の話
terurou12.1K views
これからの「async/await」の話をしよう by Kouji Matsui
これからの「async/await」の話をしようこれからの「async/await」の話をしよう
これからの「async/await」の話をしよう
Kouji Matsui27K views
今から始める、Windows 10&新.NETへの移行戦略 by 信之 岩永
今から始める、Windows 10&新.NETへの移行戦略今から始める、Windows 10&新.NETへの移行戦略
今から始める、Windows 10&新.NETへの移行戦略
信之 岩永2.2K views
JavaScript.Next by dynamis
JavaScript.NextJavaScript.Next
JavaScript.Next
dynamis 28.8K views
Sd Loader Seasar Con2009 White by Akio Katayama
Sd Loader Seasar Con2009 WhiteSd Loader Seasar Con2009 White
Sd Loader Seasar Con2009 White
Akio Katayama635 views
Javaのログ出力: 道具と考え方 by Taku Miyakawa
Javaのログ出力: 道具と考え方Javaのログ出力: 道具と考え方
Javaのログ出力: 道具と考え方
Taku Miyakawa74.3K views
C# コーディングガイドライン 2013/02/26 by Yoshihisa Ozaki
C# コーディングガイドライン 2013/02/26C# コーディングガイドライン 2013/02/26
C# コーディングガイドライン 2013/02/26
Yoshihisa Ozaki12.5K views

Viewers also liked

Unity講座資料 共通 by
Unity講座資料 共通Unity講座資料 共通
Unity講座資料 共通Mattun
688 views19 slides
とあるFlashの自動生成 by
とあるFlashの自動生成とあるFlashの自動生成
とあるFlashの自動生成Akineko Shimizu
1.7K views69 slides
GroovyでJSON2015 by
GroovyでJSON2015GroovyでJSON2015
GroovyでJSON2015Yasuharu Hayami
1K views17 slides
Unity講座資料1 by
Unity講座資料1Unity講座資料1
Unity講座資料1Mattun
638 views82 slides
Flex入門 by
Flex入門Flex入門
Flex入門Shinjiro Watanabe
1.5K views10 slides
TravisCIでActionScriptを動かす by
TravisCIでActionScriptを動かすTravisCIでActionScriptを動かす
TravisCIでActionScriptを動かすgyoh_k
961 views13 slides

Viewers also liked(20)

Unity講座資料 共通 by Mattun
Unity講座資料 共通Unity講座資料 共通
Unity講座資料 共通
Mattun688 views
とあるFlashの自動生成 by Akineko Shimizu
とあるFlashの自動生成とあるFlashの自動生成
とあるFlashの自動生成
Akineko Shimizu1.7K views
Unity講座資料1 by Mattun
Unity講座資料1Unity講座資料1
Unity講座資料1
Mattun638 views
TravisCIでActionScriptを動かす by gyoh_k
TravisCIでActionScriptを動かすTravisCIでActionScriptを動かす
TravisCIでActionScriptを動かす
gyoh_k961 views
HokurikuUnConference: Windows7 by guest3820592
HokurikuUnConference: Windows7HokurikuUnConference: Windows7
HokurikuUnConference: Windows7
guest3820592526 views
FOSS4G LT - Invitation to ActionScript Programming by gyuque
FOSS4G LT - Invitation to ActionScript ProgrammingFOSS4G LT - Invitation to ActionScript Programming
FOSS4G LT - Invitation to ActionScript Programming
gyuque1.1K views
Unity2015_No5_~Mecanim~ by CHY72
 Unity2015_No5_~Mecanim~  Unity2015_No5_~Mecanim~
Unity2015_No5_~Mecanim~
CHY721.9K views
開発ゼミ発表 by YanoLabLT
開発ゼミ発表開発ゼミ発表
開発ゼミ発表
YanoLabLT441 views
WCAN mini ActionScript vol.11 by ll_koba_ll
WCAN mini ActionScript vol.11WCAN mini ActionScript vol.11
WCAN mini ActionScript vol.11
ll_koba_ll791 views
ここからはじめるAction Script 3.0 入門前 by Yusuke Kamo
ここからはじめるAction Script 3.0 入門前ここからはじめるAction Script 3.0 入門前
ここからはじめるAction Script 3.0 入門前
Yusuke Kamo3.8K views
インタラクティブコンテンツにおけるHTML5とFlash by Yasunobu Ikeda
インタラクティブコンテンツにおけるHTML5とFlashインタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
Yasunobu Ikeda3.4K views
Flash Developerになる4つのヒント by Yusuke Kamo
Flash Developerになる4つのヒントFlash Developerになる4つのヒント
Flash Developerになる4つのヒント
Yusuke Kamo801 views
WCAN mini Actionscript Vol.9 - LEDガジェット、ただのピカピカと見るか?アニメーションと見るか? by Hideyuki TAKEI
WCAN mini Actionscript Vol.9 - LEDガジェット、ただのピカピカと見るか?アニメーションと見るか?WCAN mini Actionscript Vol.9 - LEDガジェット、ただのピカピカと見るか?アニメーションと見るか?
WCAN mini Actionscript Vol.9 - LEDガジェット、ただのピカピカと見るか?アニメーションと見るか?
Hideyuki TAKEI980 views
2011/12/14 FxUG発表資料 初めてのRobotlegs by 豊 満石
2011/12/14 FxUG発表資料 初めてのRobotlegs 2011/12/14 FxUG発表資料 初めてのRobotlegs
2011/12/14 FxUG発表資料 初めてのRobotlegs
豊 満石796 views

Similar to JavaScript Tips 2015(PDF 版)

モダンJavaScript入門.pdf by
モダンJavaScript入門.pdfモダンJavaScript入門.pdf
モダンJavaScript入門.pdfomochids0113
63 views22 slides
ES6,7で書ける JavaScript by
ES6,7で書ける JavaScriptES6,7で書ける JavaScript
ES6,7で書ける JavaScriptShin Sekaryo
1.1K views28 slides
Js frameworkの紹介 by
Js frameworkの紹介Js frameworkの紹介
Js frameworkの紹介Ryo Shimada
127 views17 slides
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える by
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考えるNetラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考えるdavid9142
2.2K views68 slides
JSX Design Overview (日本語) by
JSX Design Overview (日本語)JSX Design Overview (日本語)
JSX Design Overview (日本語)Kazuho Oku
4.4K views12 slides
React Redux Redux-Saga + サーバサイドレンダリング by
React Redux Redux-Saga + サーバサイドレンダリングReact Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリングエンジニア勉強会 エスキュービズム
17K views42 slides

Similar to JavaScript Tips 2015(PDF 版)(20)

モダンJavaScript入門.pdf by omochids0113
モダンJavaScript入門.pdfモダンJavaScript入門.pdf
モダンJavaScript入門.pdf
omochids011363 views
ES6,7で書ける JavaScript by Shin Sekaryo
ES6,7で書ける JavaScriptES6,7で書ける JavaScript
ES6,7で書ける JavaScript
Shin Sekaryo1.1K views
Js frameworkの紹介 by Ryo Shimada
Js frameworkの紹介Js frameworkの紹介
Js frameworkの紹介
Ryo Shimada127 views
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える by david9142
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考えるNetラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
david91422.2K views
JSX Design Overview (日本語) by Kazuho Oku
JSX Design Overview (日本語)JSX Design Overview (日本語)
JSX Design Overview (日本語)
Kazuho Oku4.4K views
Inside frogc in Dart by Goro Fuji
Inside frogc in DartInside frogc in Dart
Inside frogc in Dart
Goro Fuji1.5K views
Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例 by Joni
Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例
Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例
Joni 231 views
Java fx勉強会lt 第8回 by Taiji Miyabe
Java fx勉強会lt 第8回Java fx勉強会lt 第8回
Java fx勉強会lt 第8回
Taiji Miyabe2K views
Gws 20120521 gradle by Nobuhiro Sue
Gws 20120521 gradleGws 20120521 gradle
Gws 20120521 gradle
Nobuhiro Sue1.6K views
クラウド開発に役立つ OSS あれこれ by Masataka MIZUNO
クラウド開発に役立つ OSS あれこれクラウド開発に役立つ OSS あれこれ
クラウド開発に役立つ OSS あれこれ
Masataka MIZUNO1.6K views
.NET Coreから概観する.NETのOSSへの取り組み by Kouji Matsui
.NET Coreから概観する.NETのOSSへの取り組み.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み
Kouji Matsui5.7K views
2016/12/17 ASP.NET フロントエンドタスク入門 by miso- soup3
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3756 views
From Java To Clojure by Kent Ohashi
From Java To ClojureFrom Java To Clojure
From Java To Clojure
Kent Ohashi2.2K views
ASP.NET vNextの全貌 by A AOKI
ASP.NET vNextの全貌ASP.NET vNextの全貌
ASP.NET vNextの全貌
A AOKI3.8K views

JavaScript Tips 2015(PDF 版)

  • 1. JavaScript Tips 2015 ES6 リリース記念号 主に ECMAScript 6 と altJS の話 2015/06/06 2015/06/30 改訂 taskie 1 / 46
  • 2. 目次 ECMAScript 6 (+ Babel) altJS (CoffeeScript, TypeScript, Haxe, Flow) React(おまけ) Appendix: ES6 Features 別スライドに分離 2 / 46
  • 3. このスライドについて Remark 製 gnab/remark JavaScript 製スライドショー作成ツール Markdown でスライドを書ける ややパーザに癖あり Syntax Highlighting あり 3 / 46
  • 4. 前提 JavaScript とは Java ではない 基本的に Chrome, Firefox, IE などのブラウザ上で動く言語 サーバサイド JavaScript 処理系もある Node.js / io.js パッケージマネージャ:npm creationix/nvm か hokaccha/nodebrew でインストールするとよい Windows は hakobera/nvmw というのがあるらしい(未確認) 4 / 46
  • 6. ECMAScript 公式サイト:ECMAScript Ecma International が定めたスクリプト言語の規格 (ECMA-262) ECMAScript 1st Edition は 1997 年 6 月公開 背景:JavaScript (Netscape) と JScript (IE) が独自進化しすぎて互換性 がない→ 標準化の機運 JavaScript や ActionScript は ECMAScript の方言という扱い ECMAScript に採用された機能は(将来的に)JavaScript でも使えるよ うになる(ことが期待される) 6 / 46
  • 7. 歴史 ES3: ECMAScript 3rd Edition(1999 年 12 月‒) ES4: ECMAScript 4th Edition(放棄) 1st Round (‒2003): Netscape vs. Microsoft 2nd Round (‒2008): Mozilla, Adobe, Opera, Google vs. Microsoft, Yahoo! → ECMAScript Harmony へ ES4 で議論されていた機能は ES5, ES6 以降に引き継がれる ES5: ECMAScript 5th Edition(2009 年 12 月‒) ES6: ECMAScript 6th Edition(2015 年 6 月‒) ES7: ECMAScript 7th Edition(?‒) 7 / 46
  • 8. ECMAScript 5 2009 年 12 月リリース 2010 年 6 月に修正版の ECMAScript 5.1 がリリースされた ECMAScript 5 compatibility table IE 8 (2009 年 3 月‒) では動かない(IE 9: 2011 年 4 月‒) 目安:Bootstrap 3 は IE 8 にギリギリ対応 小粒ながら重要な機能追加がある 参考:ES6の前にES5のベストプラクティスを改めて考えたい - snyk_s log 8 / 46
  • 9. ECMAScript 5 の新機能 Object.create , Object.defineProperty Function.prototype.bind Array.prototype.indexOf , Array.prototype.forEach , Array.prototype.map , ... JSON "use strict"; etc... 9 / 46
  • 10. ECMAScript 6 2015 年 6 月 17 日に正式リリース ECMAScript 2015 Language Specification ‒ ECMA-262 6th Edition 重要な新機能の追加が多々ある 参考:Overview of ECMAScript 6 features 10 / 46
  • 11. ECMAScript 6 の新機能 クラス ( class , extends , super ) アロー関数( (x, y) => { ... } ) ブロックスコープの変数 ( let ) 、定数 ( const ) 列挙 ( for (var x of xs) ) ジェネレータ ( function * , yield ) テンプレートリテラル ( `${x} + ${y} = ${x + y}` ) etc... 11 / 46
  • 12. 対応状況 ECMAScript 6 compatibility table 各ブラウザ・処理系の対応状況が見られる 最もスコアが高いブラウザは IE 後継の Edge (69%) 前身の IE 11 は 10% 台しかない Firefox は 60% 台、Chrome は 50% くらい node.js は 23%、io.js は 43% どうでもいい機能も多々あるので 60% あれば優秀っぽい 規格がリリースされても実際に動作しなければ意味がない…… 12 / 46
  • 13. Babel 公式サイト:Babel · The compiler for writing next generation JavaScript 次世代の JavaScript を現世代の JavaScript に変換するトランスパイラ 旧称:6to5 (ES6 to ES5 の意) $ npm install -g babel でグローバルインストール 使い方 $ babel input.js -o output.js $ babel-node input.js 13 / 46
  • 14. try it out https://babeljs.io/repl/ let x = 42; { let x = 0; } let pow2 = x => x * x; class Base {} class Derived extends Base {} let xs = [2, 3, 5]; for (let x of xs) console.log(x); 14 / 46
  • 15. 注意 ES6 の全機能に対応しているわけではない また、ブラウザ(処理系)側のサポートが必要な機能も多々ある 一部の機能を使う場合には polyfill が必要になる IE, Safari には Symbol.iterator ( for ‒ of に必要)が無い Caveats · Babel Polyfill · Babel $ npm install --save babel して import "babel/polyfill"; ( require("babel/polyfill"); ) する 15 / 46
  • 16. ECMAScript 7 ECMAScript 7 compatibility table Babel は ES7 にも一部対応している --stage [0-1] フラグが必要 Experimental · Babel Stage 2 (Draft) 以上はデフォルトでオンになっている async / await や配列内包表記などが実装されている 変更がある可能性が非常に高いので実務では使えない Firefox (39) が SIMD に対応してたり (asm.js 関連) 、Chrome が Object.observe(AngularJS 関連)に対応してたりする 16 / 46
  • 18. altJS alternative JavaScript JavaScript にコンパイルすることができる言語 (注:前回発表が 2013 年末だったため 2013 年までの状況と現在の状況を 対比する構成になっています) 18 / 46
  • 20. 近況 Atom (2014‒) の設定は CoffeeScript で書ける 参考:GitHub の ATOM が CoffeeScript で書かれているのはどうなの? - ワザノバ ¦ wazanova ES6 の機能で割と楽に JavaScript を書けるようになる(なった)のでオワコ ン化が危惧されている CoffeeScript に対応した IDE やエディタは結構多い Gulp や Webpack などの設定を書く分には便利 20 / 46
  • 21. 利点(ES6 との比較) オブジェクトリテラルの中括弧 ( { , } ) を省略できる(最重要) this ( this. ) を @ と書ける 存在演算子がある foo? , foo?.bar , foo?() , foo ?= bar , foo ? bar if , for , case ‒ when などが文ではなく式である セミコロンや関数呼び出しの括弧なども省略できるので DSL 的な用途に向く JavaScript でセミコロンを省略すると痛い目を見ることがある 参考:Google JavaScript Style Guide 和訳 - セミコロン インデント言語なのでコールバック関数がネストしたような状況だと読みやす い場合もある 21 / 46
  • 22. 利点(Babel との比較) CoffeeScript の吐く JavaScript は基本的に ES3 に準拠している Babel の for ‒ of は ES6 の機能 ( Symbol.iterator ) に依存してい るため polyfill が必要になる 22 / 46
  • 23. 欠点 新たな言語を 1 つ覚える手間が増える JavaScript と CoffeeScript で演算子・キーワードの意味は大きく異なる ES6 の文法と合わなくなった構文もある for ‒ in と for ‒ of の意味が ECMAScript とほぼ逆 yield には対応している(そのまま書き出される)が ES6 の for ‒ of を使えないので列挙は手動 文字列に式を埋め込む方法 `${x}` (ES6) "#{x}" (CoffeeScript) インデント言語なのでコピペ耐性が低い 23 / 46
  • 24. TypeScript 特徴 (‒2013) Microsoft 謹製 altJS C# を設計した Anders Hejlsberg が関わっている JavaScript の(ほぼ)上位互換 既存ライブラリとの連携が楽 JavaScript の欠点も若干引き継いでいる Haxe と比較するとコンパイルが遅い まともな開発環境が現状 Visual Studio しかない 将来的に伸びる可能性はある 24 / 46
  • 25. 近況 伸びた ES6 への対応も進んでいる 型定義ファイル(既存 JS ライブラリに型を付けるためのファイル)も多い borisyankov/DefinitelyTyped DefinitelyTyped/tsd か vvakame/dtsm を使うとよい Microsoft が Visual Studio Code (2015/04/30-) を投げつけてきた コンパイル速度はだいぶ改善された 総コード量が 30 KB を超えたあたりからだんだん VS Code の入力補完が効 かなくなってくる 25 / 46
  • 26. 利点 基本的に型のある JavaScript として書ける 新言語を覚える手間が省ける 便利な文法の追加がある constructor (public hoge: Hoge) と書くと引数がそのままメンバ変数 になる enum が存在する 26 / 46
  • 27. 欠点 ECMAScript の欠点は大体 TypeScript の欠点でもある JavaScript の罠についてある程度知っている必要がある 将来的に本当に ECMAScript TypeScript になるのかは不明 ES6 の機能を本格的に使いたい場合 tsc でコンパイルした結果を更に babel にかける必要がある let ループ変数、 class の set / get 、 export / import など コンパイル時間増 ES6 対応が甘いところが結構ある generator 周りはほぼ使えない(tsc v1.5.0-beta 時点) ES6 形式の export に対応していない *.d.ts もある 27 / 46
  • 28. Haxe 特徴 (‒2013) 型推論が超強力 処理系は OCaml 製 代数的データ型がある altJS の中では歴史が長く実績がある ActionScript, Java, PHP, C#, C++ などにも変換できる 既存ライブラリとの連携が難しい 28 / 46
  • 29. 近況 TypeScript 流行の割を食った 型定義ファイルも TypeScript の方が充実している Haxe の型定義ファイルは lib.haxe.org にある 最近(5月12日)3.2 にバージョンアップした Haxe3.2の新機能まとめ - Qiita 10周年らしい 29 / 46
  • 30. 利点(TypeScript との比較) コンパイルが高速 入力補完の速度も優秀 代数的データ型とパターンマッチがある mixin がある Ruby, Scala の mixin よりも C# の拡張メソッドに近い macro がある メンバ変数/関数を使う際に this. を書く必要がない ゲーム製作に関しては OpenFL という割と実績のあるクロスプラットフォー ムのライブラリが存在する 30 / 46
  • 31. 欠点 ユーザが少ない 既存の JavaScript 資産を使い辛い CommonJS require との相性が悪かった Haxe 3.2.0で型付きのrequireをする - Qiita 型定義ファイルが少ない alert 1 つ呼ぶのにも js.Lib.alert みたいな書き方をする必要があ る 変数名に $ を使えない 吐かれた JavaScript を人間が読むのは難しい SourceMap 必須 31 / 46
  • 32. Flow Flow ¦ A static type checker for JavaScript 2014年11月に公開された新しい処理系(静的型チェッカー) Facebook 製 処理系は OCaml 製 ただの JavaScript も型検査できる Babel はデフォルトで Flow 用の型注釈を外してくれる 個人的にはあんまり試してないのでノーコメントで null チェックとかあるっぽい? React JSX のサポートもあるようだ 参考:Facebook Flowの初見の感想 - Qiita 32 / 46
  • 34. React A JavaScript library for building user interfaces ¦ React Facebook 製 "Just the UI" いわゆる「MVC の V (View) を作るやつ」 "Virtual DOM" Virtual DOM をスクラップ & ビルド → Real DOM は差分更新される サーバサイド (Node.js 上) でも動作する ( React.renderToString ) "one-way reactive data flow" 双方向データバインディング (AngularJS, Backbone) との対比 34 / 46
  • 35. ここを読みましょう 一人React.js Advent Calendar 2014 - Qiita VirtualDom - なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita あなたがReactを使うべき理由 - mizchi's blog Flux: Facebook が提唱した MVC の再発明 ReactとFluxのこと // Speaker Deck 10分で実装するFlux 実装は乱立している Dispatcher を無くした spoike/refluxjs というものもあるらしい 35 / 46
  • 36. JSX JSX ¦ XML-like syntax extension to ECMAScript XML を JavaScript に埋め込んだような記法 Babel はデフォルトで JSX を React のオブジェクトに変換してくれる https://babeljs.io/repl 36 / 46
  • 37. JSX を使った場合 var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<HelloMessage name="John" />, mountNode); 37 / 46
  • 38. JSX を使わない場合 var HelloMessage = React.createClass({ render: function() { return React.createElement("div", null, "Hello ", this.props.name); } }); React.render(React.createElement(HelloMessage, { name: "John" }), mountNode); 38 / 46
  • 39. JSX 記法の利点 簡潔 JSX 記法の欠点 JSX に対応した altJS が少ない JSX に対応したエディタが少ない シンタックスハイライトやインデントが崩壊する 39 / 46
  • 40. React + ES6 ES6 の class で React.Component を継承できる (v0.13‒) ES6 Classes ¦ Reusable Components ¦ React class HelloMessage extends React.Component { render() { return <div>Hello {this.props.name}</div>; } } 40 / 46
  • 41. React + Bootstrap React-Bootstrap まだベータ版 以下のような感じで Bootstrap のコンポーネントを配置できる <ButtonToolbar> <Button>Default</Button> </ButtonToolbar> 41 / 46
  • 43. (その前に)気になるもの Web Components W3C で策定中 Web Components Current Status - W3C 参考:Web Componentsの基本的な使い方・まとめ Polymer Google 製 最近(5月29日)1.0 になった 参考:Polymer と Web Components の違い9選(もとい Polymer の 便利機能) ::ハブろぐ 43 / 46
  • 44. ビルドについて ビルド周りの話を全くしていなかった 個人的には gulp.js と webpack を使っている gulp も webpack もプラグインで万能になるのでどっちに比重を置くかとい う問題がある Babel の場合、gulp には gulp-babel、webpack には babel-loader が ある 大抵の用途なら webpack で完結する気がする 日本語の情報が少なめ import ( require ) を解決したい場合 webpack か Browserify のどち らかが必要 44 / 46
  • 45. まとめ ECMAScript 6 に備えよう JavaScript 界の進化は著しい 落ち着いてほしい 登場から 20 年間落ち着いたことがなさそう 未来永劫落ち着くことはないだろう…… 頑張って付いて行きましょう…… 45 / 46