モチベーション
以前からLispに興味はあったのですが、この記事が結構おもしろくてClojureやってみようとなりました
シンプルな設計が好きなんですけど、Clujureを学ぶことで勉強になればいいなと
また、re-frameからreactのCSSライブラリのmaterial-uiを扱うコードを見て、これすごいなと思ったのも理由の一つです。
ReactのCSSライブラリって結構多いですが、それをJS以外のフレームワークで扱えるっていうのが見たことがなかったので
(re-frameの実態がreactなのでできるというのはわかるけど、一見すると全然違うし)
ゴール
必要なツールをインストールして re-frameのプロジェクトを作って、VSCodeから変数・関数定義を見られるようにする
また、ブラウザからページを表示できて、re-frame-10xを表示する
環境
Arch Linux
手順
大まかな流れは以下のようになっています
- 主要なツールをインストール
- re-frameプロジェクトを作成
- Replに接続 & 開発サーバー起動
- 変数・関数確認、ブラウザから確認
主要なツールをインストール
必要なツールは以下の通りです
| ツール | 概要 |
|---|---|
| java(openjdk) | Clojureのツールの動作に必要 |
| leiningen | Clojureのビルドツール |
| clojure | clojureのバイナリ（必要かよくわからなかったけどとりあえず入れた） |
| nodejs | re-frameを動かすのに必要 |
| vscode | エディタ |
| calva | VSCodeのClojure用拡張機能 |
ArchLinuxだとコマンドだけで全部入りました。多分MacでもHomebrewがあるので同様にインストールできるはずです。
# 必要ツールインストール sudo pacman -S jdk11-openjdk leiningen clojure nodejs visual-studio-code # 拡張機能インストール ext install betterthantomorrow.calva
re-frameプロジェクトを作成
プロジェクト名はreframe-sandboxにしました
lein new re-frame reframe-sandbox +calva +10x
この+ですが、オプションで機能を追加できるみたいです。
+calvaでcalva用の機能、+10xでデバッグ用のre-frame-10xというライブラリがインストールされます。
他にも+testでkafkaが入るとか色々あるみたいです。
詳しくは公式のgithubを参考してください。
Repl接続 & 開発サーバー起動
次はLisp系でよく聞くReplを起動して、VSCodeから接続します。
最近Replってあまり使わない気もしますが、変数・関数の情報をVScodeから参照するのには、Replに接続することが必須みたいなので絶対やりましょう。
あと、入れてからReplを色々使ってみると結構便利でした。
まず、VSCodeでプロジェクトを開きます Teriminalから、以下のコマンドで必要な依存ライブラリをインストールします。（次回以降は不要）
lein deps
そして、ctrl + shift + pでコマンドパレットを開いて、
Calva: Start a Project Repl and Connectを実行します。
leiningen -> shadow-cljsを選択します。（+じゃない方。leiningenでプロジェクト作成した際に設定した、+calvaで作成されているらしい。）
こうするとVSCodeの右側にReplが起動します。
しかもついでにプロジェクトがビルドされて、開発用のWebサーバーも起動してくれます。超便利です。
変数・関数確認、ブラウザから確認
この状態で、Ctrlキーを押しながら変数・関数にカーソルを当てると、詳細な情報が出てきます（Replに接続してないと出ないっぽい？）
更に、Ctrlキーを押しながら変数・関数をクリックすると、定義元にジャンプできます。
開発用サーバーにはhttp://localhost:8280でアクセスできます。
ブラウザからアクセスすると右側にre-frame-10xの画面が表示されているはずです。
また、開発用サーバーはHot Reloadになっているので、コードを書き換えるとリアルタイムで反映します。
例えば、src/clijs/<プロジェクト名>/view.cljsの"Hello from "の箇所を適当に変えると、すぐにブラウザに反映されます。（リロードいらないっぽい）
これからやること
まずは、clojureの基本を一通り見ようかなと思ってます
また、calvaのUser Guideをちゃんと読むつもりです。Clojureを編集する上で便利なキーバインドがたくさんあるみたいなので
肝心のre-farameの学習は、re-frameの公式リポジトリのexamplesを写経してみようかなと
