Successfully reported this slideshow.
Your SlideShare is downloading. ×

AltES6 Introduction

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 23 Ad
Advertisement

More Related Content

Recently uploaded (20)

Advertisement

AltES6 Introduction

  1. 1. AltES6 Introduction さっき作った(@make_now_just) 1
  2. 2. 1. 自己紹介 2. AltES6とは 3. AltES6の例 a. Spider b. Earl Grey c. その他 4. まとめ 目次 2
  3. 3. 自己紹介 ● 「さっき作った」という変な名前です ● Quineをたくさん書きました (200言語くらい) ● Twitter: @make_now_just ● GitHub: @MakeNowJust 3
  4. 4. AltES6とは 4
  5. 5. AltES6とは? 従来のAltJS 5 AltJS
  6. 6. AltES6とは? AltES6の場合 6 AltES6
  7. 7. AltES6のメリット ● ES6にコンパイルされる →重いランタイムを使う必要が無くなる →ES6が動く環境ではES6のまま、  そうで無ければBabelやTraceurでES5にして実行、  使い分けできる ● ES6も結局はJavaScriptなので、(構文的に)書きたくない! →AltES6使えば別の構文で書ける 7
  8. 8. AltES6の例 8
  9. 9. Spider 9 http://spiderlang.org
  10. 10. Spider(概観) $ npm install spider-script ● Go言語、Swift、Python、C#、CoffeeScriptの 影響を受けたプログラミング言語 ● ES5かES6をターゲットに変換できる ● 日本語の記事がちょっとだけある (Qiitaに3件くらい) 10
  11. 11. Spider(特徴) ● 構文はJavaScriptをベースにして、 SwiftとGo言語のいいとこ取りをした感じ ● ただしセミコロン必須! ● ES6の構文が割とそのまま使える ● Go言語のようなChannelとgoブロックがある (ただし別ライブラリが必要) 11
  12. 12. Spider(特徴) // コメント fn add1(x, y = 10) { return x + y; } var {name} = {name:"MakeNowJust"}; var add2 = (x, y) => x + y; if true { ::console.log("Hey (name)"); } 12 function add1(x, y = 10) { return x + y; } let {name} = {name:"MakeNowJust"}; let add2 = (x, y) => { return x + y; }; if (true) { console.log("Hey " + name); } Spider ES6
  13. 13. Spider(特徴) use :node; import Channel from 'spider-channels'; var chan = new Channel(); setTimeout(() => { chan <- "finish"; }, 1000); go { console.log(<-chan); } import {Channel} from 'spider-channels'; let chan = new Channel(); setTimeout(() => { chan.push("finish"); }); (async function () { console.log(await chan); })(); 13 Spider ES6
  14. 14. Earl Grey http://breuleux.github.io/earl-grey/ 14
  15. 15. Earl Grey(概観) $ npm install earlgrey ● Pythonのような見た目でマクロがある言語 ● ES5かES6をターゲットに変換できる ● 比較的新しい言語なので情報が皆無 15
  16. 16. Earl Grey(特徴) ● 構文はインデントベースで一見Pythonのよう ● ただし、構文はもの凄く柔軟(PythonというよりPerl的) ● 実行にランタイムが必要 ● マクロでさらに構文を拡張できる ● EDSLでVirtualDOMを組めるearl-reactというものもある ● あまりES6の機能使わない‥ 16
  17. 17. Earl Grey(特徴) ;; 全て同じ意味 if true: print .Hello if true: [print "Hello"] if{true, print 'Hello'} var x = "variable" ;; 再代入可能 let y = "const" ;; 再代入不可 x = "ok" ;; y = "error!" ( 変換時にエラーが出る ) ;; 他にも色々と機能があるけれど、 ;; 変換結果が複雑なので割愛 17 if (true) console.log("Hello"); if (true) console.log("Hello"); if (true) console.log("Hello"); let x = "variable"; let y = "const"; x = "ok" Earl Grey ES6
  18. 18. Earl Grey(特徴) require: earl-react as React require-macros: earl-react -> (%, component) globals: document component Hello: render() = div % 'Hello {@props.name}' React.render { Hello % name = "Balthazar", document.get-element-by-id("mount") } 18 // たくさん出力されるので省力 Earl Grey ES6
  19. 19. SpiderとEarl Grey ● ES5とES6、どちらに変換するか選ぶことができる (内部的には、ES6のASTを作ったあと、 ES6ならescodegenで、ES5ならBabelかTraceurで変換) ● SpiderはデフォルトではES5、 Earl GreyではデフォルトでES6 19
  20. 20. SpiderとEarl Grey SpiderはあくまでベターJavaScript、という印象 対してEarl Greyは、JavaScript(Node.js)のエコシステムを 利用できる別のプログラミング言語を目指してる感じがする どちらも一長一短だと思います 20
  21. 21. その他 ● CoffeeScriptでもES6のGeneratorsには対応してるので、 CoffeeScriptもAltES6かもしれません ● DartもES6へのtranspilerを開発しているらしいです ● TypeScriptも次のバージョンで ES6のGeneratorsに対応するはずです 21
  22. 22. まとめ ● ES6を直接使うのではなく、AltES6という選択肢もある ● AltES6の例として、SpiderやEarl Greyがある ● 既存のAltJSも、ES6のコードを吐く方向(AltES6) へと進んでいっている ● AltES6の未来は明るい! 22
  23. 23. 余談:どうやってAltES6を見つけてくるの? ● RedditとかHacker Newsを監視する ● CoffeeScriptのリポジトリのWikiをチェックする https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS JavaScriptにコンパイルされる言語の一覧がある 23

×