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
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
320
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
300
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
testingを眺める
matumoto
1
140
Reading Rails 1.0 Source Code
okuramasafumi
0
250
print("Hello, World")
eddie
2
530
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
個人軟體時代
ethanhuang13
0
330
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
150
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
11
4.4k
API Platform 4.2: Redefining API Development
soyuka
0
200
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Designing for Performance
lara
610
69k
How GitHub (no longer) Works
holman
315
140k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Music & Morning Musume
bryan
46
6.8k
A designer walks into a library…
pauljervisheath
207
24k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Writing Fast Ruby
sferik
628
62k
Building an army of robots
kneath
306
46k
Raft: Consensus for Rubyists
vanstee
140
7.1k
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とは違うメリット があるはず
そのときは 使ってみようかと思います
おしまい