(1)

JavaScript Tips 2015
ES6 リリース記念号

主に ECMAScript 6 と altJS の話

---

(2)

目次

• ECMAScript 6 (+ Babel)
• altJS (CoffeeScript, TypeScript, Haxe, Flow)
• React（おまけ）
• Appendix: ES6 Features
  • 別スライドに分離

---

(3)

このスライドについて

• アウトライン, PDF 版, SlideShare 版
• Remark 製
  • gnab/remark
  • JavaScript 製スライドショー作成ツール
  • Markdown でスライドを書ける
    • ややパーザに癖あり
  • Syntax Highlighting あり

---

(4)

前提

• JavaScript とは
  • Java ではない
  • 基本的に Chrome, Firefox, IE などのブラウザ上で動く言語
• サーバサイド JavaScript 処理系もある
  • Node.js / io.js
  • パッケージマネージャ：npm
  • creationix/nvm か hokaccha/nodebrew でインストールするとよい
    • Windows は hakobera/nvmw というのがあるらしい（未確認）

---

(5)

ECMAScript 6

---

(6)

ECMAScript

• 公式サイト：ECMAScript
• Ecma International が定めたスクリプト言語の規格 (ECMA-262)
• ECMAScript 1st Edition は 1997 年 6 月公開
  • 背景：JavaScript (Netscape) と JScript (IE) が独自進化しすぎて互換性がない→ 標準化の機運
• JavaScript や ActionScript は ECMAScript の方言という扱い
  • ECMAScript に採用された機能は（将来的に）JavaScript でも使えるようになる（ことが期待される）

---

