CoffeeScriptを学ぶ(2)

JavaScriptはプロトタイプベースのオブジェクト指向だったので、
クラスという概念はなかったのですが、
CoffeeScriptには、クラスという概念があります。

class Hello
  method:  ->
    alert "hello"

"class クラス名"でクラスを宣言できます。
メソッドは、クラスのブロックで

メソッド名: (引数) ->
  メソッド本体

と書きます。

これをJavaScriptに変換すると、下記のようになります。

var Hello;

Hello = (function() {
  function Hello() {}
  Hello.prototype.method = function() {
    return alert("hello");
  };
  return Hello;
})();

CoffeeScriptのページのサンプルの例を持ってくると

class Animal
  constructor: (@name) ->

  move: (meters) ->
    alert @name + " moved #{meters}m."

Animalとうクラスです。
コンストラクタは "constructor:"で定義できます。
@xxxはインスタンス変数ですね。
ちなみに#{}を使えば、文字列のなかで変数を評価して値を使用できます。(Rubyと同じ構文ですね。)

class Snake extends Animal
  move: ->
    alert "Slithering..."
    super 5

class Horse extends Animal
  move: ->
    alert "Galloping..."
    super 45

継承はextendsを使います。
superでスーパークラスのメソッドを呼び出すことができます。

やっぱりクラスを使うと、比較的大きなコードを書くときは、考えやすくて便利ですよね。

CoffeeScriptを学ぶ

CoffeeScriptはJvaScriptに変換するための言語で、
Pythonのような文法を持っているのが特徴のようです。

このCoffeeScriptを学ぼうと思い、いくつかのサンプルを書いてみました。
まず基本、FizzBuzzです。
(下記はalertで書いたので実行すると大変なことになるから気をつけてね)

for a in [1..100]
  if a%15 == 0
    alert "FizzBuzz"
  else if a%3 == 0
    alert "Fizz"
  else if a%5 == 0
    alert "Buzz"
  else
    alert a

特徴としては、Pythonのようにインデントがブロックを表しています。
インデントでブロックにすると、やっぱり見やすいですよね。
また、メソッドも()がつかないです。

これをJavaScriptに変換すると、以下のようになります。

var a;

for (a = 1; a <= 100; a++) {
  if (a % 15 === 0) {
    alert("fizzbuzz");
  } else if (a % 3 === 0) {
    alert("fizz");
  } else if (a % 5 === 0) {
    alert("buzz");
  } else {
    alert(a);
  }
}

今度はクイックソートを実装してみます。 関数は

関数名 -> (引数)
　　　(関数本体)

のです。 CoffeeScriptはwhile文が使えます 　

sort = (array, l, r) ->
  mid = ~~(l+r/2)
  return if l >= r
  i = l
  j = r
  pivot = array[mid]
  while true
    while array[i] < pivot
      i++
    while array[j] > pivot
      j--
    break if i >= j
    t = array[i]
    array[i] = array[j]
    array[j] = t
  sort array, l, i-1 if l < i-1
  sort array, j+1, r if j+1 < r

a = [1, 4, 3, 7, 6, 5, 2, 8]
sort a, 0, 7
alert a

下記はJavaScriptに変換したときのコードです。

var a, sort;

sort = function(array, l, r) {
  var i, j, mid, pivot, t;
  mid = ~~(l + r / 2);
  if (l >= r) return;
  i = l;
  j = r;
  pivot = array[mid];
  while (true) {
    while (array[i] < pivot) {
      i++;
    }
    while (array[j] > pivot) {
      j--;
    }
    if (i >= j) break;
    t = array[i];
    array[i] = array[j];
    array[j] = t;
  }
  if (l < i - 1) sort(array, l, i - 1);
  if (j + 1 < r) return sort(array, j + 1, r);
};

a = [1, 4, 3, 7, 6, 5, 2, 8];
sort(a, 0, 7);
alert(a);

第２２回HTML5とか勉強会で発表してきました

第２２回HTML5とか勉強会で発表してきました。

今回は初心者向けということで、
SVGってどんなことができるの？っていることを理解してもらおうと思い、
とにかく仕様の紹介をしようと思いました。
ちょっと、意図が伝えられなくて、一部の方からは難しかったというご意見をいただきました。
次回同じような機会があれば、その反省をふまえてもっとよい発表を行えればと思っています。

以下が発表に使用したスライドです。

SVG overview

View more presentations from Satoshi Watanabe

動画も公開されているみたいです。



このような機会を与えていただいた白石さんをはじめHTML5とか勉強会のスタッフの皆様には
本当に感謝をしています。
ありがとうございました！