「CoffeeScript」の開発環境を用意して、サンプルを表示してみよう

CoffeeScriptによるモダンなWebアプリケーション開発 第2回

coffeeコマンドでプログラムを実行する

　さっそくCoffeeScriptのプログラムを実行してみましょう。手始めに「Hello, World!」を表示してみます。コマンドラインで「coffee」と入力し、Enterキーを押してください。

$ coffee
coffee> 

　coffee>と表示され、入力待ちの状態になります。次のようにプログラムを入力してEnterキーを押します。

coffee> console.log "Hello, World!"

　以下のように表示されます。

coffee> console.log "Hello, World!"
Hello, World!
undefined
coffee> 

　「Hello, World!」と出力され、再び入力待ち状態になります。「Hello, World!」の次の行に「undefined」と表示されていますが、今は気にしなくて大丈夫です。

　次に、計算式を入力してみます。

coffee> 1 + 1
2
coffee> 3 * 5
15

　今回は1行ずつしか出力されず、計算式の答えだけが表示されました。

　次は、aという変数に3を代入してみます。

coffee> a = 3
3

　aの中身を表示します。

coffee> a
3

　さらに別の変数を作って、中身を表示してみます。

coffee> b = a * 4
12
coffee> b
12

　実は、さきほどのHello Worldで出力された「undefined」はconsole.log "Hello, World!" という式自体の評価結果だったのです。console.log()関数の戻り値はundefinedなので、この式自体の評価結果もundefinedとなります。詳しく解説すると以下のようになります。

coffee> console.log "Hello, World!"               (1)
Hello, World!                                     (2)
undefined                                         (3)
coffee> 1 + 1                                     (4)
2                                                 (5)
coffee> 3 * 5                                     (6)
15                                                (7)

1. 入力式
2. console.log()関数によってHello, World!が出力された
3. 1の評価結果
4. 入力式
5. 4の評価結果
6. 入力式
7. 6の評価結果

　ユーザーが式を入力して実行するたびに評価結果が出力されています。このように対話形式でプログラムの評価結果をすぐに確認できる環境をREPLと呼びます。REPLとはRead-eval-print loopの略で、プログラムを読み込み（read）、評価し（eval）、評価結果を出力する（print）ループ（loop）という意味です。

　上記のようにREPLは、ちょっとした式の動作を確認するのに便利です。REPLでは上矢印キーまたは「Ctrl+P」（MacではControl+P）を押すことで過去に実行した式を呼び出すことができます。また、関数名や変数名の入力中にTabキーを押すことで名前の補完が効きます。

　REPL（coffeeプロンプト）を終了するには「Ctrl+C」（MacではControl+C）を入力します。

スクリプトをファイルに書いて実行する

　REPLは手軽に実行できますが、普段プログラムを作る時はファイルとして作成します。さきほどのHello Worldプログラムをファイルに書いて実行してみましょう。

　プログラムを置くためのディレクトリを適当な場所に用意し、ターミナルのカレントディレクトリをそこに移動してください（コラム参照）。その中にリスト3の内容でhello.coffeeというファイルを作ります。なお、CoffeeScriptやNode.jsのソースファイルの文字コードはUTF-8（注4）を使用します。

リスト3　hello.coffee

console.log "Hello, World!"

　プログラムを実行するには、「coffee」コマンドに続けてファイル名を指定します。

$ coffee hello.coffee
Hello, World!

　ファイルとして実行すると、REPLのように式自体の評価結果が出力されることはないため、「undefined」は表示されていません。また、拡張子の.coffeeを省略して実行することも可能です。

$ coffee hello
Hello, World!

注4

　テキストエディタによってBOM（バイトオーダーマーク）の有無を選択できるものがありますが、BOMなしで作成してください。BOMありのUTF-8を単にUTF-8、BOMなしのUTF-8をUTF-8Nと使い分けて表現していることもあります。

［コラム］コマンドプロンプトの操作方法

　コマンドプロンプトに慣れていない方は、次の手順でディレクトリ（フォルダ）を作成してください。

• Windowsの場合

  　マイドキュメントにcs-tutorialというフォルダを作成します。プログラムはこのフォルダ内に作っていきます。エクスプローラでcs-tutorialフォルダを開き、アドレスバーに表示されている文字列をコピーします。次にコマンドプロンプトで「cd」に続けて半角スペースを1つ入力し、右クリックで出てくるメニューから「貼り付け」を選びます。すると先ほどのアドレスバーの内容が貼り付けられるので、Enterキーを押します。これでコマンドプロンプトの今いるディレクトリがcs-tutorialに移動し、プログラムをコンパイルできる状態になります。

• Macの場合

  　適当な場所にcs-tutorialというフォルダを作成します。プログラムはこのフォルダ内に作っていきます。Finderでcs-tutorialの1つ上のフォルダを開いておきます。ターミナルを開き、「cd」に続けて半角スペースを1つ入力します。Finder内のcs-tutorialフォルダからターミナルへドラッグ＆ドロップするとcs-tutorialフォルダのパスが貼り付けられるので、Returnキーを押します。これでターミナルの今いるディレクトリがcs-tutorialに移動し、プログラムをコンパイルできる状態になります。

JavaScriptにコンパイルする

　作成したプログラムをJavaScriptにコンパイルしてみましょう。コンパイルするには「coffee -c」に続けてコンパイル対象となるファイル名を指定します。

$ coffee -c hello.coffee

　何も出力されずに正常にコンパイルが終了し、hello.coffeeと同じディレクトリにhello.jsというファイルが作られます。この.jsファイルはnodeコマンドで実行できます。

$ node hello.js
Hello, World!

　実行結果はhello.coffeeをcoffeeコマンドで実行した場合と同じです。こちらも拡張子の.jsを省略して実行できます。

$ node hello
Hello, World!

　hello.jsの中身はリスト4のようになっています。

リスト4　hello.js

(function() {

console.log("Hello, World!");

}).call(this);

　console.logの部分には()と;が追加されていますが、その他にも最初と最後に風変わりなコードが追加されています。これは関数ラッパーと呼ばれるもので、変数のスコープを作る役目をします。CoffeeScriptでは、不必要にグローバル変数が作られるのを防ぐため、コンパイル時に関数ラッパーが自動的に追加されます。