Build React system with ClojureScript (Squint)

Transcript

1. ClojureScript (Squint) で React フロントエンド開発 2025 年版 2025年6月15日 馬場 一樹
2. 自己紹介
3. 馬場 一樹(kbaba1001) • フルスタックエンジニア約１０年 • Clojureを仕事でも使っています • Clojure歴 6 年くらい
4. 今日の話
5. Squint：次世代ClojureScript • そもそもClojure(Script) とは • ClojureScript のビルドの歴史 • Squint とは • Squint 活用
6. Clojure(Script) とは
7. Clojureとは • JVM上で動くLISP • CommonLisp や Scheme などに比べてカッ コの種類が多い ◦ () だけでなく {} や [] も使う • Immutable • 関数型プログラミング • 並列処理も得意 (core.async 等) • 動的型付け言語 • clojure.spec による動的なvalidation
8. JVMで動くLISP? • Clojure (Java) • ClojureScript (JavaScript) • ClojureCLR (C#) • Babashka (GraalVM) • Jank (LLVM + JITコンパイラ) • ClojureDart (Dart) • ClojureL (Erlang) • など 様々な環境で動く LISP
9. よく使われている Clojure • Clojure (Java) • ClojureScript (JavaScript) これらと ClojureCLR (C#) は開発元が同じ
10. ClojureScript • ビルドすると JavaScript になる Clojure ◦ いわゆる Alt JS • React (JSX) が使える • 逆に言えば Vue や Svelte 等は厳しい •
11. ClojureScript のビルドの歴史
12. ClojureScript のビルド • ClojureScript が npm で使えるようになったのは最近の話 • それまでどうしていたの？
13. そもそもClojureのビルドシステム • Maven / Gradle … Javaの仕組みに乗っかる • Leiningen / Boot … Clojure 独自のビルドシステム • Clojure CLI / deps.edn … Clojure 公式のビルドシステム パッケージの管理、タスクの実行、ビルドの手順の定義など
14. Clojars Clojure のライブラリを頒布して いるサイト
15. 初期のClojureScript • Clojure のビルドシステムで ClojureScript をビルドする • clojars に cljsjs という名前空間がある • cljsjs に JS のライブラリを登録する
16. Cljsjs • Cljsjs は、当初 Clojure を使っている人からすると手軽で良かった • 当たり前だけど npm 文化が成熟してくると、 cljsjs は不便になっていった • Hot reload ができず、 Clojure の REPL でリロードする必要があった
17. Figwheel の時代 • Hot Reload 問題を解決したビルドシステム • Cljsjs を使う • 頑張れば npm パッケージも使える？
18. Shadow-cljs 時代 • Figwheel の次に流行ったビルドシステム • npm からインストールできるようになった！ ◦ Java もインストールしておく必要がある • npm ライブラリも使えるし、 Clojars のライブラリも使える • Hot Reload なども対応済み • webpack, vite みたいなノリで使える
19. Shadow-cljs のデメリット • 最初の起動がちょっと遅い ◦ というかJSのライブラリが速すぎる。。。 • CSSのビルドができない • 独自文化な感じが否めず、UserGuide をしっかり読む必要がある Shadow-cljs は現状の ClojureScript ビルドの最善手！
20. Squint とは
21. Squint • ClojureScript のビルドの新星 • 既存の ClojureScript との互換性を捨てて、JSとの親和性を高めたClojureScript 方言 • 既存の ClojureScript に対してビルド後のファイルサイズが小さい • Clojure の Maps や Vectors などが JS の普通の objects や Arrays に変換され る • JSX, HTML サポート • Async/Await が使える • vite などと組み合わせて今までよりも気楽にCLJSが使える
22. ClojureScript に対する不満 • Maps や Vectors は JS の Objects や Arrays ではないので、時々変換が必要 • Async/Await をサポートしておらず Promise 周りでたまに困る ◦ core.async を使うとほぼ同じことができるが、 これは Promise を返すわけではないので JS と CLJS を組み合わせたいときにうまく動かせない事がある • ClojureScript は Clojure との親和性が高いが、JSとの親和性を高めたほうが便利 では？という背景で出てきたのが Squint TypeScript と同程度の気楽さで ClojureScript を書きたい！
23. Squint • まだ仕様が固まりきっておらず本番環境での使用は注意が必要 • 細かい不具合はまだ多い • 作者の borkdude さんは化け物レベルの開発力を持っているので、 不具合はすぐ に報告しよう！
24. Squint 活用
25. Squint のサンプルコード • フロントエンド ◦ Vite + Squint + React ◦ https://github.com/neumann-tokyo/vite-squint-react-template • バックエンド ◦ Vite + Squint + Hono ◦ https://github.com/neumann-tokyo/vite-squint-hono-template
26. Squint のデメリットとその対策
27. Squintのデメリット • 既存のClojureScriptの資産を使えない どうしても使いたい ClojureScriptの資産とは何か？ 私としては Malli
28. Malli • Clojure(Script) における動的な型チェック ◦ clojure spec より使いやすい • この手法はあまり他言語にはないやり方 • スキーマを定義して関数の入出力値をチェックしたり、Formの Validationなども出 来る • スキーマをもとに Formatter と連携することも出来る
29. Malli のサンプル
30. Malli の代替を JS で探す • 懐かしの prop-types • さすがにあまりメンテナンスされてなさそう • 型チェック系のライブラリは全てTypeScriptになってしまった 発想を変えよう！
31. Validationライブラリを Malliのように使う • Zod や Valibot のような Validation のためのライブラリを、関数の入力値の動的 な型チェックに使う • Clojure では pre/post による関数の事前条件/事後条件の設定が出来る ◦ 契約による設計 (『オブジェクト指向入門』バートランド・メイヤー著、参照 ) • NODE_ENV=development のときだけ関数の入力値の動的な型チェックを行う
32. preで入力値をチェック (ns libs.age (:require ["valibot" :as v])) (def age-schema (.pipe v (.number v) (.minValue v 0) (.maxValue v 200))) (defn check-age [age] (if (-> import .-meta .-env .-DEV) (let [result (.safeParse v age-schema age)] (.-success result)) true)) (defn display-age [age] {:pre [(check-age age)]} (str age "歳")) valibot の schema を定義 import.meta.env.DEV が true のときだ け Validation を実行する。 false のときは true を返しておく。 :pre で check-age を実行する
33. Development環境で型チェックに失敗した時 (display-age 500)
34. Development環境で型チェックに成功した時 または、Development以外の環境 (display-age 35)
35. まとめ
36. まとめ • Clojure、ClojureScript のビルド環境の歴史 • ClojureScript を安定して使いたいなら Shadow-cljs • ClojureScript の新星 Squint について紹介 • Squint のサンプルコード • Squint で Malli っぽいことをやる方法 Squint どんどん使ってね！☆