Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
よみがえるCoffeeScript
Search
Kaneko Takeshi
October 20, 2017
Programming
0
54
よみがえるCoffeeScript
Kaneko Takeshi
October 20, 2017
Tweet
Share
More Decks by Kaneko Takeshi
See All by Kaneko Takeshi
オープンソースライセンスについて勉強する定期
tkckaneko
0
26
Eye Tracking on the Browser
tkckaneko
0
83
IEEE754を完全に理解した
tkckaneko
1
75
CSSのトレンドをみんなで見よう -2021年-
tkckaneko
0
92
多分これが一番早いと思います
tkckaneko
0
25
暗黒面の話
tkckaneko
0
23
CSR / SSR / SSG / JAMstack
tkckaneko
0
67
BOLT
tkckaneko
0
25
CSS Logical Properties and Values
tkckaneko
0
32
Other Decks in Programming
See All in Programming
Hack Claude Code with Claude Code
choplin
7
2.6k
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
280
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
1.1k
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
150
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
320
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
350
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
260
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
110
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Typedesign – Prime Four
hannesfritz
42
2.7k
4 Signs Your Business is Dying
shpigford
184
22k
Navigating Team Friction
lara
187
15k
The Invisible Side of Design
smashingmag
301
51k
Code Review Best Practice
trishagee
69
19k
Unsuck your backbone
ammeep
671
58k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Embracing the Ebb and Flow
colly
86
4.8k
Transcript
よみがえる CoffeeScript
ES2015が登場してすっかり CoffeeScriptの姿は消えました
ES2015+で追加された機能 が導入されなかったから
CoffeeScriptは死んだ?
いいえ
CoffeeScript2として 蘇りました!
今までES5出力してましたが、 ES2015+を出力します
もちろん
今までのCoffeeScript構文 が使えます
・インデントブロック ・比較が厳密 ・returnが不要
コードが簡潔になります、 そう、CoffeeScriptならね
使い方
yarnでインストールします
$ yarn global add coffeescript
coffeeとたたくと・・・
$ coffee coffee> console.log 'Hello CoffeeScript!' Hello CoffeeScript! undefined
コードを監視して 随時コンパイルさせる場合
$ yarn add coffeescript --dev
package.jsonに コマンドラインを追加します
"scripts": { "compile": "coffee -o lib/ -cw src/" },
コマンドをたたくと・・・
$ yarn run compile yarn run v1.0.2 $ compile -o
lib/ -cw src/ 15:35:06 - compiled /***/src/index.coffee
こんなコードが
console.log 'Hello CoffeeScript!'
こうなります
// Generated by CoffeeScript 2.0.1 (function() { console.log('Hello CoffeeScript!'); }).call(this);
ES2016のasync/awaitも
sleep = (ms) -> new Promise (resolve) -> window.setTimeout resolve,
ms countdown = (seconds) -> for i in [seconds..1] await sleep 1000 # wait one second
こんなコードが
15:44:28 - compiled /***/src/index.coffee
こうなります
// 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) { (・・・長いので省略)
でも、知っての通りIE11や ちょっと古いスマホブラウザでは 動きません
なので、 トランスパイルが必要です
babelやBubléなどを入れます
今回はbabelを入れます
$ yarn add babel-core --dev
$ yarn add babel-preset-env --dev
このままでは動かないので、設 定ファイルを用意します
.babelrc
{ "presets": ["env"] }
コマンドも用意して・・・
"scripts": { "compile": "coffee -o lib/ -cw src/", "transpile": "coffee
-o lib/ -tw src/" },
コマンドをたたくと・・・
$ yarn run transpile
(長すぎなので、省略)
npmtrendを見てみると、 2のリリースと同時に インストール数が 伸びているのが分かります
None
TypeScriptと比較すると
None
何も変わっていませんが
動的型付けのCoffeeScriptは TypeScriptとは違うメリット があるはず
そのときは 使ってみようかと思います
おしまい