Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
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"
  });
});


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




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




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




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




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




                            Less c...
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
||          ...
すべての文が...
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
CoffeeScriptってなんぞ?
CoffeeScriptってなんぞ?
Próximo SlideShare
Cargando en…5
×

de

CoffeeScriptってなんぞ? Slide 1 CoffeeScriptってなんぞ? Slide 2 CoffeeScriptってなんぞ? Slide 3 CoffeeScriptってなんぞ? Slide 4 CoffeeScriptってなんぞ? Slide 5 CoffeeScriptってなんぞ? Slide 6 CoffeeScriptってなんぞ? Slide 7 CoffeeScriptってなんぞ? Slide 8 CoffeeScriptってなんぞ? Slide 9 CoffeeScriptってなんぞ? Slide 10 CoffeeScriptってなんぞ? Slide 11 CoffeeScriptってなんぞ? Slide 12 CoffeeScriptってなんぞ? Slide 13 CoffeeScriptってなんぞ? Slide 14 CoffeeScriptってなんぞ? Slide 15 CoffeeScriptってなんぞ? Slide 16 CoffeeScriptってなんぞ? Slide 17 CoffeeScriptってなんぞ? Slide 18 CoffeeScriptってなんぞ? Slide 19 CoffeeScriptってなんぞ? Slide 20 CoffeeScriptってなんぞ? Slide 21 CoffeeScriptってなんぞ? Slide 22 CoffeeScriptってなんぞ? Slide 23 CoffeeScriptってなんぞ? Slide 24 CoffeeScriptってなんぞ? Slide 25 CoffeeScriptってなんぞ? Slide 26 CoffeeScriptってなんぞ? Slide 27 CoffeeScriptってなんぞ? Slide 28 CoffeeScriptってなんぞ? Slide 29 CoffeeScriptってなんぞ? Slide 30 CoffeeScriptってなんぞ? Slide 31 CoffeeScriptってなんぞ? Slide 32 CoffeeScriptってなんぞ? Slide 33 CoffeeScriptってなんぞ? Slide 34 CoffeeScriptってなんぞ? Slide 35 CoffeeScriptってなんぞ? Slide 36 CoffeeScriptってなんぞ? Slide 37 CoffeeScriptってなんぞ? Slide 38 CoffeeScriptってなんぞ? Slide 39 CoffeeScriptってなんぞ? Slide 40 CoffeeScriptってなんぞ? Slide 41 CoffeeScriptってなんぞ? Slide 42 CoffeeScriptってなんぞ? Slide 43 CoffeeScriptってなんぞ? Slide 44 CoffeeScriptってなんぞ? Slide 45
Próximo SlideShare
Wynn Netherland: Accelerating Titanium Development with CoffeeScript, Compass, and Sass
Siguiente
Descargar para leer sin conexión y ver en pantalla completa.

85 recomendaciones

Compartir

Descargar para leer sin conexión

CoffeeScriptってなんぞ?

Descargar para leer sin conexión

kanazawa.js v1.7 - Back to Basics -(2012年3月31日開催)で使用したスライドです。

Libros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo

Audiolibros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo

