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
Fast Forward Javascript
Search
Sho Kusano
October 16, 2012
Programming
1
630
Fast Forward Javascript
立ち止まってる暇なんてない。 CoffeeScript の紹介です。
Sho Kusano
October 16, 2012
Tweet
Share
More Decks by Sho Kusano
See All by Sho Kusano
ISUCON 反省会
rosylilly
1
280
ISUCON 夏祭り 2023 ハンズオン資料
rosylilly
1
6.4k
今日から始めるリアルタイム配信の裏側
rosylilly
10
7.6k
ISUCON12 事前講習
rosylilly
6
15k
BURST #0
rosylilly
1
230
ISUCON 11 Prior
rosylilly
10
18k
ISUCON 夏期講習 2020
rosylilly
7
10k
真剣.js / shinken-js
rosylilly
1
3.9k
Sustainable Operation
rosylilly
2
3.5k
Other Decks in Programming
See All in Programming
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
izumin5210
12
6.3k
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
140
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
130
Blueskyのプラグインを作ってみた
hakkadaikon
1
280
DevDay2025-OracleDatabase-kernel-addressing-history
oracle4engineer
PRO
7
1.6k
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
uvb_76
0
170
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
130
OpenNext + Hono on Cloudflare でイマドキWeb開発スタックを実現する
rokuosan
0
110
"使いづらい" をリバースエンジニアリングする UI の読み解き方
rebase_engineering
0
110
TVer iOSチームの共通認識の作り方 - Findy Job LT iOSアプリ開発の裏側 開発組織が向き合う課題とこれから
techtver
PRO
0
710
External SecretsのさくらProvider初期実装を担当しています
logica0419
0
230
Practical Domain-Driven Design - Workshop at NDC 2025
mufrid
0
130
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Producing Creativity
orderedlist
PRO
346
40k
A Modern Web Designer's Workflow
chriscoyier
693
190k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Art, The Web, and Tiny UX
lynnandtonic
298
21k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Designing for Performance
lara
608
69k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Side Projects
sachag
454
42k
Fireside Chat
paigeccino
37
3.5k
Site-Speed That Sticks
csswizardry
7
590
Transcript
Forward Fast Javascript Sho Kusano / rosylilly
Profile Sho Kusano rosylilly Facebook: sho.kusano Twitter: rosylilly Mail:
[email protected]
Profile Works Dwango/Qteras Model (স) 10/28(Fri) Numero Tokyo
―― Too Many Works ࣄࣺͯΔ΄Ͳ͋Δ
Q. Javascript͕؆୯ͩͱࢥ͏ํ ஏ͔͕ͣ͠ΒͣڍखΛ͓ئ͍͠·͢
A. ʹͱ͍ͬͯ͠ Ͱ͖ΔݶΓॻ͖ͨ͘ͳ͍
ָ͕ग़དྷΕͦΕ͕Ұ൪
ָͯ͠ ͓͕ۚ ཉ͍͠
CoffeeScript is a little language that compiles into JavaScript. http://coffeescript.org/
Fast Forward Javascript ߴʹ લਐΉͨΊͷ CoffeeScript
Javascript ʹ᠘͕ଟ͍ this scope, Prototypical Object, Object forEach
ʰલਐ͢Δ͜ͱʱʹूதग़དྷͳ͍
Let’s try CoffeeScript!
Example Cases
Example Case: This binding var object = { name: 'obj',
func: function(){ console.log(this.name); } } object.func(); // → obj var f = object.func; f(); // → undefined var other = {name: 'other', func: f}; other.func(); // → other
Example Case: This Binding class Example name: 'obj' func: ()=>
console.log @name object = new Example object.func() # → obj f = object.func f() # → obj other = { name: 'other' func: f } other.func() # → obj
Example Case: Prototypical Object var Abstruct = function() { this.prop
= 'property'; } Abstruct.prototype.func = function(){}; var Class = function() { } Class.prototype = {}; for(var method in Abstruct.prototype) { Class.prototype[method] = Abstruct.prototype[method]; }
Example Case: Prototypical Object class Abstruct prop: 'property' func: ()->
class Class extends Abstruct
Example Case: Object forEach var object = { a: 1,
b: 2, c: 3 } for(var key in object) { if(object.hasOwnProperty(key)) console.log(object[key]); }
Example Case: Object forEach object = { a: 1 b:
2, c: 3 } for key, val of object console.log val
Many Features! Destructuring Assignment, Function binding, Embedded JavaScript, Switch/When/Else, Try/Catch/Finally,
Chained Comparisons, String Interpolation, Block Strings, and Block Comments, Block Regular Expressions, Cake, and Cakefiles, "text/coffeescript" Script Tags
Don’t worry!!
֮͑Δͷ͕େมͦ͏... Javascript Ͱۤ͠Ή࣌ؒͱ CoffeeScript Λ֮͑Δ࣌ؒ ͲͪΒ͕͍͔ ↓
͏Ұݸݴޠ֮͑Δͷͪΐͬͱ…… ͋͘·Ͱ JS ͷγϯλοΫεγϡΨʔͱ ଊ͑ͯΑ͍ (JSX, HeXe ͳͲͱൺͯ) ↓
ಋೖ͕େมͦ͏…… Rails3 ͕ WebFront ͳΒࠓ͔Β͑·͢ɻ ͦͷଞɺ Coffee ͔Β JS ʹมͰ͖Δ͠
ϒϥβ্Ͱ Coffee ಈ͔͢Έ͋Δ ↓
ϝϯόʔͷઆಘ͕…… ͕ࣗࣾͰΤϰΝϯδΣϦετʹͳΔνϟϯεʂ ↓
Thank you for listening. rosylilly Fin Fast Forward Javascript