node.js 不要! Windows でも簡単に CoffeeScript を使う方法

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

最近 CoffeeScript 関連のエントリーが私のRSSリーダーにひっきりなしに流れてきます. どうやら流行っているらしい.

github で話題になったころに少し触ったくらいでのめり込みはしなかったのですが, 無視できない存在になりつつあります. 今更感満載ですがお手軽に CoffeeScript を試す方法を紹介しようと思います.

”導入するかどうかはさておき, とにかく CoffeeScript を触ってみたい”って人向けの方法です.


             
                  
                   
                  
            {  }                       _____       __  __
         }{ }{  { )                   / ____|     / _|/ _|
     .- { { }  { }} -.               | |     ___ | |_| |_ ___  ___
    (  ( } { } { } }  )              | |    / _ \|  _|  _/ _ \/ _ \
    |`-..________ ..-'|              | |___| (_) | | | ||  __/  __/
    |                 |               \_____\___/|_| |_| \___|\___|
    |                 ;--.
    |                (__  \            _____           _       _
    |                 | )  )          / ____|         (_)     | |
    |                 |/  /          | (___   ___ _ __ _ _ __ | |_
    |                 (  /            \___ \ / __| '__| | '_ \| __|
    |#-..________ ..-#|/              ____) | (__| |  | | |_) | |_
    |#################|              |_____/ \___|_|  |_| .__/ \__|
     `-#############-'                                  | |
                                                        |_|

Demo Download

『CoffeeScript インストール』ググってみると

  • node.js をインストール
  • npm を使って coffee-scirpt をインストール
  • コマンド coffee ファイル名 で .coffee を .js に変換

的な解説がたくさんでてきます.

めんどい!!

そもそも npm 使っている時点で Windows ユーザーが使えない.(正確にはできるが…) こんなのは面倒だし, 導入でコスト(時間)がかかるものを紹介するのはこのブログの理念に反する.

ということで, 今回は簡単に CoffeeScript を使う方法を紹介しようと思います.

Usage

それでは CoffeeScript の使い方について解説します. 流れとしては,

  • script タグで coffee-script.js を読み込む
  • CoffeeScript のコードを書く
  • 実行時にコンパイル
  • eval で実行

という流れになっています. 今回は 2通りの方法を紹介します.

使い方 0 – script タグに CoffeeScript を記述する

coffee-script.js を読み込んだ状態で, script タグの type を text/coffeescript とすると 自動でコンパイル, 実行してくれます.

Sample Code

<!DOCTYPE html>

<html>
    
    <head>
        <meta charset=UTF-8 />
        <title></title>
        <script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
        <script type="text/coffeescript">
            document.write "Hello, world!"
        </script>
    </head>
    
    <body>
        <h1></h1>
    </body>
    
</html>

Good Point

  • もっとも気軽に試せる

Pad Point

  • html に書かないといけない

使い方 1 – Ajax でファイルを読み込み, 実行する

外部ファイルに CoffeeScript のコードを記述し, Ajax でそのファイルを取得し, 実行する方法です.

Sample Code

<!DOCTYPE html>

<html>
    
    <head>
        <meta charset=UTF-8 />
        
        <script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    </head>
    
    <body>
        <h1>CoffeeScritp Test</h1>
        <script>
            $(function() {
                $.ajax({
                    url:"script.coffee",
                    dataType: "text",
                    success: function(data) {
                        var js = CoffeeScript.compile(data);
                        eval(js);
                    }
                });
            });
        </script>
    </body>
    
</html>

Good Point

  • html 部分と coffee コード部分を分離できる

Pad Point

  • eval が不気味

使い方 2 – script タグの src で coffeescript を指定して実行

@laiso さんに指摘されて, 追加しました.

わざわざユーザ側で ajax 使わなくても, script タグの src に指定すれば, coffee-script.js の方で読み込み実行してくれるみたいです.

追記しといてなんだけど一番オススメです!!

Sample Code

<!DOCTYPE html>

<html>
    
    <head>
        <meta charset=UTF-8 />
        <title>Usage 2 | CoffeeScript</title>
        <script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
        <script src="script.coffee" type="text/coffeescript"></script>
    </head>
    
    <body>
        <h1>Usage 2 | CoffeeScript</h1>
    </body>
    
</html>

Good Point

  • .js ファイルと同じ感覚で使える

以上, CoffeeScript の使い方の紹介でした.

※今回紹介した方法は, 実行時に変換しているので実際の運用には向いておりません. サービスとして CoffeeScript を使用する場合はちゃんと静的に js に変換して使いましょう!!

node.js を使うってことはコンパイラは js で動いているわけで, じゃあ適当に書いた CoffeeScript を実行時に(webgl のシェーダや proccessing.js みたいに) コンパイルすれば実行出来んじゃね? っと思って調べたらちゃんと方法があったって感じです.

The Little Book on CoffeeScript』という公式本?の最初の方におもいっきり書いてあります(ちゃんと読んどけよって話ですよねw)

こんなに長々と書くような内容ではないかもしれませんが, あくまでコマンドプロンプト? ターミナル?? なにそれおいしいの??? 的な人を 対象に書いた記事なのであまり突っ込まないでください.

次回は, jsdo.it で CoffeeScript を使う方法を紹介したいと思います.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT