設計
CoffeeScriptで学ぶJSの設計
第1回 CoffeeScriptとはなにか

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

2012年09月27日発行

目次

本シリーズでは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は短く簡潔に書けるものであるということを、ここでは感じていただければと思います。

クラス

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

*注:クラスの解説について

JavaScript以外のプログラミング言語も書いている人にとっては、いまさらクラスについての解説を聞くなど、釈迦に説法でしょうが、このシリーズでは、クラスがなんなのか読者が知らないことを想定して書いていきます。

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

class Animal
    constructor: (name) ->
        @name = name
    bark: ->
        alert 'わんおわんお'
        @
    walk: ->
        alert 'てけてけ'
        @
 
animal = new Animal
animal.bark() # アラート: わんおわんお
animal.walk() # アラート: てけてけ

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

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

デモ:クラスの使用例

*注:CoffeeScriptのコンパイルやその結果の実行

リンクしているページがあるのはCoffeeScriptの公式サイトです。このサイトにはCoffeeScriptを書くと、自動的にコンパイル、実行してくれるコンテンツ「TRY COFFESCRIPT」があります。上記のデモは、このコンテンツを利用しています。

特定の機能の塊を雛形として定義できるのが、クラスです。ここでは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/から、インストーラーを利用するのが、もっとも手早く行えます。

node.jsサイト
INSTALLボタンを押すだけで、閲覧しているOS用のインストーラーがダウンロードされる。

手順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

http://coffeescript.org/#usage

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

高津戸 壮
高津戸 壮
フロントエンド・エンジニア

Web制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。数多くのWebサイト、WebアプリケーションのHTML、CSS、JavaScript実装に携わってきた。受託案件を中心にフロント周りの実装、設計、テクニカルディレクションを行う。スケーラビリティを考慮したHTMLテンプレート設計・実装、JavaScriptを使った込み入ったUIの設計・実装を得意分野とする。 著書に『改訂版 Webデザイナーのための jQuery入門』(技術評論社、2014年11月14日)がある。 CSS Nite 2011ベストセッションにおいて、全170セッションの中から、ベスト10セッションに、CSS Nite 2013ベストセッションでは、全278セッション中、ベスト20セッションに選出。