Leiningen re-frame Intellij IDEA の環境でREPLの実行、ソース編集時のホットリロードがブラウザに反映されるのを確認するまで #IntelliJ

動機

Clojure触るのが面白く、REPLでの体験がすばらしいのでこれでフロントエンドの開発も面白いのではとClojureScriptに入門したく以下の記事を写経させていただこうと始めたところ

ClojureScript/re-frame開発における思考フロー

動作確認環境をIntellijで設定して動かすのに少し苦労しました。同じような悩みがある人がでるかもしれないから書いておこうという思いで書きます。

この記事で扱うこと

leinのコマンドで以下を行う。

IntellijでREPLでshadow-cljsを動かしてブラウザとつながることを確認する。
ソースのホットリロードができることを確認する。

以上をwatchモードで行う。
テストだけnodeのコマンド(npx) でwatchする。

対象

Clojureを完全に理解している。(仕事などで書いたことなく、初級者レベル)
JavaScript全然わからない。(仕事でまああま書いたことある)
どうやらClojureでフロントエンドがかけるらしい。
reagentというreactのラッパーがあるらしい。
re-frameというreagentのフレームワークがあるらしい。
shadow-cljsというビルドツールがあるらしい。
でも色々な記事調べたら設定がめんどくさそう。
emacs, spacemacs使えない。
Jet BrainsのIDEに慣れている。それでできないの？

前提と準備

この記事は以下の環境で確認しています。

Java 8, もしくは11がインストールされている。(この2つで動作を確認しています。)
Clojureがインストールされている。
leiningenがインストールされている。
node.jsがインストールされている。
Intellij IDEAがインストールしている。
Cursiveプラグインが入っている。
File Watcherプラグインが入っている。
Intellij IDEAでTerminalプラグインでSwitch Focus to Editorのショートカットに ESCを設定している。(terminal, REPLとエディターを頻繁にいききするので)

Mac で動かしましたが、Windowsでもleiningenが動作するのを確認しているので同じ設定で動くと思います。また今回の記事をあたり、Intellij のCE版（普段はUlitimateを使っているので）をダウンロードしてそれを使って動作確認しました。

Intellijのterminalの設定で
Preferences > Tools > Terminal > Override IDE shortcuts
のチェックを外す設定をしておくのがおすすめです。

Shortcut to switch between editor and terminal?

もしあなたがClojureを触り始めたばかりでIntellijで触ったことがない場合、以下の記事を参考にしてください。非常に参考になります。特に構造編集に関しては知る知らないでClojureへの印象が変わります。

File Watcherについて、長い間Intellijでホットリロードを反映させる場合、terminalにフォーカス(terminalに切り替え)をあてないと反映されないと思っていました。以下の記事を参考にでFile Wacherを使用するようにしたところいちいちフォーカスあてずに反映されるようになりました。

Clojure開発環境でのリンターclj-kondo, Joker設定まとめ: Spacemacs, IntelliJ IDEA (Cursive), VS Code (Calva)

本題

以下のre-frameのリポジトリで紹介してあるテンプレートを使います。

re-frame-templete
https://github.com/day8/re-frame-template
以下のように書かれてあるので

lein new re-frame <app-name>

今回はアプリ名をsample-appとして実行します。

lein new re-frame sample-app

これでプロジェクトの雛形が作られます。生成されたREADME.mdにアプリの立ち上げ方、テストの実行方法など書いてくれています。

ここでIntellijを立ち上げて以下のopen or Import
で先ほど作ったプロジェクトを指定します。

もし既にほかのプロジェクトを開いていて(たとえばAPPのサーバープロジェクトを開いているなど)上記画面から選べない場合は
以下の流れで開いてください。

すでに他のプロジェクトを開いている状態から開く場合

File > New > Project from existing sources..を選びます。
ここで作成したプロジェクトを指定します。
Import project from external model > Leiningenを選んでNext> Next > Next
SDKを選ぶところになるのでJava 1.8かそれ以降を選んでください。私は11で確認しています。

プロジェクトが開きます。
この時点ではnode_moduleは作成されていません。

