モチベーション
以前から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を写経してみようかなと