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
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
550
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
660
VS Code Update for GitHub Copilot
74th
2
620
RailsGirls IZUMO スポンサーLT
16bitidol
0
170
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
技術同人誌をMCP Serverにしてみた
74th
1
630
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.2k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
33k
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
110
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
420
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
770
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
680
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Documentation Writing (for coders)
carmenintech
72
4.9k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Docker and Python
trallard
44
3.5k
Designing for Performance
lara
610
69k
Building Adaptive Systems
keathley
43
2.6k
Code Review Best Practice
trishagee
69
18k
The Cult of Friendly URLs
andyhume
79
6.5k
Visualization
eitanlees
146
16k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Balancing Empowerment & Direction
lara
1
410
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とは違うメリット があるはず
そのときは 使ってみようかと思います
おしまい