ここでプロジェクト内に生成されたREADME.mdに Running the App
lein watchとあるので実行します。

➜  sample-app lein watch
lein-shadow - reading NPM dependencies from .../sample-app/src/cljs/deps.cljs
lein-shadow - running: npm --version
lein-shadow - NPM version 6.14.7
lein-shadow - running: npm install --save-dev --save-exact shadow-cljs@2.10.19 karma@5.1.0 karma-chrome-launcher@3.1.0 karma-cljs-test@0.1.0 karma-junit-reporter@2.0.1
lein-shadow - NPM install successful + shadow-cljs@2.10.19+ karma-cljs-test@0.1.0+ karma-junit-reporter@2.0.1+ karma-chrome-launcher@3.1.0+ karma@5.1.0updated 5 packages and audited 272 packages in 2.653sfound 0 vulnerabilities
lein-shadow - running shadow-cljs...
shadow-cljs - HTTP server available at http://localhost:8280
shadow-cljs - HTTP server available at http://localhost:8290
shadow-cljs - server version: 2.10.19 running at http://localhost:9630
shadow-cljs - nREPL server started on port 8777
shadow-cljs - watching build :app
shadow-cljs - watching build :browser-test
[:app] Configuring build.
shadow-cljs - watching build :karma-test
[:browser-test] Configuring build.
[:karma-test] Configuring build.
[:karma-test] Compiling ...
[:app] Compiling ...
[:browser-test] Compiling ...
[:browser-test] Build completed. (226 files, 225 compiled, 0 warnings, 35.81s)
[:karma-test] Build completed. (146 files, 146 compiled, 0 warnings, 28.08s)
[:app] Build completed. (527 files, 526 compiled, 0 warnings, 36.69s)

ここで必要なものも一緒にインストールされるようです。node_moduleもここで作成されます。この時点でhttp://localhost:8280でアクセスできるようになります。

プロセスを終了する場合

終了はCtrl + C(macの場合）です。もしプロセスを落とさずにIntellijを終了し、ふたたびlein watchすると
既にportが使われているエラーになるので以下のようにしてkillしてから実行してください。

> lsof -wni tcp:8280 
上記実行しpid確認。pidを指定してkill
> kill -9 pid

REPL

REPLの設定をしていきます。

IDEの上のほうにあるconfigureの設定で

プラスボタンから Clojure REPL > Remote を選び右側のペインで
Connection type > nREPL
Connection details > Use port from nREPL file > Project > sample-app
にします。

ここでOKを押下します。

configure にスタートボタン?が出たと思うのでこれを押下します。これでREPLが立ち上がると思います。
立ち上がったら以下のコマンドを打ちます。
参考
ClojureScript IntelliJ IDEA and shadow-cljs

;; 引数の :app は project.clj の:shadow-cljs :buildsにあるキーです。
(shadow/REPL :app)

これを打つとREPLの右上のプルダウンがcljからcljsに変化すると思います。

この時点でブラウザとつながっています。
では試していきます。

REPL上でcljsを実行

REPL上で
(js/alert "hello world")打ちます。するとブラウザにアラートが出ます。

またREPL上でブラウザに表示されているDOMにアクセスして値を取得することもできます。

 (-> (.querySelector js/document "#app div h1") .-textContent) 
;; => Hello from re-frame

ホットリロードの確認

File Watcherでファイルの変更をIDEで監視されていればソースを変更するたびにブラウザに反映されます。

TEST

README.mdに書いてありますが
IDE のterminalで＋を押して別ウィンドウでterminalを開き

npx karma start

と打ちます。
ファイル変更が検知されてtestが実行されるようになります。

以上です。

まとめ

Clojure関連の情報を書いてくれている方々の環境はemacs,spacemacs,vimが多いようでIntellijで実行するとき戸惑うときもあるがやはりIntellijでも簡単に実行はできる。
Clojureの話題は英語が多い中、英語が苦手な私のような人でもClojure書きたい人もいるので有用な記事を書いてくれている人に感謝。

Leiningen re-frame Intellij IDEA の環境でREPLの実行、ソース編集時のホットリロードがブラウザに反映されるのを確認するまで

動機