Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Fast Forward Javascript
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Sho Kusano
October 16, 2012
Programming
690
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Fast Forward Javascript
立ち止まってる暇なんてない。 CoffeeScript の紹介です。
Sho Kusano
October 16, 2012
More Decks by Sho Kusano
See All by Sho Kusano
ISUCON 反省会
rosylilly
1
350
ISUCON 夏祭り 2023 ハンズオン資料
rosylilly
1
6.8k
今日から始めるリアルタイム配信の裏側
rosylilly
10
9.2k
ISUCON12 事前講習
rosylilly
6
18k
BURST #0
rosylilly
1
290
ISUCON 11 Prior
rosylilly
9
18k
ISUCON 夏期講習 2020
rosylilly
7
11k
真剣.js / shinken-js
rosylilly
1
4.5k
Sustainable Operation
rosylilly
2
3.8k
Other Decks in Programming
See All in Programming
UPDATE をやめる — EF Core でマスタをバージョン管理する
panda728
PRO
0
1.2k
TechTown - Creating Composable Callables in Contemporary C++
rollbear
0
130
FactoryBotをやめればRSpecは速くなるのか?
yuta_onishi_97
0
780
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Rails World 2026, Austin, Texas
marcoroth
0
220
作れる、でも消せるか?──安全に「枯らして消す」機能削除術 / Drain, Then Delete
chobishiba
2
820
機械に任せるテスト、人が見るテスト ⽣成AIで引き直した、運⽤保守フェーズの線引き
dske104
0
190
Event is what happens
moro
2
960
個人開発者よ、Honoを使え(おじさんver)
tanahiro2010
2
260
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Kaigi on Rails 2026, Tokyo, Japan
marcoroth
2
290
contenteditable と日本語入力に向き合う
colorful12
0
200
Findy - エンジニア向け会社紹介/Findy Company Deck
findyinc
6
400k
コーディング自動化の次へ。人の介入をゼロにするファクトリーとサポートAIによる実践
timakin
5
4k
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.4k
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
2
330
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
31k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.6k
Accessibility Awareness
sabderemane
1
250
Building AI with AI
inesmontani
PRO
1
1.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
Leading Effective Engineering Teams in the AI Era
addyosmani
9
2.7k
A better future with KSS
kneath
240
18k
Ruling the World: When Life Gets Gamed
codingconduct
0
410
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
8.4k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
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