Submit Search
CoffeeScriptってなんぞ?
85 likes
13,479 views
Hayato Mizuno
kanazawa.js v1.7 - Back to Basics -(2012年3月31日開催)で使用したスライドです。
Technology
Read more
1 of 45
Download now
Downloaded 16 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
More Related Content
PDF
プログラマ進化論
Sotaro Omura
PDF
WordBench Kobe jQueryどうでしょう
Hishikawa Takuro
PPTX
ネットスーパー
Solur
PDF
LDD'12/Summer in KITAMI Opening Slide
ohotech
ODP
日常業務にperlを使おう
turugina
PPTX
Javaユーザに伝えたいselenide入門
snowhiro
PDF
Mustache入門
ina job
PDF
php.js
Kenta USAMI
プログラマ進化論
Sotaro Omura
WordBench Kobe jQueryどうでしょう
Hishikawa Takuro
ネットスーパー
Solur
LDD'12/Summer in KITAMI Opening Slide
ohotech
日常業務にperlを使おう
turugina
Javaユーザに伝えたいselenide入門
snowhiro
Mustache入門
ina job
php.js
Kenta USAMI
Viewers also liked
(20)
PDF
Wynn Netherland: Accelerating Titanium Development with CoffeeScript, Compass...
Axway Appcelerator
PDF
Happy Programming with CoffeeScript
Eddie Kao
PDF
BDD by Jasmine (jscafe 13)
Ryuma Tsukano
PDF
Aiming study#6pdf
Koutaro Chikuba
PDF
Introduction to CoffeeScript
Stalin Thangaraj
PDF
Client-side MVC with Backbone.js
iloveigloo
PDF
zsh最強シェル入門読書会1
Naoya Nakazawa
PDF
JavaScript Library Overview
jeresig
PPTX
Zshって最強らしい
ngi group.
KEY
Web Development with CoffeeScript and Sass
Brian Hogan
PDF
今日から業務で使える17の運用系Linuxツール、そして円環の理
Masahito Zembutsu
PDF
【JAWS DAYS 2016】ランサーズを支えるAurora
Yuki Kanazawa
PDF
Dockerを活用したリクルートグループ開発基盤の構築
Recruit Technologies
PDF
【dots. IT勉強会】開発環境のDocker化
Yuki Kanazawa
PDF
Zabbix3.0でどう変わるか
Atsushi Tanaka
PDF
Zabbix超入門
Daisuke Ikeda
PDF
Scalable JavaScript Design Patterns
Addy Osmani
PDF
ZabbixのAPIを使って運用を楽しくする話
Masahito Zembutsu
PDF
Backbone.js
daisuke shimizu
PPTX
5分でインストール!awsでzabbix3.0
Tadashi Mishima
Wynn Netherland: Accelerating Titanium Development with CoffeeScript, Compass...
Axway Appcelerator
Happy Programming with CoffeeScript
Eddie Kao
BDD by Jasmine (jscafe 13)
Ryuma Tsukano
Aiming study#6pdf
Koutaro Chikuba
Introduction to CoffeeScript
Stalin Thangaraj
Client-side MVC with Backbone.js
iloveigloo
zsh最強シェル入門読書会1
Naoya Nakazawa
JavaScript Library Overview
jeresig
Zshって最強らしい
ngi group.
Web Development with CoffeeScript and Sass
Brian Hogan
今日から業務で使える17の運用系Linuxツール、そして円環の理
Masahito Zembutsu
【JAWS DAYS 2016】ランサーズを支えるAurora
Yuki Kanazawa
Dockerを活用したリクルートグループ開発基盤の構築
Recruit Technologies
【dots. IT勉強会】開発環境のDocker化
Yuki Kanazawa
Zabbix3.0でどう変わるか
Atsushi Tanaka
Zabbix超入門
Daisuke Ikeda
Scalable JavaScript Design Patterns
Addy Osmani
ZabbixのAPIを使って運用を楽しくする話
Masahito Zembutsu
Backbone.js
daisuke shimizu
5分でインストール!awsでzabbix3.0
Tadashi Mishima
Ad
Similar to CoffeeScriptってなんぞ?
(20)
PDF
JavaScript.Next Returns
dynamis
PDF
ちゃんとWeb会議スライド『Coffee script』
H2O Space. Co., Ltd.
PDF
JavaScript Basic 01
Yossy Taka
PDF
大(中)規模Java script開発について
Yuki Tanaka
PDF
LT#7 Hello coffeeしてきた
Shingo Inoue
PDF
JavaScript Basic 02 jQuery
Yossy Taka
PDF
JavaScript.Next
dynamis
KEY
Kawaz的jQuery入門
Kohki Miki
PDF
Kanazawa.js.Next
dynamis
KEY
今さら始めるCoffeeScript
Ashitaba YOSHIOKA
PDF
第四回 JavaScriptから始めるプログラミング2016
kyoto university
PDF
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
PDF
WebデザイナのためのjQuery入門。
Yossy Taka
PDF
Coffeescriptを初めて使う方へ
Koya Fukuda
PDF
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
schoowebcampus
PDF
CoffeeScript
Ryo Maruyama
PDF
Firefox DevTools
dynamis
PDF
Chromeでjavascriptデバッグ!まず半歩♪
Yuji Nojima
PDF
Brush up your Coding! 2013 winter
Shogo Sensui
PDF
フロント作業の効率化
Yuto Yoshinari
JavaScript.Next Returns
dynamis
ちゃんとWeb会議スライド『Coffee script』
H2O Space. Co., Ltd.
JavaScript Basic 01
Yossy Taka
大(中)規模Java script開発について
Yuki Tanaka
LT#7 Hello coffeeしてきた
Shingo Inoue
JavaScript Basic 02 jQuery
Yossy Taka
JavaScript.Next
dynamis
Kawaz的jQuery入門
Kohki Miki
Kanazawa.js.Next
dynamis
今さら始めるCoffeeScript
Ashitaba YOSHIOKA
第四回 JavaScriptから始めるプログラミング2016
kyoto university
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
WebデザイナのためのjQuery入門。
Yossy Taka
Coffeescriptを初めて使う方へ
Koya Fukuda
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
schoowebcampus
CoffeeScript
Ryo Maruyama
Firefox DevTools
dynamis
Chromeでjavascriptデバッグ!まず半歩♪
Yuji Nojima
Brush up your Coding! 2013 winter
Shogo Sensui
フロント作業の効率化
Yuto Yoshinari
Ad
More from Hayato Mizuno
(9)
PDF
レスポンシブWebデザインでうまくやるための考え方
Hayato Mizuno
PDF
"今" 使えるJavaScriptのトレンド
Hayato Mizuno
PDF
メンテナブルPSD
Hayato Mizuno
PDF
赤い秘密
Hayato Mizuno
PDF
なんでCSSすぐ死んでしまうん
Hayato Mizuno
PDF
フロントエンドの求めるデザイン
Hayato Mizuno
PDF
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
Hayato Mizuno
PDF
レンダリングを意識したパフォーマンスチューニング
Hayato Mizuno
PDF
ノンプログラマーのためのjQuery入門
Hayato Mizuno
レスポンシブWebデザインでうまくやるための考え方
Hayato Mizuno
"今" 使えるJavaScriptのトレンド
Hayato Mizuno
メンテナブルPSD
Hayato Mizuno
赤い秘密
Hayato Mizuno
なんでCSSすぐ死んでしまうん
Hayato Mizuno
フロントエンドの求めるデザイン
Hayato Mizuno
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
Hayato Mizuno
レンダリングを意識したパフォーマンスチューニング
Hayato Mizuno
ノンプログラマーのためのjQuery入門
Hayato Mizuno
CoffeeScriptってなんぞ?
1.
CoffeeScriptってなんぞ?
kanazawa.js v1.7
2.
水野隼登 Webデザイナー 株式会社DMM.comラボ twitter: @pocotan001
3.
CoffeeScript?
4.
CoffeeScriptはJavaScriptです。
CoffeeScript?
5.
CoffeeScriptはJavaScriptです。 alert
"Hello" .coffee CoffeeScript?
6.
CoffeeScriptはJavaScriptです。 alert
"Hello" .coffee alert("Hello"); .js CoffeeScript?
7.
CoffeeScriptは小さな言語です。
CoffeeScript?
8.
CoffeeScriptは小さな言語です。
全60ページ CoffeeScript?
11.
アジェンダ ・ Less code!
- 少ないコード ・ Enhancements! - 機能の強化 CoffeeScript?
12.
Less code!
13.
うわ、私の JavaScript 1/3...?
14.
Example 1 $(function() {
$("body").html("Hello"); }); Less code!
15.
; 要らない。 $(function() {
$("body").html("Hello") }) Less code!
16.
; () 要らない。 $
function() { $("body").html "Hello" } Less code!
17.
; () {}
要らない。 $ function() $("body").html "Hello" Less code!
18.
インデントでブロックを表現 $ function()
$("body").html "Hello" Less code!
19.
function() は -> $
-> $("body").html "Hello" Less code!
20.
Example 2 $("div").click(function(event) {
$(this).css({ color: "red", fontSize: "14px" }); }); Less code!
21.
; () {}
要らない。 $("div").click function(event) $(this).css color: "red", fontSize: "14px" Less code!
22.
; () {}
, 要らない。 $("div").click function(event) $(this).css color: "red" fontSize: "14px" Less code!
23.
インデントでブロックを表現 $("div").click function(event)
$(this).css color: "red" fontSize: "14px" Less code!
24.
function(args) は (args)
-> $("div").click (event) -> $(this).css color: "red" fontSize: "14px" Less code!
25.
this は @ $("div").click
(event) -> $(@).css color: "red" fontSize: "14px" Less code!
26.
Enhancements!
27.
変数に var要らない。 version =
1.7 Enhancements!
28.
グローバル変数は明示的に。 version = 1.7 window.title
= "kanazawa.js" Enhancements!
29.
""の中では #{式} が使える。 version
= 1.7 window.title = "kanazawa.js #{version}" Enhancements!
30.
こんな書き方もok version = 1.7 window.title
= "kanazawa.js #{version + 1}" Enhancements!
31.
あいまいな == と
!= は使えない。 # 1 === true 1 == true Enhancements!
32.
=== は isとも書ける。 #
1 === true 1 is true Enhancements!
33.
JavaScript
CoffeeScript === is Enhancements!
34.
JavaScript
CoffeeScript === is !== isnt ! not && and || or true true, yes, on false false, no, off Enhancements!
35.
すべての文が... if 1 is
true "○" else "×" Enhancements!
36.
式として扱える。 result = if
1 is true "○" else "×" Enhancements!
37.
基本的に最後の値が返る。 result = if
1 is true "○" else "×" "no!" Enhancements!
38.
関数においても同じ。 sum = (x,
y) -> ... x + y Enhancements!
39.
関数は return 書いてもok sum
= (x, y) -> ... return x + y Enhancements!
40.
まとめ
41.
短く書ける 役に立つ機能 コードが一貫性を持つ
42.
短く書ける 役に立つ機能 コードが一貫性を持つ
43.
短く書ける 役に立つ機能 コードが一貫性を持つ
44.
"CoffeeScriptはJavaScriptをスタンダード なデザインパターンで書くための省略形 の集合だ。"
Reg Braithwaite
45.
Thank you
Download