CoffeeScriptを学ぶ(2)

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

1. class Hello  
2.   method:  ->  
3.     alert "hello"  

class Hello
  method:  ->
    alert "hello"

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

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

と書きます。

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

1. var Hello;  
2.   
3. Hello = (function() {  
4.   function Hello() {}  
5.   Hello.prototype.method = function() {  
6.     return alert("hello");  
7.   };  
8.   return Hello;  
9. })();  

var Hello;

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

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

1. class Animal  
2.   constructor: (@name) ->  
3.   
4.   move: (meters) ->  
5.     alert @name + " moved #{meters}m."  

class Animal
  constructor: (@name) ->

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

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

1. class Snake extends Animal  
2.   move: ->  
3.     alert "Slithering..."  
4.     super 5  
5.   
6. class Horse extends Animal  
7.   move: ->  
8.     alert "Galloping..."  
9.     super 45  

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で書いたので実行すると大変なことになるから気をつけてね)

1. for a in [1..100]  
2.   if a%15 == 0  
3.     alert "FizzBuzz"  
4.   else if a%3 == 0  
5.     alert "Fizz"  
6.   else if a%5 == 0  
7.     alert "Buzz"  
8.   else  
9.     alert a  

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に変換すると、以下のようになります。

1. var a;  
2.   
3. for (a = 1; a <= 100; a++) {  
4.   if (a % 15 === 0) {  
5.     alert("fizzbuzz");  
6.   } else if (a % 3 === 0) {  
7.     alert("fizz");  
8.   } else if (a % 5 === 0) {  
9.     alert("buzz");  
10.   } else {  
11.     alert(a);  
12.   }  
13. }  

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文が使えます 　

1. sort = (array, l, r) ->  
2.   mid = ~~(l+r/2)  
3.   return if l >= r  
4.   i = l  
5.   j = r  
6.   pivot = array[mid]  
7.   while true  
8.     while array[i] < pivot  
9.       i++  
10.     while array[j] > pivot  
11.       j--  
12.     break if i >= j  
13.     t = array[i]  
14.     array[i] = array[j]  
15.     array[j] = t  
16.   sort array, l, i-1 if l < i-1  
17.   sort array, j+1, r if j+1 < r  
18.   
19. a = [1, 4, 3, 7, 6, 5, 2, 8]  
20. sort a, 0, 7  
21. alert a  

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に変換したときのコードです。

1. var a, sort;  
2.   
3. sort = function(array, l, r) {  
4.   var i, j, mid, pivot, t;  
5.   mid = ~~(l + r / 2);  
6.   if (l >= r) return;  
7.   i = l;  
8.   j = r;  
9.   pivot = array[mid];  
10.   while (true) {  
11.     while (array[i] < pivot) {  
12.       i++;  
13.     }  
14.     while (array[j] > pivot) {  
15.       j--;  
16.     }  
17.     if (i >= j) break;  
18.     t = array[i];  
19.     array[i] = array[j];  
20.     array[j] = t;  
21.   }  
22.   if (l < i - 1) sort(array, l, i - 1);  
23.   if (j + 1 < r) return sort(array, j + 1, r);  
24. };  
25.   
26. a = [1, 4, 3, 7, 6, 5, 2, 8];  
27. sort(a, 0, 7);  
28. alert(a);  

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とか勉強会のスタッフの皆様には
本当に感謝をしています。
ありがとうございました！