More than 1 year has passed since last update.

emacs ciderからshadow-cljsベースのclojurescript

Last updated at 2022-08-13Posted at 2022-08-13

emacs-ciderについて

emacs使いとしてはemacsでclojurescriptのコードを書きたいものです。emacs上で動くclojure/clojurescriptのIDEとしてはciderがあります。ciderはBozhidar Batsovが開発している。
Ciderのホームページは以下にあります。
https://docs.cider.mx/cider/index.html

emacsで最低限必要なパッケージは以下の通りです。

clojure-mode
cider
これらをpackage-installにてmelpaよりインストールします。

shadowベースの構成

ディレクトリとファイル構成は以下の通りです。

% tree .
.
├── package-lock.json
├── package.json
├── public
│   └── index.html
├── shadow-cljs.edn
└── src
    ├── main
    │   └── my_app
    │       ├── core.cljs
    │       └── helloworld.cljs
    └── test

5 directories, 9 files

package.json

jsのパッケージは以下の通りです。

{
  "name": "my-app",
  "version": "0.0.1",
  "private": true,
  "devDependencies": {
    "shadow-cljs": "2.19.8"
  },
  "dependencies": {
    "all": "^0.0.0",
    "create-react-class": "15.6.3",
    "react": "16.3.2",
    "react-dom": "16.3.2"
  }
}

shadow-cljs.edn

shadow-cljsの構成です。
srcディレクトリにソースコードを置きます。アプリケーションのエントリポイントはappです。また3000番ポートでhttpサーバーが立ち上がります。

;; shadow-cljs configuration
{:source-paths
 ["src/dev"
  "src/main"
  "src/test"]

 :dependencies
 [
  [binaryage/devtools "0.9.10"]
  [reagent "0.8.0"]
  ]

 :dev-http {8080 "public"}
 :builds
 {:hello
  {:target :browser
   :modules {:main {:init-fn my-app.helloworld/init}}
   }
  :app {:target :browser
        :output-dir "public/js"
        :asset-path "/js"

        :modules
        {:main
         {:entries [my-app.core]}}

        :devtools
        {:after-load  my-app.core/init
         :http-root   "public"
         :http-port   3000}}
  }
 }

public/index.html

publicディレクトリにindex.htmlを置きます。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>helloworld example</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/js/main.js" type="text/javascript"></script>
  </body>
</html>

src/main/my_app/core.cljs

reagentを用いたコードです。画面にHello World!と表示されるはずです。

(ns my-app.core
  (:require [reagent.core :as r])
  )

(def greeting "Hello World!")

(defn app []
  [:div greeting])

(defn stop []
  (js/console.log "Stopping..."))

(defn start []
  (js/console.log "Starting...")
  (r/render [app]
            (.getElementById js/document "app")))

(defn ^:export init []
  (start))

(init)