Submit Search
Upload
CoffeeScriptってなんぞ?
•
85 likes
•
13,475 views
Hayato Mizuno
Follow
kanazawa.js v1.7 - Back to Basics -(2012年3月31日開催)で使用したスライドです。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 45
Download now
Download to read offline
Recommended
プログラマ進化論
プログラマ進化論
Sotaro Omura
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
Hishikawa Takuro
ネットスーパー
ネットスーパー
Solur
LDD'12/Summer in KITAMI Opening Slide
LDD'12/Summer in KITAMI Opening Slide
ohotech
日常業務にperlを使おう
日常業務にperlを使おう
turugina
Javaユーザに伝えたいselenide入門
Javaユーザに伝えたいselenide入門
snowhiro
Mustache入門
Mustache入門
ina job
php.js
php.js
Kenta USAMI
Recommended
プログラマ進化論
プログラマ進化論
Sotaro Omura
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
Hishikawa Takuro
ネットスーパー
ネットスーパー
Solur
LDD'12/Summer in KITAMI Opening Slide
LDD'12/Summer in KITAMI Opening Slide
ohotech
日常業務にperlを使おう
日常業務にperlを使おう
turugina
Javaユーザに伝えたいselenide入門
Javaユーザに伝えたいselenide入門
snowhiro
Mustache入門
Mustache入門
ina job
php.js
php.js
Kenta USAMI
Wynn Netherland: Accelerating Titanium Development with CoffeeScript, Compass...
Wynn Netherland: Accelerating Titanium Development with CoffeeScript, Compass...
Axway Appcelerator
Happy Programming with CoffeeScript
Happy Programming with CoffeeScript
Eddie Kao
BDD by Jasmine (jscafe 13)
BDD by Jasmine (jscafe 13)
Ryuma Tsukano
Aiming study#6pdf
Aiming study#6pdf
Koutaro Chikuba
Introduction to CoffeeScript
Introduction to CoffeeScript
Stalin Thangaraj
Client-side MVC with Backbone.js
Client-side MVC with Backbone.js
iloveigloo
zsh最強シェル入門読書会1
zsh最強シェル入門読書会1
Naoya Nakazawa
JavaScript Library Overview
JavaScript Library Overview
jeresig
Zshって最強らしい
Zshって最強らしい
ngi group.
Web Development with CoffeeScript and Sass
Web Development with CoffeeScript and Sass
Brian Hogan
今日から業務で使える17の運用系Linuxツール、そして円環の理
今日から業務で使える17の運用系Linuxツール、そして円環の理
Masahito Zembutsu
【JAWS DAYS 2016】ランサーズを支えるAurora
【JAWS DAYS 2016】ランサーズを支えるAurora
Yuki Kanazawa
Dockerを活用したリクルートグループ開発基盤の構築
Dockerを活用したリクルートグループ開発基盤の構築
Recruit Technologies
【dots. IT勉強会】開発環境のDocker化
【dots. IT勉強会】開発環境のDocker化
Yuki Kanazawa
Zabbix3.0でどう変わるか
Zabbix3.0でどう変わるか
Atsushi Tanaka
Zabbix超入門
Zabbix超入門
Daisuke Ikeda
Scalable JavaScript Design Patterns
Scalable JavaScript Design Patterns
Addy Osmani
ZabbixのAPIを使って運用を楽しくする話
ZabbixのAPIを使って運用を楽しくする話
Masahito Zembutsu
Backbone.js
Backbone.js
daisuke shimizu
5分でインストール!awsでzabbix3.0
5分でインストール!awsでzabbix3.0
Tadashi Mishima
Functional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.js
Shogo Sensui
サイボウズ・ラボユース 最終成果報告会プレゼンテーション
サイボウズ・ラボユース 最終成果報告会プレゼンテーション
sn_monochr
More Related Content
Viewers also liked
Wynn Netherland: Accelerating Titanium Development with CoffeeScript, Compass...
Wynn Netherland: Accelerating Titanium Development with CoffeeScript, Compass...
Axway Appcelerator
Happy Programming with CoffeeScript
Happy Programming with CoffeeScript
Eddie Kao
BDD by Jasmine (jscafe 13)
BDD by Jasmine (jscafe 13)
Ryuma Tsukano
Aiming study#6pdf
Aiming study#6pdf
Koutaro Chikuba
Introduction to CoffeeScript
Introduction to CoffeeScript
Stalin Thangaraj
Client-side MVC with Backbone.js
Client-side MVC with Backbone.js
iloveigloo
zsh最強シェル入門読書会1
zsh最強シェル入門読書会1
Naoya Nakazawa
JavaScript Library Overview
JavaScript Library Overview
jeresig
Zshって最強らしい
Zshって最強らしい
ngi group.
Web Development with CoffeeScript and Sass
Web Development with CoffeeScript and Sass
Brian Hogan
今日から業務で使える17の運用系Linuxツール、そして円環の理
今日から業務で使える17の運用系Linuxツール、そして円環の理
Masahito Zembutsu
【JAWS DAYS 2016】ランサーズを支えるAurora
【JAWS DAYS 2016】ランサーズを支えるAurora
Yuki Kanazawa
Dockerを活用したリクルートグループ開発基盤の構築
Dockerを活用したリクルートグループ開発基盤の構築
Recruit Technologies
【dots. IT勉強会】開発環境のDocker化
【dots. IT勉強会】開発環境のDocker化
Yuki Kanazawa
Zabbix3.0でどう変わるか
Zabbix3.0でどう変わるか
Atsushi Tanaka
Zabbix超入門
Zabbix超入門
Daisuke Ikeda
Scalable JavaScript Design Patterns
Scalable JavaScript Design Patterns
Addy Osmani
ZabbixのAPIを使って運用を楽しくする話
ZabbixのAPIを使って運用を楽しくする話
Masahito Zembutsu
Backbone.js
Backbone.js
daisuke shimizu
5分でインストール!awsでzabbix3.0
5分でインストール!awsでzabbix3.0
Tadashi Mishima
Viewers also liked
(20)
Wynn Netherland: Accelerating Titanium Development with CoffeeScript, Compass...
Wynn Netherland: Accelerating Titanium Development with CoffeeScript, Compass...
Happy Programming with CoffeeScript
Happy Programming with CoffeeScript
BDD by Jasmine (jscafe 13)
BDD by Jasmine (jscafe 13)
Aiming study#6pdf
Aiming study#6pdf
Introduction to CoffeeScript
Introduction to CoffeeScript
Client-side MVC with Backbone.js
Client-side MVC with Backbone.js
zsh最強シェル入門読書会1
zsh最強シェル入門読書会1
JavaScript Library Overview
JavaScript Library Overview
Zshって最強らしい
Zshって最強らしい
Web Development with CoffeeScript and Sass
Web Development with CoffeeScript and Sass
今日から業務で使える17の運用系Linuxツール、そして円環の理
今日から業務で使える17の運用系Linuxツール、そして円環の理
【JAWS DAYS 2016】ランサーズを支えるAurora
【JAWS DAYS 2016】ランサーズを支えるAurora
Dockerを活用したリクルートグループ開発基盤の構築
Dockerを活用したリクルートグループ開発基盤の構築
【dots. IT勉強会】開発環境のDocker化
【dots. IT勉強会】開発環境のDocker化
Zabbix3.0でどう変わるか
Zabbix3.0でどう変わるか
Zabbix超入門
Zabbix超入門
Scalable JavaScript Design Patterns
Scalable JavaScript Design Patterns
ZabbixのAPIを使って運用を楽しくする話
ZabbixのAPIを使って運用を楽しくする話
Backbone.js
Backbone.js
5分でインストール!awsでzabbix3.0
5分でインストール!awsでzabbix3.0
Similar to CoffeeScriptってなんぞ?
Functional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.js
Shogo Sensui
サイボウズ・ラボユース 最終成果報告会プレゼンテーション
サイボウズ・ラボユース 最終成果報告会プレゼンテーション
sn_monochr
ラボユース 最終成果報告会
ラボユース 最終成果報告会
shiftky
知ってるようで意外と知らないPHPの便利関数
知ってるようで意外と知らないPHPの便利関数
Wataru Terada
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
Nishida Kansuke
今さら始めるCoffeeScript
今さら始めるCoffeeScript
Ashitaba YOSHIOKA
「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~
「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~
leverages_event
Visualforce + jQuery
Visualforce + jQuery
Salesforce Developers Japan
正規表現勉強会
正規表現勉強会
zaru sakuraba
Reactive Programming
Reactive Programming
Hideyuki Takeuchi
Force.com Weibnar : アドバンスドVisualforce
Force.com Weibnar : アドバンスドVisualforce
Salesforce Developers Japan
実践Sass 後編
実践Sass 後編
kosei27
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
Tomohiro Kumagai
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
Wb osaka 20120623
Wb osaka 20120623
Miho Ishida
JavaScriptの正規表現
JavaScriptの正規表現
yaju88
Siphone coffeemaker okayama-js-1
Siphone coffeemaker okayama-js-1
NISHIMOTO Keisuke
プログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみた
Eigoro Yamamura
From Java To Clojure
From Java To Clojure
Kent Ohashi
ATSプログラミングチュートリアル
ATSプログラミングチュートリアル
Kiwamu Okabe
Similar to CoffeeScriptってなんぞ?
(20)
Functional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.js
サイボウズ・ラボユース 最終成果報告会プレゼンテーション
サイボウズ・ラボユース 最終成果報告会プレゼンテーション
ラボユース 最終成果報告会
ラボユース 最終成果報告会
知ってるようで意外と知らないPHPの便利関数
知ってるようで意外と知らないPHPの便利関数
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
今さら始めるCoffeeScript
今さら始めるCoffeeScript
「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~
「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~
Visualforce + jQuery
Visualforce + jQuery
正規表現勉強会
正規表現勉強会
Reactive Programming
Reactive Programming
Force.com Weibnar : アドバンスドVisualforce
Force.com Weibnar : アドバンスドVisualforce
実践Sass 後編
実践Sass 後編
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Wb osaka 20120623
Wb osaka 20120623
JavaScriptの正規表現
JavaScriptの正規表現
Siphone coffeemaker okayama-js-1
Siphone coffeemaker okayama-js-1
プログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみた
From Java To Clojure
From Java To Clojure
ATSプログラミングチュートリアル
ATSプログラミングチュートリアル
More from Hayato Mizuno
レスポンシブWebデザインでうまくやるための考え方
レスポンシブWebデザインでうまくやるための考え方
Hayato Mizuno
"今" 使えるJavaScriptのトレンド
"今" 使えるJavaScriptのトレンド
Hayato Mizuno
メンテナブルPSD
メンテナブルPSD
Hayato Mizuno
赤い秘密
赤い秘密
Hayato Mizuno
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
フロントエンドの求めるデザイン
フロントエンドの求めるデザイン
Hayato Mizuno
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
Hayato Mizuno
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
Hayato Mizuno
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
ノンプログラマーのためのjQuery入門
ノンプログラマーのためのjQuery入門
Hayato Mizuno
More from Hayato Mizuno
(10)
レスポンシブWebデザインでうまくやるための考え方
レスポンシブWebデザインでうまくやるための考え方
"今" 使えるJavaScriptのトレンド
"今" 使えるJavaScriptのトレンド
メンテナブルPSD
メンテナブルPSD
赤い秘密
赤い秘密
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
フロントエンドの求めるデザイン
フロントエンドの求めるデザイン
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
ノンプログラマーのためのjQuery入門
ノンプログラマーのためのjQuery入門
Recently uploaded
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
Recently uploaded
(8)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
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?
9.
10.
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 now