はじめに

本シリーズでは CoffeeScript についての紹介と、CoffeeScript がなぜいいのか、これを学ぶとなにが嬉しいのかという点について、サンプルを交えながら解説をしていきます。

対象となる読者としては、ある程度 JavaScript を書いている読者を想定しています。そのような読者が、JavaScript を書いていく上での「設計の概念」を理解してもらうことが、ひとまずのゴールと考えています。

CoffeeScript とはなにか

CoffeeScript

http://coffeescript.org/

Web 系のブログなどを年中見ている方であれば、最近、CoffeeScript という言葉をたまに目にしているかもしれません。CoffeeScript は小さなプログラミング言語です。

ただし、これは JavaScript に変換されることを前提としています。CoffeeScript を書き、それをコンパイル（変換）したら、JavaScript ファイルができます。

「JavaScript に変換するための言語？　 JavaScript を書くだけでも手一杯なのに、なんでわざわざそんなものを覚えなければいけないんだ！？」と思われるかもしれません。

ブラウザ上で使うなにかを書く場合、コンパイルするための手間が増えますので、ハッキリ言いまして面倒であることは否定できないでしょう。

私（高津戸）自身、はじめは「Spine」というライブラリを読むために CoffeeScript が必要で、面倒だなーと思っていたのですが、今は違います。新しく書く JavaScript は、できるだけ CoffeeScript で書きたいと思っています。

それはなぜか。それは CoffeeScript が、JavaScript が抱える種々の問題を解決してくれるものであるからです。CoffeeScript を書くことでタイプ量を減少させ、書いたコードの見通しをよくし、書き手によるコードの差異を大きく減らすことができます。

JavaScript を使う理由

ブラウザ上で動かすなにかを作るとき、みんな JavaScript を書きます。なぜ JavaScript で書いているのか？　それは、ブラウザ上でなにかしたかったら、基本的には JavaScript で書くしかないからです。

もっと便利でいい言語があるので、そっちを使いたいと思っても、それは無理な話です。なにか劇的にすばらしい、ブラウザ上で動く言語が登場したとしても、それを使えるのは、おそらく最新版のブラウザでのみでしょう。

今どのブラウザでも動くように作るには、JavaScript を書くしかありません。これは、この先も続いていくでしょう。

ウェブブラウザが誕生してから、かなりの月日が経ちました。時代は変わっていくものでして、最近では HTML5 という仕様にもとづいて、新しい機能がどんどんブラウザに実装されています。

それらは JavaScript を動かすことで利用できます。JavaScript……これも、ECMAScript としてどんどん洗練されてきてはいます。

なにはともあれ、実プロダクトを作るために私たちが書き続けなければならないのは、昔からある JavaScript です。

JavaScript が抱える問題

「JavaScript が抱える問題」とまで言ってしまうのは、言い過ぎかもしれません。ですが、JavaScript にまったく不満がない状態というのは考えにくいのではないでしょうか。

というのも、そもそも初期の段階の JavaScript は、現在のように、Web アプリケーションをガリガリ作ることまで想定されて作られたわけではないでしょう。ところが、今では Gmail や Google Calendar をはじめ、多くの Web アプリケーションが Ajax を駆使し、JavaScript 中心に作成されるようになってきました。

このような変化の中で、昔からある JavaScript が、今も昔も、なんの不満もなく便利な言語であり続けるというのは、少々荷が重いとも言えるかもしれません。

CoffeeScript は、JavaScript が抱える種々の問題を、さもなかったかのように書くことができる言語です。具体的になにがどう不満なのかという点は、おいおい見ていくとしましょう。

簡潔に書くことのできる文法

私が CoffeeScript についてすばらしいと思っているのは、大きく言うと以下の 2 点です。

• 簡潔な文法
• クラス

まずは「簡潔な文法」という点について考えてみましょう。簡単なコードを見てみます。

doSomething = ->
    msg = 'foo!'
    alert msg
    true

この CoffeeScript をコンパイルすると、以下のような JavaScript が生成されます。

var doSomething;
doSomething = function() {
  var msg;
  msg = 'foo!';
  alert(msg);
  return true;
};

