SlideShare une entreprise Scribd logo
1  sur  45
Télécharger pour lire hors ligne
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?
アジェンダ
・ 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

Contenu connexe

En vedette

Happy Programming with CoffeeScript
Happy Programming with CoffeeScriptHappy Programming with CoffeeScript
Happy Programming with CoffeeScript
Eddie Kao
 
Zshって最強らしい
Zshって最強らしいZshって最強らしい
Zshって最強らしい
ngi group.
 

En vedette (20)

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

Similaire à CoffeeScriptってなんぞ?

サイボウズ・ラボユース 最終成果報告会プレゼンテーション
サイボウズ・ラボユース 最終成果報告会プレゼンテーションサイボウズ・ラボユース 最終成果報告会プレゼンテーション
サイボウズ・ラボユース 最終成果報告会プレゼンテーション
sn_monochr
 
ラボユース 最終成果報告会
ラボユース 最終成果報告会ラボユース 最終成果報告会
ラボユース 最終成果報告会
shiftky
 
今さら始めるCoffeeScript
今さら始めるCoffeeScript今さら始めるCoffeeScript
今さら始めるCoffeeScript
Ashitaba YOSHIOKA
 
Wb osaka 20120623
Wb osaka 20120623Wb osaka 20120623
Wb osaka 20120623
Miho Ishida
 

Similaire à CoffeeScriptってなんぞ? (20)

Functional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.jsFunctional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.js
 
サイボウズ・ラボユース 最終成果報告会プレゼンテーション
サイボウズ・ラボユース 最終成果報告会プレゼンテーションサイボウズ・ラボユース 最終成果報告会プレゼンテーション
サイボウズ・ラボユース 最終成果報告会プレゼンテーション
 
ラボユース 最終成果報告会
ラボユース 最終成果報告会ラボユース 最終成果報告会
ラボユース 最終成果報告会
 
知ってるようで意外と知らないPHPの便利関数
知ってるようで意外と知らないPHPの便利関数知ってるようで意外と知らないPHPの便利関数
知ってるようで意外と知らないPHPの便利関数
 
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
 
今さら始めるCoffeeScript
今さら始めるCoffeeScript今さら始めるCoffeeScript
今さら始めるCoffeeScript
 
「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~
「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~
「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~
 
Visualforce + jQuery
Visualforce + jQueryVisualforce + jQuery
Visualforce + jQuery
 
正規表現勉強会
正規表現勉強会正規表現勉強会
正規表現勉強会
 
Reactive Programming
Reactive ProgrammingReactive Programming
Reactive Programming
 
Force.com Weibnar : アドバンスドVisualforce
 Force.com Weibnar : アドバンスドVisualforce Force.com Weibnar : アドバンスドVisualforce
Force.com Weibnar : アドバンスドVisualforce
 
実践Sass 後編
実践Sass 後編実践Sass 後編
実践Sass 後編
 
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansaiJavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
 
Wb osaka 20120623
Wb osaka 20120623Wb osaka 20120623
Wb osaka 20120623
 
JavaScriptの正規表現
JavaScriptの正規表現JavaScriptの正規表現
JavaScriptの正規表現
 
Siphone coffeemaker okayama-js-1
Siphone coffeemaker okayama-js-1Siphone coffeemaker okayama-js-1
Siphone coffeemaker okayama-js-1
 
プログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみたプログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみた
 
From Java To Clojure
From Java To ClojureFrom Java To Clojure
From Java To Clojure
 
ATSプログラミングチュートリアル
ATSプログラミングチュートリアルATSプログラミングチュートリアル
ATSプログラミングチュートリアル
 

Plus de Hayato Mizuno

Plus de Hayato Mizuno (10)

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

Dernier

Dernier (7)

業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 

CoffeeScriptってなんぞ?