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
74
CSSのトレンドをみんなで見よう -2021年-
tkckaneko
0
91
多分これが一番早いと思います
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
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
590
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.9k
GraphRAGの仕組みまるわかり
tosuri13
8
520
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
890
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
140
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
110
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
技術同人誌をMCP Serverにしてみた
74th
1
590
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
490
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
470
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Balancing Empowerment & Direction
lara
1
400
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
Site-Speed That Sticks
csswizardry
10
680
Designing Experiences People Love
moore
142
24k
Unsuck your backbone
ammeep
671
58k
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とは違うメリット があるはず
そのときは 使ってみようかと思います
おしまい