Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript Tips 2015(PDF 版)

2,631 views

Published on

HTML 版: http://alprosys.com/es6/js_tips_2015.html
主に ECMAScript 6 と altJS の話

Published in: Software
  • Be the first to comment

JavaScript Tips 2015(PDF 版)

  1. 1. JavaScript Tips 2015 ES6 リリース記念号 主に ECMAScript 6 と altJS の話 2015/06/06 2015/06/30 改訂 taskie 1 / 46
  2. 2. 目次 ECMAScript 6 (+ Babel) altJS (CoffeeScript, TypeScript, Haxe, Flow) React(おまけ) Appendix: ES6 Features 別スライドに分離 2 / 46
  3. 3. このスライドについて Remark 製 gnab/remark JavaScript 製スライドショー作成ツール Markdown でスライドを書ける ややパーザに癖あり Syntax Highlighting あり 3 / 46
  4. 4. 前提 JavaScript とは Java ではない 基本的に Chrome, Firefox, IE などのブラウザ上で動く言語 サーバサイド JavaScript 処理系もある Node.js / io.js パッケージマネージャ:npm creationix/nvm か hokaccha/nodebrew でインストールするとよい Windows は hakobera/nvmw というのがあるらしい(未確認) 4 / 46
  5. 5. ECMAScript 6 5 / 46
  6. 6. ECMAScript 公式サイト:ECMAScript Ecma International が定めたスクリプト言語の規格 (ECMA-262) ECMAScript 1st Edition は 1997 年 6 月公開 背景:JavaScript (Netscape) と JScript (IE) が独自進化しすぎて互換性 がない→ 標準化の機運 JavaScript や ActionScript は ECMAScript の方言という扱い ECMAScript に採用された機能は(将来的に)JavaScript でも使えるよ うになる(ことが期待される) 6 / 46
  7. 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. 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. 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. 10. ECMAScript 6 2015 年 6 月 17 日に正式リリース ECMAScript 2015 Language Specification ‒ ECMA-262 6th Edition 重要な新機能の追加が多々ある 参考:Overview of ECMAScript 6 features 10 / 46
  11. 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. 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. 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. 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. 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. 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
  17. 17. altJS 17 / 46
  18. 18. altJS alternative JavaScript JavaScript にコンパイルすることができる言語 (注:前回発表が 2013 年末だったため 2013 年までの状況と現在の状況を 対比する構成になっています) 18 / 46
  19. 19. CoffeeScript 特徴 (‒2013) JavaScript の罠を回避するための言語 糖衣構文マシマシ そこそこ綺麗な JavaScript を吐く 常にオワコン化が危惧されている 19 / 46
  20. 20. 近況 Atom (2014‒) の設定は CoffeeScript で書ける 参考:GitHub の ATOM が CoffeeScript で書かれているのはどうなの? - ワザノバ ¦ wazanova ES6 の機能で割と楽に JavaScript を書けるようになる(なった)のでオワコ ン化が危惧されている CoffeeScript に対応した IDE やエディタは結構多い Gulp や Webpack などの設定を書く分には便利 20 / 46
  21. 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. 22. 利点(Babel との比較) CoffeeScript の吐く JavaScript は基本的に ES3 に準拠している Babel の for ‒ of は ES6 の機能 ( Symbol.iterator ) に依存してい るため polyfill が必要になる 22 / 46
  23. 23. 欠点 新たな言語を 1 つ覚える手間が増える JavaScript と CoffeeScript で演算子・キーワードの意味は大きく異なる ES6 の文法と合わなくなった構文もある for ‒ in と for ‒ of の意味が ECMAScript とほぼ逆 yield には対応している(そのまま書き出される)が ES6 の for ‒ of を使えないので列挙は手動 文字列に式を埋め込む方法 `${x}` (ES6) "#{x}" (CoffeeScript) インデント言語なのでコピペ耐性が低い 23 / 46
  24. 24. TypeScript 特徴 (‒2013) Microsoft 謹製 altJS C# を設計した Anders Hejlsberg が関わっている JavaScript の(ほぼ)上位互換 既存ライブラリとの連携が楽 JavaScript の欠点も若干引き継いでいる Haxe と比較するとコンパイルが遅い まともな開発環境が現状 Visual Studio しかない 将来的に伸びる可能性はある 24 / 46
  25. 25. 近況 伸びた ES6 への対応も進んでいる 型定義ファイル(既存 JS ライブラリに型を付けるためのファイル)も多い borisyankov/DefinitelyTyped DefinitelyTyped/tsd か vvakame/dtsm を使うとよい Microsoft が Visual Studio Code (2015/04/30-) を投げつけてきた コンパイル速度はだいぶ改善された 総コード量が 30 KB を超えたあたりからだんだん VS Code の入力補完が効 かなくなってくる 25 / 46
  26. 26. 利点 基本的に型のある JavaScript として書ける 新言語を覚える手間が省ける 便利な文法の追加がある constructor (public hoge: Hoge) と書くと引数がそのままメンバ変数 になる enum が存在する 26 / 46
  27. 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. 28. Haxe 特徴 (‒2013) 型推論が超強力 処理系は OCaml 製 代数的データ型がある altJS の中では歴史が長く実績がある ActionScript, Java, PHP, C#, C++ などにも変換できる 既存ライブラリとの連携が難しい 28 / 46
  29. 29. 近況 TypeScript 流行の割を食った 型定義ファイルも TypeScript の方が充実している Haxe の型定義ファイルは lib.haxe.org にある 最近(5月12日)3.2 にバージョンアップした Haxe3.2の新機能まとめ - Qiita 10周年らしい 29 / 46
  30. 30. 利点(TypeScript との比較) コンパイルが高速 入力補完の速度も優秀 代数的データ型とパターンマッチがある mixin がある Ruby, Scala の mixin よりも C# の拡張メソッドに近い macro がある メンバ変数/関数を使う際に this. を書く必要がない ゲーム製作に関しては OpenFL という割と実績のあるクロスプラットフォー ムのライブラリが存在する 30 / 46
  31. 31. 欠点 ユーザが少ない 既存の JavaScript 資産を使い辛い CommonJS require との相性が悪かった Haxe 3.2.0で型付きのrequireをする - Qiita 型定義ファイルが少ない alert 1 つ呼ぶのにも js.Lib.alert みたいな書き方をする必要があ る 変数名に $ を使えない 吐かれた JavaScript を人間が読むのは難しい SourceMap 必須 31 / 46
  32. 32. Flow Flow ¦ A static type checker for JavaScript 2014年11月に公開された新しい処理系(静的型チェッカー) Facebook 製 処理系は OCaml 製 ただの JavaScript も型検査できる Babel はデフォルトで Flow 用の型注釈を外してくれる 個人的にはあんまり試してないのでノーコメントで null チェックとかあるっぽい? React JSX のサポートもあるようだ 参考:Facebook Flowの初見の感想 - Qiita 32 / 46
  33. 33. React 33 / 46
  34. 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. 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. 36. JSX JSX ¦ XML-like syntax extension to ECMAScript XML を JavaScript に埋め込んだような記法 Babel はデフォルトで JSX を React のオブジェクトに変換してくれる https://babeljs.io/repl 36 / 46
  37. 37. JSX を使った場合 var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<HelloMessage name="John" />, mountNode); 37 / 46
  38. 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. 39. JSX 記法の利点 簡潔 JSX 記法の欠点 JSX に対応した altJS が少ない JSX に対応したエディタが少ない シンタックスハイライトやインデントが崩壊する 39 / 46
  40. 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. 41. React + Bootstrap React-Bootstrap まだベータ版 以下のような感じで Bootstrap のコンポーネントを配置できる <ButtonToolbar> <Button>Default</Button> </ButtonToolbar> 41 / 46
  42. 42. まとめ 42 / 46
  43. 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. 44. ビルドについて ビルド周りの話を全くしていなかった 個人的には gulp.js と webpack を使っている gulp も webpack もプラグインで万能になるのでどっちに比重を置くかとい う問題がある Babel の場合、gulp には gulp-babel、webpack には babel-loader が ある 大抵の用途なら webpack で完結する気がする 日本語の情報が少なめ import ( require ) を解決したい場合 webpack か Browserify のどち らかが必要 44 / 46
  45. 45. まとめ ECMAScript 6 に備えよう JavaScript 界の進化は著しい 落ち着いてほしい 登場から 20 年間落ち着いたことがなさそう 未来永劫落ち着くことはないだろう…… 頑張って付いて行きましょう…… 45 / 46
  46. 46. END We are hiring! http://unipro.co.jp/ 46 / 46

×