Clojure Scriptを使ってみる

clojure

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Clojure Scriptとは

先日、Clojure Scriptという技術が発表されました。
Clojure Scriptとは「Clojureで書くことができるJavaScript」です。
Coffee Scriptと同じように、Clojureで記述したファイルをコンパイルしてjsファイルに書き出します。
Clojure自体よくわからない人もいらっしゃるかと思いますので、順番に説明していきます。

Clojureとは?

みなさんはClojure(クロージャー)という言語をご存知でしょうか?
Clojureとは、JVM上で動作するLISP系の言語です。
最近はHerokuでサポートされたりして、知名度があがりつつある言語です。
Clojure言語自体の説明については、Clojure公式サイト※1や、Clojure入門記事※2などを参照してみてください。

Google Closureとの関係

Clojure言語はGoolgeが提供しているClosure Library/Compilerと名前がよく似ていますが、まったくの別物です。
前者はJVM上で動くプログラミング言語、後者はJavaScriptのライブラリおよびツールです。
しかし、Clojure ScriptはClosure Library/Compilerに依存している(コンパイルやオプティマイザ時に使用)ので、少々ややこしい状態になっています。
ClojureとClosureを混同しないように注意してください。

Clojure Scriptを動かしてみる

ではClojure Scriptを実際に動かしてみましょう。
本記事での動作確認環境は下記の通りです。

  • OS : MacOS X 10.6.8
  • Git : 1.7.6
  • Java : 1.6.0_26
    • ※Java6以上が必須です

      github※4からClojure Scriptをcloneしてきて、初期化スクリプトを実行します。

      $ git clone git://github.com/clojure/clojurescript.git
      $ cd clojurescript
      $ script/bootstrap
      

      bootstrapコマンドを実行すると、Clojure本体やClosure Libraryなど、必要なものを取得してくれます。

      bootstrapの実行が終了したら、動作確認をしてみましょう。
      まずはREPLの確認です。

      $./script/repl
      Clojure 1.3.0-beta1
      user=> 
      

      bootstrapで取得されたClojureのREPLが起動します。
      REPLを終了したら、次はClojure ScriptのREPLを確認します。

      $./script/repljs 
      #'user/jse
      "Type: " :cljs/quit " to quit"
      ClojureScript:cljs.user> 
      

      この2つの起動を確認したら、次は環境変数の設定を行います。

      Clojure ScriptのrootディレクトリをCLOJURESCRIPT_HOME環境変数に設定します。

      $ export CLOJURESCRIPT_HOME=/path/your/clojurescript
      $ export PATH=$PATH:$CLOJURESCRIPT_HOME/bin
      

      pathに追加したら、確認してみましょう。

      $ cljsc 
      Usage: cljsc <file-or-dir>
             cljsc <file-or-dir> {:optimizations :advanced}
      

      cljscコマンドが認識されていればOKです。

      では、Clojure Scriptを用いて簡単なサンプルを作成してみましょう。
      JQueryをClojure Scriptから呼び出し、クリックでdiv要素の値を変更するサンプルを作成します。
      まずはJavaScriptに変換される、Clojureファイルを作成します。

      ;jquerytest.cljs
      (ns jquerytest.core)
      (def jquery (js* "$"))
      
      ;ボタンクリック時の関数
      (defn clickBtn
      	  []
      	  (-> (jquery "#text") 
      	  	  (.html "Hello Clojure Script!")))
      
      ;htmlファイルよみこみ時に実行.
      ;ボタンのクリックイベントに関数をセット.
      (jquery
         (fn []
           (-> (jquery "#btn")
               (.click clickBtn))))
      

      Clojure Scriptのファイルは拡張子をcljsにします。
      htmlのロード時にクリックイベントをセットし、ボタンがクリックされるとdiv要素に対してテキストを変更しています。

      では、作成したファイルをjsファイルにコンパイルしましょう。

      $ cljsc jquerytest.cljs > jquerytest.js
      

      同じディレクトリに、jsファイルとoutディレクトリができているはずです。
      そしてjsファイルを使用するjquerytest.htmlファイルも作成します。

      <html>
        <head>
        <script type="text/javascript" src="out/goog/base.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript" src="jquerytest.js"></script>
        <script type="text/javascript">
          goog.require("jquerytest.core");
        </script>
        </head>
        <body>
         <div id="text">Click Me.</div>
         </br>
         <input type="button" id="btn"  value="execute jquery" />
        </body>
      </html>
      

      JQuer本体と、コンパイルしたjsファイル、あとはclosureのファイル読み込んでモジュールをロードしています。

      htmlファイルをブラウザで開いてみてください。ボタンを押下するとテキストが変更されます。
      プログラムの詳細内容については、 Clojure Script Quick Start※3を参照してください。

      ClojureからJQueryを使用してフロントサイドのプログラミングを行ってみました。
      フロントだけでなく、Clojure Scriptはnode.jsにも対応していますので、サーバサイドもClojure Scriptで実装することが可能です。
      今後はこういった特定言語からJavaScriptへコンパイルするようなアプローチがもっと出てきそうですね。

      参考サイトなど

AWS Cloud Roadshow 2017 福岡