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

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

emacsで最低限必要なパッケージは以下の通りです。
1. clojure-mode
1. cider
これらを`package-install`にて`melpa`よりインストールします。

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

```text
% 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のパッケージは以下の通りです。

```json
{
  "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サーバーが立ち上がります。

```clojure
;; 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`を置きます。

```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!`と表示されるはずです。

```clojure
(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)
```
# emacsの起動

# clojurescriptのソースコードを開いて`cider-jackin-cljs(C-c M-J)`の実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373940/568de8d1-1de1-1aea-8a8f-00e8fd0d9bac.png)

以下を聞かれるので、
`Select ClojureScript REPL type:`
`shadow`を選択します。

以下を聞かれるので
`Select shadow-cljs build:`
`:app`を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373940/2f1f8c73-e753-8a27-baf6-a2d2736f3793.png)

Visit 'http://localhost:3000' in a browser

が出たらブラウザからhttp://localhost:3000にアクセスしてyを入力する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373940/c13af015-3aa2-6ce2-4dce-184e8c836434.png)


`cljs.user> `のプロンプトが出てciderのプロセスと繋がる。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373940/628f3f9c-8e05-74bd-b187-df72ca8ec724.png)

やっとつながった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373940/7491cc60-66fb-5b75-aa9c-58e979342eb9.png)

cntl-c cntl-cでコードがevalされる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373940/129c6e1f-5497-d2ba-9557-eaa2dc3a8dc5.png)

順番にC-c C-cで実行していく。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373940/8cc341c4-25e5-0482-4040-1190ba1367a9.png)


`(init)`を実行すると画面が変わる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373940/a5070461-188b-d639-6bc0-8a6ffb6c57b6.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373940/e28b6791-b6a1-98f3-03fb-ea60822b3b83.png)