あとで詳しく見ていきますが、CoffeeScript は JavaScript と比較すると、以下のような点が異なります。

• ;を書かない
• varを書かない
• functionが->
• 最後の文の結果を自動でreturnする
• { }は省略し、インデントでスコープを表す

単純に短く書ければいいというわけではありませんが、JavaScript で犯しがちなミスの多くは、CoffeeScript を使うことで防ぐことが可能です。例えば;やvarを忘れたり、functionをタイポしたり、括弧の入れ子がやたら多くなってしまったりというようなことです。これらは CoffeeScript を書いていれば、起こり得ない問題です。

とりあえず、CoffeeScript は短く簡潔に書けるものであるということを、ここでは感じていただければと思います。

クラス

クラスは多くのプログラミング言語が持つ、コードをまとめるための便利な機能です*。

CoffeeScript ではクラスを以下のように書くことができます。

class Animal
    constructor: (name) ->
        @name = name
    bark: ->
        alert 'わんおわんお'
        @
    walk: ->
        alert 'てけてけ'
        @

animal = new Animal
animal.bark() # アラート: わんおわんお
animal.walk() # アラート: てけてけ

この結果を、オンラインで確認してみましょう。

以下のページ*の Run を押し、結果を見ててみてください。変換後の JavaScript も確認できます。

デモ：クラスの使用例

特定の機能の塊を雛形として定義できるのが、クラスです。ここではAnimalという名前のついた雛形（クラス）から、具体的なオブジェクトを作り、変数animalに入れています。

動物の雛形より、具体的な動物を作るという形です。ここで作ったanimalでは、クラスで定義された機能—メソッド—を利用することができます。barkを実行すると、「わんおわんお」とアラートが、walkを実行すると、「てけてけ」というアラートが出るのが確認できます。

このクラスは複雑なコードを書くときに、非常に便利です。なにが便利なのかはおいおいて見ていくとしまして、CoffeeScript は、このクラスという仕組みを言語的に備えているということだけ、ここでは覚えておいてください。

ちなみに JavaScript へ変換されたコードを見ても分かる通り、これと同じことは CoffeeScript なしでも十分に実現できます。また、クラスなんて JavaScript には不要であると考える人も少なくありません。

しかしながら、クラスは書かれているコードがなにを示すのかを、簡潔に表すものであり、コードを書いていく上で、設計の概念を理解するために有益なものであると、CoffeeScript は考えているのです。

CoffeeScript をコンパイルしてみよう

なにはともあれ、CoffeeScript を書くのであれば、書いた CoffeeScript のファイル（coffee ファイル）を、JavaScript にコンパイルできなければ話になりません。

CoffeeScript のコンパイラは、node.js を使って書かれています。CoffeeScript のコンパイラをインストールするためには、以下のステップを踏む必要があります。

1. node.js をインストール
2. npm を使って CoffeeScript をインストール

node.js をインストールするには、http://nodejs.org/から、インストーラーを利用するのが、もっとも手早く行えます。

手順 2にあるnpm（node package manager）とは、node.jsで書かれたさまざまなパッケージを管理するためのツールです。これはnode.jsをインストールすると、同時にインストールされます。node.jsをインストールした後、ターミナル（コマンドプロンプト）で以下のコマンドを実行すればCoffeeScriptがインストールされます。

npm --global install coffee-script

インストールが完了したら、先ほどのクラスのデモコードをコピーして、テキストエディタに貼り付け、hoge.coffeeとでもして保存します。そのディレクトリで、以下のコマンドを実行します。

coffee --compile hoge.coffee

すると、コンパイル結果がhoge.jsとして、そのディレクトリに作成されます。

いちいち coffee ファイルを変更するたびにコンパイルなどしていられない。そんな人にはwatchオプションがお勧めです。

coffee --compile --watch hoge.coffee

上記のように実行すれば、hoge.coffeeファイルが更新されるたびに、コンパイルをしてくれます。これでJavaScriptに変換する準備は完了です。

ちなみにcoffeeコマンドには、他にもいろいろオプションがあります。より詳しく知りたい方は、以下の公式サイトの Usage を参考にしつつ、試してみてください。

• CoffeeScript - usage

次回は、CoffeeScript の基本文法について解説していきます。