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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Sho Kusano
October 16, 2012
Programming
660
1
Share
Fast Forward Javascript
立ち止まってる暇なんてない。 CoffeeScript の紹介です。
Sho Kusano
October 16, 2012
More Decks by Sho Kusano
See All by Sho Kusano
ISUCON 反省会
rosylilly
1
330
ISUCON 夏祭り 2023 ハンズオン資料
rosylilly
1
6.6k
今日から始めるリアルタイム配信の裏側
rosylilly
10
8.8k
ISUCON12 事前講習
rosylilly
6
16k
BURST #0
rosylilly
1
270
ISUCON 11 Prior
rosylilly
10
18k
ISUCON 夏期講習 2020
rosylilly
7
11k
真剣.js / shinken-js
rosylilly
1
4.2k
Sustainable Operation
rosylilly
2
3.7k
Other Decks in Programming
See All in Programming
へんな働き方
yusukebe
6
2.9k
Kubernetes上でAgentを動かすための最新動向と押さえるべき概念まとめ
sotamaki0421
2
370
生成 AI 時代のスナップショットテストってやつを見せてあげますよ(α版)
ojun9
0
340
Migration to Signals, Signal Forms, Resource API, and NgRx Signal Store @Angular Days 03/2026 Munich
manfredsteyer
PRO
0
230
一度始めたらやめられない開発効率向上術 / Findy あなたのdotfilesを教えて!
k0kubun
4
2.8k
[PHPerKaigi 2026]PHPerKaigi2025の企画CodeGolfが最高すぎて社内で内製して半年運営して得た内製と運営の知見
ikezoemakoto
0
320
「速くなった気がする」をデータで疑う
senleaf24
0
130
Laravel Nightwatchの裏側 - Laravel公式Observabilityツールを支える設計と実装
avosalmon
1
310
AIと共にエンジニアとPMの “二刀流”を実現する
naruogram
0
120
我々はなぜ「層」を分けるのか〜「関心の分離」と「抽象化」で手に入れる変更に強いシンプルな設計〜 #phperkaigi / PHPerKaigi 2026
shogogg
2
780
実践ハーネスエンジニアリング #MOSHTech
kajitack
7
5.6k
PCOVから学ぶコードカバレッジ #phpcon_odawara
o0h
PRO
0
140
Featured
See All Featured
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
110
The Pragmatic Product Professional
lauravandoore
37
7.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
9k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
93
The Curious Case for Waylosing
cassininazir
0
290
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
160
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
1.1k
How to build a perfect <img>
jonoalderson
1
5.3k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
94
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
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