SlideShare a Scribd company logo
CoffeeScriptってなんぞ?
      kanazawa.js v1.7
水野隼登
Webデザイナー
株式会社DMM.comラボ
twitter: @pocotan001
CoffeeScript?
CoffeeScriptはJavaScriptです。




                CoffeeScript?
CoffeeScriptはJavaScriptです。

  alert "Hello"         .coffee




                  CoffeeScript?
CoffeeScriptはJavaScriptです。

  alert "Hello"         .coffee



 alert("Hello");        .js

                  CoffeeScript?
CoffeeScriptは小さな言語です。




            CoffeeScript?
CoffeeScriptは小さな言語です。


             全60ページ




            CoffeeScript?
CoffeeScriptってなんぞ?
CoffeeScriptってなんぞ?
アジェンダ
・ Less code!
  - 少ないコード
・ Enhancements!
  - 機能の強化

                  CoffeeScript?
Less code!
うわ、私の
JavaScript
  1/3...?
Example 1
$(function() {
  $("body").html("Hello");
});




                   Less code!
; 要らない。
$(function() {
     $("body").html("Hello")
})




                      Less code!
; () 要らない。
$ function() {
    $("body").html "Hello"
}




                     Less code!
; () {} 要らない。
$ function()
  $("body").html "Hello"




                   Less code!
インデントでブロックを表現
$ function()
  $("body").html "Hello"




                   Less code!
function() は ->
$ ->
   $("body").html "Hello"




                    Less code!
Example 2
$("div").click(function(event) {
  $(this).css({
      color: "red",
      fontSize: "14px"
  });
});


                         Less code!
; () {} 要らない。
$("div").click function(event)
  $(this).css
    color: "red",
    fontSize: "14px"




                         Less code!
; () {} , 要らない。
$("div").click function(event)
  $(this).css
    color: "red"
    fontSize: "14px"




                         Less code!
インデントでブロックを表現
$("div").click function(event)
  $(this).css
    color: "red"
    fontSize: "14px"




                         Less code!
function(args) は (args) ->
$("div").click (event) ->
  $(this).css
    color: "red"
    fontSize: "14px"




                            Less code!
this は @
$("div").click (event) ->
  $(@).css
    color: "red"
    fontSize: "14px"




                            Less code!
Enhancements!
変数に var要らない。
version = 1.7




                Enhancements!
グローバル変数は明示的に。
version = 1.7
window.title = "kanazawa.js"




                 Enhancements!
""の中では #{式} が使える。
version = 1.7
window.title = "kanazawa.js
#{version}"




                 Enhancements!
こんな書き方もok
version = 1.7
window.title = "kanazawa.js
#{version + 1}"




                  Enhancements!
あいまいな == と != は使えない。
# 1 === true
1 == true




               Enhancements!
=== は isとも書ける。
# 1 === true
1 is true




               Enhancements!
JavaScript   CoffeeScript
===           is




                   Enhancements!
JavaScript   CoffeeScript
===              is
!==              isnt
!                not
&&               and
||               or
true             true, yes, on
false            false, no, off


                      Enhancements!
すべての文が...
if 1 is true
  "○"
else
  "×"



               Enhancements!
式として扱える。
result = if 1 is true
  "○"
else
  "×"



                 Enhancements!
基本的に最後の値が返る。
result = if 1 is true
  "○"
else
  "×"
  "no!"

                 Enhancements!
関数においても同じ。
sum = (x, y) ->
  ...
  x + y




                  Enhancements!
関数は return 書いてもok
sum = (x, y) ->
  ...
  return x + y




                  Enhancements!
まとめ
短く書ける
 役に立つ機能
コードが一貫性を持つ
短く書ける
 役に立つ機能
コードが一貫性を持つ
短く書ける
 役に立つ機能
コードが一貫性を持つ
"CoffeeScriptはJavaScriptをスタンダード
なデザインパターンで書くための省略形
の集合だ。"
                     Reg Braithwaite
Thank you

More Related Content

PDF
プログラマ進化論
PDF
WordBench Kobe jQueryどうでしょう
PPTX
ネットスーパー
PDF
LDD'12/Summer in KITAMI Opening Slide
ODP
日常業務にperlを使おう
PPTX
Javaユーザに伝えたいselenide入門
PDF
Mustache入門
PDF
php.js
プログラマ進化論
WordBench Kobe jQueryどうでしょう
ネットスーパー
LDD'12/Summer in KITAMI Opening Slide
日常業務にperlを使おう
Javaユーザに伝えたいselenide入門
Mustache入門
php.js

