Successfully reported this slideshow.
Your SlideShare is downloading. ×

JavaScript Tips 2015(PDF 版)

Upcoming SlideShare
Java scriptの進化
Java scriptの進化
Loading in …3
×

Check these out next

1 of 46 Ad
1 of 46 Ad

JavaScript Tips 2015(PDF 版)

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

Advertisement

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

×