ClojureScript

ClojureScript コマンドライン

2018年3月26日
Mike Fikes

ClojureScript には、cljs.main と呼ばれる、多くの一般的なユースケースで ClojureScript の使用を大幅に簡素化する、エキサイティングな新しいコマンドライン機能が追加されました。この記事では、導入される機能の簡単なツアーをご案内します。

ClojureScript のセットアップ

これらの例を実行するには、ClojureScript をセットアップする必要があります。これは、clj コマンドラインツールを使用するか、スタンドアロン JAR をダウンロードすることで実行できます。

macOS または Linux: clj

  1. clj コマンドラインツールをインストールします。

  2. 作業ディレクトリに、次の内容の deps.edn ファイルを作成します。

{:deps {org.clojure/clojurescript {:mvn/version "1.10.238"}}}

Windows

  1. ClojureScript JAR cljs.jar をダウンロードします。

  2. 作業ディレクトリに配置します。

ブラウザ REPL の開始

さっそく始めましょう! 次のコマンドを実行して、ブラウザ REPL を起動できます。

clj -M -m cljs.main

Windows の場合

java -cp cljs.jar cljs.main

これを行うと、REPL が起動し、自動的にブラウザが起動して接続されます。

Browser REPL Serving Default index.html

REPL ターミナルに以下が表示されます。

ClojureScript 1.10.238
cljs.user=>

これで、ページを制御できるインタラクティブな環境になりました。REPL で次の操作を試して、ブラウザにアラートを表示させてください。

(js/alert "Hello CLJS!")

ブラウザアプリの作成

次に、単純なブラウザベースの ClojureScript アプリをまとめて、cljs.main がアプリのソースをコンパイルする機能を調べてみましょう。

前のセクションでは、cljs.mainindex.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 ディレクトリをクラスパスに追加していることにも注意してください。

起動すると、ブラウザに青い円が表示されるはずです。

Browser REPL Showing Blue Circle

他の円を描画して、アプリを操作してみてください。たとえば、REPL でこれを試してください。

(my-app.core/draw-shape 350 200 50 "red")
Browser REPL Showing Blue and Red Circle

ソースを変更した場合はどうなるでしょうか? draw-shape の実装で 21 に変更し、ブラウザを更新します。これで、円ではなく、アプリが半円を描画するようになります。

Node アプリの作成

前のセクションでは、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 でのテストの実行

組み込みの 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 コンパイラーで実行する必要のある多くの一般的なタスクが簡素化されることを願っています!