この記事は公開されてから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/bootstrapbootstrapコマンドを実行すると、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>この２つの起動を確認したら、次は環境変数の設定を行います。
Clojure ScriptのrootディレクトリをCLOJURESCRIPT_HOME環境変数に設定します。
$ export CLOJURESCRIPT_HOME=/path/your/clojurescript
$ export PATH=$PATH:$CLOJURESCRIPT_HOME/binpathに追加したら、確認してみましょう。
$ 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へコンパイルするようなアプローチがもっと出てきそうですね。
参考サイトなど
-
-
- ※1 Clojure公式サイト http://clojure.org/
- ※2 Clojure Script Quick Start https://github.com/clojure/clojurescript/wiki/Quick-Start
- ※3 Clojure Script github https://github.com/clojure/clojurescript
-
2
