【土曜講座】CoffeeScript入門

2月8日にCoffeeScriptの勉強会を行いました。

Attend:http://atnd.org/events/47340

今回は、スライドをアップしないそうです。

勉強会の様子

議事録の間にオレの感想等のせます

まず、CoffeeScriptについての説明ー!

CoffeeScriptとは?

javascriptにコンパイルできる小さな言語

特徴

  • ほぼJavascript
  • コードの記述量が減る
  • 便利な記法を提供
  • Javascriptの罠を回避できる
  • 実行速度は同じかむしろ速い

欠点

  • コンパイルする手間が増える

ちなみに公式サイトはこちら

http://coffeescript.org/

トップにいけばわかると思うけど、CoffeeScriptと普通のjavasriptとの違いを載せている。

なるほど!明らかに行数が少ない!!

まず

お、varいらん!セミコロンもいらん!

なるほど、後置ifも使えるのね。

Objects:

オブジェクトの書き方も斬新!コンマもいらんのね。

ここでこのオブジェクトの中の

なるほど、これfunctionなのか。

普通のjsならば

考え方としては、

  • functionは省略できます
  • functionの中身は矢印(→)以降で書ける

こんな感じか。

あ、coffee→javascriptの対応が見たかったら、さっきの公式ページの上のタブに

TRY COFFEESCRIPT

ってあるから、それでチェックできるよー!

勉強会でも、これ使いながら、比較しながら見てたー

会場からも

「え?こうやっても書ける?」「書いてみましょう!!」

のやりとりが頻繁にありました。

後置forみたいなのもあるんか?

の出力結果か。

このあと、みんなでcoffeeの環境を整える

最新版は1.7.1かな?

さっきまでは、公式ページのTRYのところでコード書いてたけど、ここからは、各々のターミナルで作業

拡張子はcoffeeなのね。

hoge.coffee

実際、HelloWorldを出力しよう!

こんな感じで出力されます。

.jsにも出力!!

毎回毎回、-cでコンパイルするのが、面倒ならば

これで、コンパイラをほとんど意識せずに書けるな!すばらしい!

このあとFizzBuzz問題をCoffeeScriptで書くということをしました。

そのあとはWebページでCoffeeScriptの反映を実際にみんなでやってみました。

index.html

main.coffee

オレ含め数名

「クリックしても文字変わらーーん!!」

結論:コンパイルしろ、ハゲ

coffeeで書いたら、コンパイルしましょう!

そうすると、直下なディレクトリにmain.jsが出来ますね。めでたしめでたし。

アットーマークとthisは同義

個人的には、

この書き方が気持ち悪かった。

コロンの使い方が気持ち悪かった。

でも、実際コンパイルしたらわかると思うけど

ってなっているってことは

  • thisをアットマークに
  • カッコは書かなくて良い
  • function()も書かなくて良い
  • functionの中身は->以降で表す

っていうのさえ、抑えておけば、この書き方になるんやな!

うん、納得!

書いて体に染み込ませたい!

講師オススメ本はこちら

little book

http://minghai.github.io/library/coffeescript/

最後に
GruntとHarpの使い方を少し説明して終了!

個人的感想

  • 圧倒的に書く量が減る!慣れたら問題なさそう!
  • 綺麗に見える
  • Pythonっぽい!!
  • Rubyの要素も兼ね備わってた({#hoge}みたいな書き方)

今、nodeで書いてるやつ、全部coffeeで書きなおす価値ありかもw

一時間超した勉強会でしたが、非常に楽しく過ごせた!!

また勉強会のレポートをお楽しみに!!

こーへい


1 thought on “【土曜講座】CoffeeScript入門

  1. ピンバック: ハッピーバレンタイン! - CAMPHOR- Blog

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です