📝ClojureScript開発環境

📝ClojureScript開発環境

Build Tools #

shadow-cljsを使うか、figwheelを使うか. lumoは2022はオワコン?

shadow-cljsとfigwheel-mainの違いはnpmに依存するかどうか. shadow-cljsはnpmを利用する i.e. よりJavaScriptとの連携や共存がしやすい. この観点でどちらのツールを選択するかは選んだほうがよさそう.

shadow-cljs #

shadow-cljs.edn に設定を書いていく.

ライブラリの追加方法 #

shadow-cljs.ednの :dependencies に追加していく. インストールはshadow-cljsのコマンドを走らせる延長で走る.

ref. Dependencies: Shadow CLJS User’s Guide

shadow-cljsコマンドの基本的な使い方 #

npm pacakgeとしてインストールしたshadow-cljsコマンドの使い方まとめ.

プロジェクトの新規.

$ npx create-cljs-project my-project

# すでにpackage.jsonがプロジェクトにあるとき
$ npm install --save-dev shadow-cljs

# もしくはglobal環境へ
$ npm install -g shadow-cljs

Basic Development Commands.

# compile a build once and exit
$ shadow-cljs compile app

# compile and watch
$ shadow-cljs watch app

# connect to REPL for the build (available while watch is running)
$ shadow-cljs cljs-repl app

# connect to standalone node repl
$ shadow-cljs node-repl

# Running a release build optimized for production use.
$ shadow-cljs release app

Server Mode Commands.

# running server-mode
$ shadow-cljs server
$ shadow-cljs clj-repl

$ shadow-cljs start
$ shadow-cljs stop
$ shadow-cljs restart

REPLのlocahostのport整理 #

server modeで立ち上げるといろいろでてくるので整理.

shadow-cljs - HTTP server available at http://localhost:3000
shadow-cljs - HTTP server available at http://localhost:8080
shadow-cljs - server version: 2.18.0 running at http://localhost:9630
shadow-cljs - nREPL server started on port 38105
  • localhost:3000は shadow-cljs.ednで自分で設定, devtools用.
  • localhost:8080は shadow-cljs.ednで自分で設定, Web表示確認用.
  • localhost:9630はshadow-cljsのデバッグツールが並ぶ.
  • localhost:38105はnREPLようでCIDERから接続する.

例えばcider-connectをするときはnREPLのための38105にアクセスする.

3つのREPLの整理(clj-repl/node-repl/browser-repl) #

shadow-cljsの起動オプションで3つを抑えておく.

  • clj-repl(server-mode)
  • ndoe-repl
  • browser-repl
$ shadow-cljs server
$ shadow-cljs clj-repl

clj-repl(server-mode) は 開発用サーバを立ち上げるときにつかう. clojurescriptを長時間Loopさせている.

$ shadow-cljs node-repl
$ shadow-cljs browser-repl

node-repl はnode.jsで起動するREPL. これはJavaで動くClojureのREPLと同じ.

browser-repl は node-replと機能が変わらないもののBrowserの JavaScriptコンソールと接続することができるモード.

Emacs CIDERでつかう #

cider-jack-in-cljsですべてできる. プロンプトでshadow-cljsを選択.

もしくは,

  • shadow-cljs watch app
  • cider-connect-clj
  • watch で起動して表示されたportを入力(nREPL server start on port x)
  • shadowを選択
  • アプリケーションを選択.

ここでの注意点は, shadow-cljs.ednのdependenciesにcider-nreplを追加すること. これがないとevalできない.

{
 :dependencies
 [[cider/cider-nrepl "0.28.4"]]}

deps.ednとshadow-cljsを共存させるには? #

defaultではnode.jsの管理ツールであるpackage.jsonを利用するがやはりClojureをつかってると Leiningen や Clojure CLI と共存させたいところだ.

ref. tools.deps / deps.edn

References #

with Browser #

Google Chrome or Firefoxが選択肢. それらのDevtoolsと連携.

  • GitHub - binaryage/cljs-devtools
    • A collection of Chrome DevTools enhancements for ClojureScript developers.
  • Source mapsの導入によってJavaScriptのデバッグが楽になる.
    • sourcemapはJavaScriptのコンパイルの変換前と変換後の対応関係を示すjsonデータ. これがないとJavaScriptからそれに対応するソースが辿れない.
    • sourcemapがあればChromeからソースがみれる.
    • ClojureScript - Source maps
  • GitHub - binaryage/dirac
    • ClojureScript用のChrome拡張, fork for Chrome Devtools.
  • ClojureScriptの状態管理にIntegrantを使う - ayato-p

with CIDER #

ref. Emacs CIDER

M-x cider-jack-in-cljsでjack-in or M-x cider-connect-cljsでconnect.


shadow-cljsを利用するには Select ClojureScript REPL type: のプロンプトででshadowを選択する. さらにshadow-cljs.ednで定義したbuild nameを選択すると接続完了. もしくは .dir-locals.el に設定を書いておくことでプロンプト入力は省略できる.

((nil . ((cider-default-cljs-repl . shadow)
         (cider-shadow-default-options . "<your-build-name-here>"))))

jack-inによって ClojureScriptのREPLがnREPLと連携するためのツールが自動で組み込まれる.

したがってコンソールからcljで起動してEmacsからcider-connectする場合はこれらの依存パッケージをdeps.ednに記入する必要がある.


shadow-cljsの場合, jack-in-cljsをすることでshadow-cljs.ednがおいてあればshadow-cljsと解釈されて自動でserverが立ち上がってconnectまでしてくれる. もしくは shadow-cljs server コマンドでサーバを立ち上げM-x cider-connectで接続できる.