よみがえるCoffeeScript

Transcript

1. よみがえる CoffeeScript
2. ES2015が登場してすっかり CoffeeScriptの姿は消えました
3. ES2015+で追加された機能 が導入されなかったから
4. CoffeeScriptは死んだ？
5. いいえ
6. CoffeeScript2として 蘇りました！
7. 今までES5出力してましたが、 ES2015+を出力します
8. もちろん
9. 今までのCoffeeScript構文 が使えます
10. ・インデントブロック ・比較が厳密 ・returnが不要
11. コードが簡潔になります、 そう、CoffeeScriptならね
12. 使い方
13. yarnでインストールします
14. $ yarn global add coffeescript
15. coffeeとたたくと・・・
16. $ coffee coffee> console.log 'Hello CoffeeScript!' Hello CoffeeScript! undefined
17. コードを監視して 随時コンパイルさせる場合
18. $ yarn add coffeescript --dev
19. package.jsonに コマンドラインを追加します
20. "scripts": { "compile": "coffee -o lib/ -cw src/" },
21. コマンドをたたくと・・・
22. $ yarn run compile yarn run v1.0.2 $ compile -o lib/ -cw src/ 15:35:06 - compiled /***/src/index.coffee
23. こんなコードが
24. console.log 'Hello CoffeeScript!'
25. こうなります
26. // Generated by CoffeeScript 2.0.1 (function() { console.log('Hello CoffeeScript!'); }).call(this);
27. ES2016のasync/awaitも
28. sleep = (ms) -> new Promise (resolve) -> window.setTimeout resolve, ms countdown = (seconds) -> for i in [seconds..1] await sleep 1000 # wait one second
29. こんなコードが
30. 15:44:28 - compiled /***/src/index.coffee
31. こうなります
32. // Generated by CoffeeScript 2.0.1 (function() { var countdown, sleep; sleep = function(ms) { return new Promise(function(resolve) { return window.setTimeout(resolve, ms); }); }; countdown = async function(seconds) { （・・・長いので省略）
33. でも、知っての通りIE11や ちょっと古いスマホブラウザでは 動きません
34. なので、 トランスパイルが必要です
35. babelやBubléなどを入れます
36. 今回はbabelを入れます
37. $ yarn add babel-core --dev
38. $ yarn add babel-preset-env --dev
39. このままでは動かないので、設 定ファイルを用意します
40. .babelrc
41. { "presets": ["env"] }
42. コマンドも用意して・・・
43. "scripts": { "compile": "coffee -o lib/ -cw src/", "transpile": "coffee -o lib/ -tw src/" },
44. コマンドをたたくと・・・
45. $ yarn run transpile
46. （長すぎなので、省略）
47. npmtrendを見てみると、 2のリリースと同時に インストール数が 伸びているのが分かります
49. TypeScriptと比較すると
51. 何も変わっていませんが
52. 動的型付けのCoffeeScriptは TypeScriptとは違うメリット があるはず
53. そのときは 使ってみようかと思います
54. おしまい