Viewers also liked (20)

PDF
Wynn Netherland: Accelerating Titanium Development with CoffeeScript, Compass...
PDF
Happy Programming with CoffeeScript
PDF
BDD by Jasmine (jscafe 13)
PDF
Aiming study#6pdf
PDF
Introduction to CoffeeScript
PDF
Client-side MVC with Backbone.js
PDF
zsh最強シェル入門読書会1
PDF
JavaScript Library Overview
PPTX
Zshって最強らしい
KEY
Web Development with CoffeeScript and Sass
PDF
今日から業務で使える17の運用系Linuxツール、そして円環の理
PDF
【JAWS DAYS 2016】ランサーズを支えるAurora
PDF
Dockerを活用したリクルートグループ開発基盤の構築
PDF
【dots. IT勉強会】開発環境のDocker化
PDF
Zabbix3.0でどう変わるか
PDF
Zabbix超入門
PDF
Scalable JavaScript Design Patterns
PDF
ZabbixのAPIを使って運用を楽しくする話
PDF
Backbone.js
PPTX
5分でインストール!awsでzabbix3.0
Wynn Netherland: Accelerating Titanium Development with CoffeeScript, Compass...
Happy Programming with CoffeeScript
BDD by Jasmine (jscafe 13)
Aiming study#6pdf
Introduction to CoffeeScript
Client-side MVC with Backbone.js
zsh最強シェル入門読書会1
JavaScript Library Overview
Zshって最強らしい
Web Development with CoffeeScript and Sass
今日から業務で使える17の運用系Linuxツール、そして円環の理
【JAWS DAYS 2016】ランサーズを支えるAurora
Dockerを活用したリクルートグループ開発基盤の構築
【dots. IT勉強会】開発環境のDocker化
Zabbix3.0でどう変わるか
Zabbix超入門
Scalable JavaScript Design Patterns
ZabbixのAPIを使って運用を楽しくする話
Backbone.js
5分でインストール!awsでzabbix3.0
Ad

Similar to CoffeeScriptってなんぞ? (20)

PDF
JavaScript.Next Returns
PDF
ちゃんとWeb会議スライド『Coffee script』
PDF
JavaScript Basic 01
PDF
大(中)規模Java script開発について
PDF
LT#7 Hello coffeeしてきた
PDF
JavaScript Basic 02 jQuery
PDF
JavaScript.Next
KEY
Kawaz的jQuery入門
PDF
Kanazawa.js.Next
KEY
今さら始めるCoffeeScript
PDF
第四回 JavaScriptから始めるプログラミング2016
PDF
jQuery Performance Tips – jQueryにおける高速化 -
PDF
WebデザイナのためのjQuery入門。
PDF
Coffeescriptを初めて使う方へ
PDF
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
PDF
CoffeeScript
PDF
Firefox DevTools
PDF
Chromeでjavascriptデバッグ!まず半歩♪
PDF
Brush up your Coding! 2013 winter
PDF
フロント作業の効率化
JavaScript.Next Returns
ちゃんとWeb会議スライド『Coffee script』
JavaScript Basic 01
大(中)規模Java script開発について
LT#7 Hello coffeeしてきた
JavaScript Basic 02 jQuery
JavaScript.Next
Kawaz的jQuery入門
Kanazawa.js.Next
今さら始めるCoffeeScript
第四回 JavaScriptから始めるプログラミング2016
jQuery Performance Tips – jQueryにおける高速化 -
WebデザイナのためのjQuery入門。
Coffeescriptを初めて使う方へ
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
CoffeeScript
Firefox DevTools
Chromeでjavascriptデバッグ!まず半歩♪
Brush up your Coding! 2013 winter
フロント作業の効率化
Ad

More from Hayato Mizuno (9)

PDF
レスポンシブWebデザインでうまくやるための考え方
PDF
"今" 使えるJavaScriptのトレンド
PDF
メンテナブルPSD
PDF
赤い秘密
PDF
なんでCSSすぐ死んでしまうん
PDF
フロントエンドの求めるデザイン
PDF
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
PDF
レンダリングを意識したパフォーマンスチューニング
PDF
ノンプログラマーのためのjQuery入門
レスポンシブWebデザインでうまくやるための考え方
"今" 使えるJavaScriptのトレンド
メンテナブルPSD
赤い秘密
なんでCSSすぐ死んでしまうん
フロントエンドの求めるデザイン
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
レンダリングを意識したパフォーマンスチューニング
ノンプログラマーのためのjQuery入門

CoffeeScriptってなんぞ?