simple-web-system technology

Webに関する技術をシンプルに扱うブログ

Clojureのフロントエンドに入門してみた(re-frame + VSCode)

モチベーション

以前からLispに興味はあったのですが、この記事が結構おもしろくてClojureやってみようとなりました

logmi.jp

シンプルな設計が好きなんですけど、Clujureを学ぶことで勉強になればいいなと

また、re-frameからreactのCSSライブラリのmaterial-uiを扱うコードを見て、これすごいなと思ったのも理由の一つです。

ReactのCSSライブラリって結構多いですが、それをJS以外のフレームワークで扱えるっていうのが見たことがなかったので

(re-frameの実態がreactなのでできるというのはわかるけど、一見すると全然違うし)

ゴール

必要なツールをインストールして re-frameのプロジェクトを作って、VSCodeから変数・関数定義を見られるようにする

また、ブラウザからページを表示できて、re-frame-10xを表示する

環境

Arch Linux

手順

大まかな流れは以下のようになっています

  1. 主要なツールをインストール
  2. re-frameプロジェクトを作成
  3. Replに接続 & 開発サーバー起動
  4. 変数・関数確認、ブラウザから確認

主要なツールをインストール

必要なツールは以下の通りです

ツール 概要
java(openjdk) Clojureのツールの動作に必要
leiningen Clojureのビルドツール
clojure clojureのバイナリ(必要かよくわからなかったけどとりあえず入れた)
nodejs re-frameを動かすのに必要
vscode エディタ
calva VSCodeClojure拡張機能

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を参考してください。

github.com

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の基本を一通り見ようかなと思ってます

funcool.github.io

また、calvaのUser Guideをちゃんと読むつもりです。Clojureを編集する上で便利なキーバインドがたくさんあるみたいなので

calva.io

肝心のre-farameの学習は、re-frameの公式リポジトリのexamplesを写経してみようかなと

github.com