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
68
BOLT
tkckaneko
0
28
CSS Logical Properties and Values
tkckaneko
0
32
Other Decks in Programming
See All in Programming
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
3
260
Ruby Parser progress report 2025
yui_knk
1
250
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
280
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
680
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
3
1.8k
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
210
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
120
パスタの技術
yusukebe
1
550
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
230
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
740
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
Featured
See All Featured
The Language of Interfaces
destraynor
160
25k
Six Lessons from altMBA
skipperchong
28
4k
RailsConf 2023
tenderlove
30
1.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
500
Unsuck your backbone
ammeep
671
58k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
284
13k
The Invisible Side of Design
smashingmag
301
51k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Site-Speed That Sticks
csswizardry
10
800
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
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とは違うメリット があるはず
そのときは 使ってみようかと思います
おしまい