JavaScript Tips 2015

ES6 リリース記念号主に ECMAScript 6 と altJS の話

2015/06/062015/06/30 改訂

taskie

1 / 46

目次ECMAScript 6 (+ Babel)altJS (CoffeeScript, TypeScript, Haxe, Flow)React（おまけ）Appendix: ES6 Features

別スライドに分離

2 / 46

このスライドについてRemark 製

gnab/remarkJavaScript 製スライドショー作成ツールMarkdown でスライドを書ける

ややパーザに癖ありSyntax Highlighting あり

3 / 46

前提JavaScript とは

Java ではない基本的に Chrome, Firefox, IE などのブラウザ上で動く言語

サーバサイド JavaScript 処理系もあるNode.js / io.jsパッケージマネージャ：npmcreationix/nvm か hokaccha/nodebrew でインストールするとよい

Windows は hakobera/nvmw というのがあるらしい（未確認）

4 / 46

ECMAScript 6

5 / 46

ECMAScript公式サイト：ECMAScriptEcma 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 tableIE 8 (2009 年 3 月‒) では動かない（IE 9: 2011 年 4 月‒）

目安：Bootstrap 3 は IE 8 にギリギリ対応小粒ながら重要な機能追加がある

参考：ES6の前にES5のベストプラクティスを改めて考えたい - snyk_slog

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 generationJavaScript次世代の 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 · BabelPolyfill · Babel

$ npm install --save babel して import "babel/polyfill";

( require("babel/polyfill"); ) する

15 / 46

ECMAScript 7

ECMAScript 7 compatibility tableBabel は ES7 にも一部対応している

--stage [0-1] フラグが必要Experimental · BabelStage 2 (Draft) 以上はデフォルトでオンになっている

async / await や配列内包表記などが実装されている変更がある可能性が非常に高いので実務では使えない

Firefox (39) が SIMD に対応してたり (asm.js 関連) 、Chrome がObject.observe（AngularJS 関連）に対応してたりする

16 / 46

altJS

17 / 46

altJS

alternative JavaScriptJavaScript にコンパイルすることができる言語（注：前回発表が 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 謹製 altJSC# を設計した Anders Hejlsberg が関わっている

JavaScript の（ほぼ）上位互換既存ライブラリとの連携が楽JavaScript の欠点も若干引き継いでいる

Haxe と比較するとコンパイルが遅いまともな開発環境が現状 Visual Studio しかない将来的に伸びる可能性はある

24 / 46

近況

伸びたES6 への対応も進んでいる型定義ファイル（既存 JS ライブラリに型を付けるためのファイル）も多い

borisyankov/DefinitelyTypedDefinitelyTyped/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の新機能まとめ - Qiita10周年らしい

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 JavaScript2014年11月に公開された新しい処理系（静的型チェッカー）Facebook 製処理系は OCaml 製ただの JavaScript も型検査できるBabel はデフォルトで Flow 用の型注釈を外してくれる個人的にはあんまり試してないのでノーコメントで

null チェックとかあるっぽい？React JSX のサポートもあるようだ

参考：Facebook Flowの初見の感想 - Qiita

32 / 46

React

33 / 46

ReactA JavaScript library for building user interfaces | ReactFacebook 製"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 - QiitaVirtualDom - なぜ仮想DOMという概念が俺達の魂を震えさせるのか - QiitaあなたがReactを使うべき理由 - mizchi's blogFlux: Facebook が提唱した MVC の再発明

ReactとFluxのこと // Speaker Deck10分で実装するFlux実装は乱立している

Dispatcher を無くした spoike/refluxjs というものもあるらしい

35 / 46

JSX

JSX | XML-like syntax extension to ECMAScriptXML を 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 ComponentsW3C で策定中Web Components Current Status - W3C参考：Web Componentsの基本的な使い方・まとめ

PolymerGoogle 製最近（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

ENDWe are hiring!

http://unipro.co.jp/

46 / 46