(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（?–）

---

(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
  • 参考：IE10 以下を切る場合の JavaScript チェックリスト - Qiita

---

(9)

ECMAScript 5 の新機能

• Object.create, Object.defineProperty
• Function.prototype.bind
• Array.prototype.indexOf, Array.prototype.forEach, Array.prototype.map, ...
• JSON
• "use strict";
• etc...

---

(10)

ECMAScript 6

• 2015 年 6 月 17 日に正式リリース
• ECMAScript 2015 Language Specification – ECMA-262 6th Edition
• 重要な新機能の追加が多々ある
• 参考：Overview of ECMAScript 6 features
• 参考：ECMAScript 6: New Features: Overview and Comparison

---

(11)

ECMAScript 6 の新機能

• クラス (class, extends, super)
• アロー関数（(x, y) => { ... }）
• ブロックスコープの変数 (let) 、定数 (const)
• 列挙 (for (var x of xs))
• ジェネレータ (function *, yield)
• テンプレートリテラル (`${x} + ${y} = ${x + y}`)
• etc...（詳しくは別スライドで）

---

(12)

対応状況

• ECMAScript 6 compatibility table
  • 各ブラウザ・処理系の対応状況が見られる
  • 最もスコアが高いブラウザは IE 後継の Edge (69%)
  • 前身の IE 11 は 10% 台しかない
  • Firefox は 60% 台、Chrome は 50% くらい
  • node.js は 23%、io.js は 43%
  • どうでもいい機能も多々あるので 60% あれば優秀っぽい
• 規格がリリースされても実際に動作しなければ意味がない……

---

(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

---

(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);

---

(15)

注意

• ES6 の全機能に対応しているわけではない
  • また、ブラウザ（処理系）側のサポートが必要な機能も多々ある
• 一部の機能を使う場合には polyfill が必要になる
  • IE, Safari には Symbol.iterator（for – of に必要）が無い
  • Caveats · Babel
  • Polyfill · Babel
    • $ npm install --save babel して import "babel/polyfill"; (require("babel/polyfill");) する

---

(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 関連）に対応してたりする

---

(17)

altJS

---

(18)

altJS

• alternative JavaScript
• JavaScript にコンパイルすることができる言語
• （注：前回発表が 2013 年末だったため 2013 年までの状況と現在の状況を対比する構成になっています）

---

(19)

CoffeeScript

特徴 (–2013)

• JavaScript の罠を回避するための言語
• 糖衣構文マシマシ
• そこそこ綺麗な JavaScript を吐く
• 常にオワコン化が危惧されている

---

(20)

近況

• Atom (2014–) の設定は CoffeeScript で書ける
  • 参考：GitHub の ATOM が CoffeeScript で書かれているのはどうなの? - ワザノバ | wazanova
• ES6 の機能で割と楽に JavaScript を書けるようになる（なった）のでオワコン化が危惧されている
• CoffeeScript に対応した IDE やエディタは結構多い
• Gulp や Webpack などの設定を書く分には便利

---

(21)

利点（ES6 との比較）

• オブジェクトリテラルの中括弧 ({, }) を省略できる（最重要）
• this (this.) を @ と書ける
• 存在演算子がある
  • foo?, foo?.bar, foo?(), foo ?= bar, foo ? bar
• if, for, case – when などが文ではなく式である
• セミコロンや関数呼び出しの括弧なども省略できるので DSL 的な用途に向く
  • JavaScript でセミコロンを省略すると痛い目を見ることがある
    • 参考：Google JavaScript Style Guide 和訳 - セミコロン
• インデント言語なのでコールバック関数がネストしたような状況だと読みやすい場合もある

---

(22)

利点（Babel との比較）

• CoffeeScript の吐く JavaScript は基本的に ES3 に準拠している
  • Babel の for – of は ES6 の機能 (Symbol.iterator) に依存しているため polyfill が必要になる

---

(23)

欠点

• 新たな言語を 1 つ覚える手間が増える
  • JavaScript と CoffeeScript で演算子・キーワードの意味は大きく異なる
• ES6 の文法と合わなくなった構文もある
  • for – in と for – of の意味が ECMAScript とほぼ逆
    • yield には対応している（そのまま書き出される）が ES6 の for – of を使えないので列挙は手動
  • 文字列に式を埋め込む方法
    • `${x}` (ES6)
    • "#{x}" (CoffeeScript)
• インデント言語なのでコピペ耐性が低い

---

(24)

TypeScript

特徴 (–2013)

• Microsoft 謹製 altJS
  • C# を設計した Anders Hejlsberg が関わっている
• JavaScript の（ほぼ）上位互換
  • 既存ライブラリとの連携が楽
  • JavaScript の欠点も若干引き継いでいる
• Haxe と比較するとコンパイルが遅い
• まともな開発環境が現状 Visual Studio しかない
• 将来的に伸びる可能性はある

---

(25)

近況

• 伸びた
• ES6 への対応も進んでいる
• 型定義ファイル（既存 JS ライブラリに型を付けるためのファイル）も多い
  • borisyankov/DefinitelyTyped
  • DefinitelyTyped/tsd か vvakame/dtsm を使うとよい
• Microsoft が Visual Studio Code (2015/04/30-) を投げつけてきた
• コンパイル速度はだいぶ改善された
• 総コード量が 30 KB を超えたあたりからだんだん VS Code の入力補完が効かなくなってくる

---

(26)

利点

• 基本的に型のある JavaScript として書ける
  • 新言語を覚える手間が省ける
• 便利な文法の追加がある
  • constructor (public hoge: Hoge) と書くと引数がそのままメンバ変数になる
  • enum が存在する

---

(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 もある

---

(28)

Haxe

特徴 (–2013)

• 型推論が超強力
• 処理系は OCaml 製
• 代数的データ型がある
• altJS の中では歴史が長く実績がある
• ActionScript, Java, PHP, C#, C++ などにも変換できる
• 既存ライブラリとの連携が難しい

---

(29)

近況

• TypeScript 流行の割を食った
• 型定義ファイルも TypeScript の方が充実している
  • Haxe の型定義ファイルは lib.haxe.org にある
• 最近（5月12日）3.2 にバージョンアップした
  • Haxe3.2の新機能まとめ - Qiita
  • 10周年らしい

---

(30)

利点（TypeScript との比較）

• コンパイルが高速
  • 入力補完の速度も優秀
• 代数的データ型とパターンマッチがある
• mixin がある
  • Ruby, Scala の mixin よりも C# の拡張メソッドに近い
• macro がある
• メンバ変数／関数を使う際に this. を書く必要がない
• ゲーム製作に関しては OpenFL という割と実績のあるクロスプラットフォームのライブラリが存在する

---

(31)

欠点

• ユーザが少ない
• 既存の JavaScript 資産を使い辛い
  • CommonJS require との相性が悪かった
    • Haxe 3.2.0で型付きのrequireをする - Qiita
  • 型定義ファイルが少ない
  • alert 1 つ呼ぶのにも js.Lib.alert みたいな書き方をする必要がある
  • 変数名に $ を使えない
• 吐かれた JavaScript を人間が読むのは難しい
  • SourceMap 必須

---

(32)

Flow

• Flow | A static type checker for JavaScript
• 2014年11月に公開された新しい処理系（静的型チェッカー）
• Facebook 製
• 処理系は OCaml 製
• ただの JavaScript も型検査できる
• Babel はデフォルトで Flow 用の型注釈を外してくれる
• 個人的にはあんまり試してないのでノーコメントで
  • null チェックとかあるっぽい？
  • React JSX のサポートもあるようだ
• 参考：Facebook Flowの初見の感想 - Qiita

---

(33)

React

---

(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) との対比

---

(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 というものもあるらしい

---

(36)

JSX

• JSX | XML-like syntax extension to ECMAScript
• XML を JavaScript に埋め込んだような記法
• Babel はデフォルトで JSX を React のオブジェクトに変換してくれる
  • https://babeljs.io/repl

---

(37)

JSX を使った場合

var HelloMessage = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

React.render(<HelloMessage name="John" />, mountNode);

---

(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);

---

(39)

JSX 記法の利点

• 簡潔

JSX 記法の欠点

• JSX に対応した altJS が少ない
• JSX に対応したエディタが少ない
  • シンタックスハイライトやインデントが崩壊する

---

(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>;
    }
}

---

(41)

React + Bootstrap

• React-Bootstrap
  • まだベータ版
• 以下のような感じで Bootstrap のコンポーネントを配置できる

<ButtonToolbar>
    <Button>Default</Button>
</ButtonToolbar>

---

(42)

まとめ

---

(43)

（その前に）気になるもの

• Web Components
  • W3C で策定中
  • Web Components Current Status - W3C
  • 参考：Web Componentsの基本的な使い方・まとめ
• Polymer
  • Google 製
  • 最近（5月29日）1.0 になった
  • 参考：Polymer と Web Components の違い9選（もとい Polymer の便利機能） ::ハブろぐ

---

(44)

ビルドについて

• ビルド周りの話を全くしていなかった
• 個人的には gulp.js と webpack を使っている
• gulp も webpack もプラグインで万能になるのでどっちに比重を置くかという問題がある
  • Babel の場合、gulp には gulp-babel、webpack には babel-loader がある
  • 大抵の用途なら webpack で完結する気がする
    • 日本語の情報が少なめ
  • import (require) を解決したい場合 webpack か Browserify のどちらかが必要

---

(45)

まとめ

• ECMAScript 6 に備えよう
• JavaScript 界の進化は著しい
  • 落ち着いてほしい
  • 登場から 20 年間落ち着いたことがなさそう
  • 未来永劫落ち着くことはないだろう……
• 頑張って付いて行きましょう……

---

(46)

END

We are hiring!
UNIPRO Inc.

---

ECMAScript 2015 Slideshows