{:deps {org.clojure/clojurescript {:mvn/version "1.10.238"}}}
2018年3月26日
Mike Fikes
ClojureScript には、cljs.main と呼ばれる、多くの一般的なユースケースで ClojureScript の使用を大幅に簡素化する、エキサイティングな新しいコマンドライン機能が追加されました。この記事では、導入される機能の簡単なツアーをご案内します。
これらの例を実行するには、ClojureScript をセットアップする必要があります。これは、clj コマンドラインツールを使用するか、スタンドアロン JAR をダウンロードすることで実行できます。
ClojureScript JAR cljs.jar をダウンロードします。
作業ディレクトリに配置します。
さっそく始めましょう! 次のコマンドを実行して、ブラウザ REPL を起動できます。
clj -M -m cljs.main
Windows の場合
java -cp cljs.jar cljs.main
これを行うと、REPL が起動し、自動的にブラウザが起動して接続されます。
REPL ターミナルに以下が表示されます。
ClojureScript 1.10.238
cljs.user=>
これで、ページを制御できるインタラクティブな環境になりました。REPL で次の操作を試して、ブラウザにアラートを表示させてください。
(js/alert "Hello CLJS!")
次に、単純なブラウザベースの ClojureScript アプリをまとめて、cljs.main がアプリのソースをコンパイルする機能を調べてみましょう。
前のセクションでは、cljs.main が index.html を合成的に生成したことに注意してください。現在のディレクトリにアプリ用のカスタム index.html を作成します。
<html>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<script src="out/main.js"></script>
</body>
</html>
次のソースを src/my_app/core.cljs (Windows の場合は src\my_app\core.cljs) に追加します。
(ns my-app.core)
(def ctx (-> js/document
(.getElementById "canvas")
(.getContext "2d")))
(defn draw-shape [x y radius color]
(set! (.-fillStyle ctx) color)
(.beginPath ctx)
(.arc ctx x y radius 0 (* 2 Math/PI))
(.fill ctx))
(draw-shape 150 150 100 "blue")
次に、cljs.main を使用して、まずこのソースをコンパイルし (-c を使用)、完了したらブラウザ REPL を起動し (-r を使用)、さらにソースの変更を監視します (-w を使用)。
clj -M -m cljs.main -w src -c my-app.core -r
Windows の場合
java -cp "cljs.jar;src" cljs.main -w src -c my-app.core -r
また、src ディレクトリをクラスパスに追加していることにも注意してください。
起動すると、ブラウザに青い円が表示されるはずです。
他の円を描画して、アプリを操作してみてください。たとえば、REPL でこれを試してください。
(my-app.core/draw-shape 350 200 50 "red")
ソースを変更した場合はどうなるでしょうか? draw-shape の実装で 2 を 1 に変更し、ブラウザを更新します。これで、円ではなく、アプリが半円を描画するようになります。
前のセクションでは、cljs.main がブラウザ REPL 環境を確立することに依存していました。ただし、cljs.main には、代替の REPL 環境を指定できるコマンドラインフラグ (-re) があります。
たとえば、Node がインストールされている場合は、-re node を指定して cljs.main を使用して Node ベースの REPL を起動できます。
clj -M -m cljs.main -re node
Windows の場合
java -cp cljs.jar cljs.main -re node
これを行うと、Node ベースの REPL に直接移動します。
ClojureScript 1.10.238
cljs.user=> (+ 2 3)
5
cljs.user=> (exists? js/require)
true
小さな Node ベースのアプリを作成しましょう。my-app.core 名前空間の内容を次のように置き換えます。
(ns my-app.core)
(defn square [x]
(* x x))
(defn -main [& args]
(-> args first js/parseInt square prn))
これで、cljs.main を使用して、指定された名前空間で -main を実行 (-m を使用) して、このアプリを実行しましょう。
clj -M -m cljs.main -re node -m my-app.core 5
Windows の場合
java -cp "cljs.jar;src" cljs.main -re node -m my-app.core 5
これを実行すると、名前空間が自動的にコンパイルされ、Node が起動し、-main が実行され、コマンドライン引数 5 が渡されるため、25 が出力されます。
同じことを行うために Node で使用できるスタンドアロン JavaScript ファイルを作成したい場合はどうすればよいでしょうか?
まず、my-app.core の最後にヘルパーを 1 つ追加します。
(set! *main-cli-fn* -main)
次に、simple (-O を使用) ビルドをコンパイルし、Node をターゲットとし (-t を使用)、最終的な出力ファイル (-o を使用) を指定します。
clj -M -m cljs.main -t node -O simple -o main.js -c my-app.core
Windows の場合
java -cp "cljs.jar;src" cljs.main -t node -O simple -o main.js -c my-app.core
これで、main.js を好きな場所にコピーして実行できます。
node main.js 5
そして 25 が出力されます。
組み込みの Nashorn 環境は cljs.main を使用してアクセスでき、外部 JavaScript 環境は必要ありません。これを使用して、いくつかのテストを実行してみましょう。
まず、my-app.core-test 名前空間用の新しいファイルを追加します。
(ns my-app.core-test
(:require
[my-app.core]
[clojure.test :refer [deftest is]]))
(deftest square-test
(is (== 25 (my-app.core/square 5))))
これらのテストを Nashorn (-re nashorn を指定) で実行しましょう。少しやり方を変えて、-i を使用してリソースをロードし、-e を使用してテストを開始するフォームを評価しましょう。
clj -M -m cljs.main -re nashorn -i src/my_app/core_test.cljs -e "(cljs.test/run-tests 'my-app.core-test)"
Windows の場合
java -cp "cljs.jar;src" cljs.main -re nashorn -i src\my_app\core_test.cljs -e "(cljs.test/run-tests 'my-app.core-test)"
これにより、以下が表示されます。
Testing my-app.core-test
Ran 1 tests containing 1 assertions.
0 failures, 0 errors.
上記では、cljs.main で利用可能なほとんどのオプションについて説明しました。他にも利用可能なオプションがあり、実行することでヘルプを表示できます。
clj -M -m cljs.main -h
Windows の場合
java -cp cljs.jar cljs.main -h
役に立つ可能性のある興味深いオプションの 2 つは、-co と -ro です。これらは、コンパイラーの コンパイラーオプション または REPL オプション (-co の下) と、REPL 環境固有のオプション (-ro の下) を構成する機能を提供します。これらは、cljs.main がコマンドラインフラグを提供していないものを指定する必要がある場合に、「エスケープハッチ」として機能できます。
たとえば、以下は :repl-verbose オプションを適用します (REPL の使用中に JavaScript が出力されるようになります)。
clj -M -m cljs.main -co "{:repl-verbose true}" -re node -r
Windows の場合
java -cp cljs.jar cljs.main -co "{:repl-verbose true}" -re node -r
上記のように、コマンドラインで EDN を直接指定することも、EDN を含むファイルの名前を指定することもできます。この機能を使用すると、cljs.main を使用して、ClojureScript コンパイラーでやりたいことをほぼすべて実行できます。
新しい cljs.main 機能が役立ち、ClojureScript コンパイラーで実行する必要のある多くの一般的なタスクが簡素化されることを願っています!