Help us understand the problem. What is going on with this article?

CoffeeScript実行環境を整える 〜 JSおくのほそ道 #020

More than 5 years have passed since last update.

こんにちは、ほそ道です。

今回からよりアジャイリーな開発を目指して、とりあえずCofeeScriptを取り上げます。
今後Yeoman/anguler.js/Synthまたはsails.jsなども取り上げながらリッチなアプリケーションをよりカジュアルに作りたいなという狙いがあり、その第一歩となります。

今回は文法的な所はスルーします。実行方法とコンパイル、その為の環境構築を取り上げます

目次はこちら

Coffeeを飲んでみた理由

TypeScript/Scala.js/PureScriptも少し触ってみましたが下記の3点を評価基準にしたときに一番良いかなーと思いました。

  • 短く書けそう
  • 小回りが効き、他ツールと連携の選択肢もある
  • コンパイルされたJSが見易く、ファットにならない
  • 変換後のJSコードのグッドパーツな感じを見たい

TypeScriptはJS拡張的な位置づけの為、元のJSがイケてないとグッドパーツにしてくれないのでは?という懸念があり今回は見送り。

ScalaベースのScala.jsは出力されたJSがファットで、元の構文がライブラリ内に散らばる感じが惜しいなという感じ。

HaskellライクなPureScriptは動作させるまでにHaskellのパッケージインストールが結構面倒だったのと、出力されたJSはまとまっているのすが大量のコードに囲まれていて何となく重々しい感じ。

きっとどの言語も素敵だと思いますが、今回はCoffeeScriptのフットワークの軽さと他ツール連携が多いと思われる部分を取りました。

Nodeでインストール+実行

インストール

Nodeで実行出来るよう、コンソールで下記のコマンドを叩きましょう。
どこからでも叩きたいのでグローバルインストールとします。

インストール
sudo npm install -g coffee-script

coffeeコマンドを叩くと対話型のコンソールになりますね。アラ簡単。

実行

さっそくコードを書いてみましょう。ファイル名はfirst.coffeeとします。
JSには無いキーワードclassを使ってみます。わくわくです。

first.coffee
class Man
  constructor: (@name, @age) ->

  greet: (arg) ->
    console.log 'Hello I\'m ' + @name + "!";

h = new Man "Hosomichi", 30
h.greet()

ファイルを保存したらコンソールで実行です。

実行
coffee first.coffee    # Hello I'm Hosomichi!

とりあえずイイ感じ!

JSコンパイル

今度はコードをJavaScriptコードに変換してみましょう。
コンソールで下記のコマンドを叩きましょう。

coffee -c first.coffee

同じディレクトリにfirst.jsというのが出来上がっております。サクサク出来ますね。
中身を拝見してみましょう。

first.js
// Generated by CoffeeScript 1.7.1
(function() {
  var Man, h;

  Man = (function() {
    function Man(name, age) {
      this.name = name;
      this.age = age;
    }

    Man.prototype.greet = function(arg) {
      return console.log('Hello I\'m ' + this.name + "!");
    };

    return Man;

  })();

  h = new Man("Hosomichi", 30);

  h.greet();

}).call(this);

フムフム、即時関数の中に収まる形で作られるんですね。

そしてclassで宣言したオブジェクトは即時関数の内部でクロージャを使って安全に生成され、
メソッドはprototypeに設定されると。

そして記述量が3倍ほど違います。

面白いですねぇ。

ブラウザで実行

さてaltJsという事でブラウザでも使いたいですね。
フツーにJSコンパイルして出力ファイルをブラウザに読み込ませるのが常套手段だと思いますが、公式で紹介していた面白い方法を試してみます。

まずcoffee-script.jsをダウンロードしてHTMLから参照できる場所に配置します。
HTMLファイルは次のようにしてみました。

HTMLファイル
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>FirstCoffeeScript!</title>
  </head>
  <body>
    <script src="js/coffee-script.js" type="text/javascript"></script>
    <script type="text/coffeescript">
      class Man
        constructor: (@name, @age) ->

        greet: (arg) ->
          alert 'Hello I\'m ' + @name + "!";

      h = new Man "Hosomichi", 30
      h.greet()
    </script>
  </body>
</html>

重要ポイントは下記の二点です。
- scriptタグのtype属性がtext/coffeescript
- ダウンロードしたcoffee-script.jsを読み込ませている

Node実行の際のconsole.logは折角なのでalertにしてみました。

この状態でブラウザを開いて読み込むとメッセージダイアログが表示されます。
これはカジュアルに実行できて非常によろしいですね!

今回は以上です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away