CoffeeScriptってなんぞ?

  1. 1. CoffeeScriptってなんぞ? kanazawa.js v1.7
  2. 2. 水野隼登 Webデザイナー 株式会社DMM.comラボ twitter: @pocotan001
  3. 3. CoffeeScript?
  4. 4. CoffeeScriptはJavaScriptです。 CoffeeScript?
  5. 5. CoffeeScriptはJavaScriptです。 alert "Hello" .coffee CoffeeScript?
  6. 6. CoffeeScriptはJavaScriptです。 alert "Hello" .coffee alert("Hello"); .js CoffeeScript?
  7. 7. CoffeeScriptは小さな言語です。 CoffeeScript?
  8. 8. CoffeeScriptは小さな言語です。 全60ページ CoffeeScript?
  9. 9. アジェンダ ・ Less code! - 少ないコード ・ Enhancements! - 機能の強化 CoffeeScript?
  10. 10. Less code!
  11. 11. うわ、私の JavaScript 1/3...?
  12. 12. Example 1 $(function() { $("body").html("Hello"); }); Less code!
  13. 13. ; 要らない。 $(function() { $("body").html("Hello") }) Less code!
  14. 14. ; () 要らない。 $ function() { $("body").html "Hello" } Less code!
  15. 15. ; () {} 要らない。 $ function() $("body").html "Hello" Less code!
  16. 16. インデントでブロックを表現 $ function() $("body").html "Hello" Less code!
  17. 17. function() は -> $ -> $("body").html "Hello" Less code!
  18. 18. Example 2 $("div").click(function(event) { $(this).css({ color: "red", fontSize: "14px" }); }); Less code!
  19. 19. ; () {} 要らない。 $("div").click function(event) $(this).css color: "red", fontSize: "14px" Less code!
  20. 20. ; () {} , 要らない。 $("div").click function(event) $(this).css color: "red" fontSize: "14px" Less code!
  21. 21. インデントでブロックを表現 $("div").click function(event) $(this).css color: "red" fontSize: "14px" Less code!
  22. 22. function(args) は (args) -> $("div").click (event) -> $(this).css color: "red" fontSize: "14px" Less code!
  23. 23. this は @ $("div").click (event) -> $(@).css color: "red" fontSize: "14px" Less code!
  24. 24. Enhancements!
  25. 25. 変数に var要らない。 version = 1.7 Enhancements!
  26. 26. グローバル変数は明示的に。 version = 1.7 window.title = "kanazawa.js" Enhancements!
  27. 27. ""の中では #{式} が使える。 version = 1.7 window.title = "kanazawa.js #{version}" Enhancements!
  28. 28. こんな書き方もok version = 1.7 window.title = "kanazawa.js #{version + 1}" Enhancements!
  29. 29. あいまいな == と != は使えない。 # 1 === true 1 == true Enhancements!
  30. 30. === は isとも書ける。 # 1 === true 1 is true Enhancements!
  31. 31. JavaScript CoffeeScript === is Enhancements!
  32. 32. JavaScript CoffeeScript === is !== isnt ! not && and || or true true, yes, on false false, no, off Enhancements!
  33. 33. すべての文が... if 1 is true "○" else "×" Enhancements!
  34. 34. 式として扱える。 result = if 1 is true "○" else "×" Enhancements!
  35. 35. 基本的に最後の値が返る。 result = if 1 is true "○" else "×" "no!" Enhancements!
  36. 36. 関数においても同じ。 sum = (x, y) -> ... x + y Enhancements!
  37. 37. 関数は return 書いてもok sum = (x, y) -> ... return x + y Enhancements!
  38. 38. まとめ
  39. 39. 短く書ける 役に立つ機能 コードが一貫性を持つ
  40. 40. 短く書ける 役に立つ機能 コードが一貫性を持つ
  41. 41. 短く書ける 役に立つ機能 コードが一貫性を持つ
  42. 42. "CoffeeScriptはJavaScriptをスタンダード なデザインパターンで書くための省略形 の集合だ。" Reg Braithwaite
  43. 43. Thank you
  • yasuc

    Mar. 4, 2016
  • tammifull

    Jul. 14, 2015
  • yt_ymmt

    Jun. 16, 2015
  • hidenoriakiyama

    Jun. 15, 2015
  • yutamizui3

    Feb. 17, 2015
  • yanmo

    Nov. 17, 2014
  • ssuserd3036a

    Oct. 19, 2014
  • atsukoieno

    Nov. 29, 2013
  • yuudaitachibana

    Nov. 5, 2013
  • eiurur

    Sep. 15, 2013
  • seratch

    Jul. 14, 2013
  • TakumaKajikawa

    Jun. 30, 2013
  • tamatamada

    Jun. 24, 2013
  • KanSakamoto

    Jun. 22, 2013
  • YutaYachi

    Jun. 3, 2013
  • nobynoby

    May. 5, 2013
  • YoshihiroTakano

    Mar. 28, 2013
  • kkkw

    Feb. 14, 2013
  • yoshidamasuya

    Feb. 10, 2013
  • TomomichiOnishi

    Jan. 8, 2013

kanazawa.js v1.7 - Back to Basics -(2012年3月31日開催)で使用したスライドです。

Vistas

Total de vistas

29.926

En Slideshare

0

De embebidos

0

Número de embebidos

8.397

Acciones

Descargas

16

Compartidos

0

Comentarios

0

Me gusta

85

×