Contents

Conimoフレームワークで最小限のCMSを構築する

ConimoはConiの公式フルスタックWebフレームワークです。驚異的に高速なWASMのフロントエンド機能と、堅牢なバックエンドサーバー環境を統合し、まとまりのある合理化された開発者体験をもたらします。

最近、コアとなるConimo CLIスクリプトをconimoライブラリのbinディレクトリに直接組み込むことで、開発者体験を大幅に改善しました。つまり、外部のセットアップスクリプトは不要で、すべてがネイティブのConiコードによって駆動されます。

このガイドでは、新しいアプリケーションの足場作り(スキャフォールディング)、ローカル開発サーバーの実行、そして強力なpatomデータベースを利用した最小限のコンテンツ管理システム(CMS)の迅速な構築について説明します。

1. createによる足場作り

始めるには、組み込みのconimo createコマンドを使用します。Conimoは、最小限のSSR(サーバーサイドレンダリング)セットアップから、完全なリアルタイムWebSocketアーキテクチャ、さらにはネイティブなAIチャットアプリまで、様々な組み込みテンプレートを提供しています。

CMSの場合、永続性が必要です。csv-storeテンプレートはこれに最適で、patomを介して堅牢なCSVファイル・データベースを活用します。

次のコマンドを実行してプロジェクトの足場を作ります:

coni conimo create my-cms --template csv-store

スキャフォールディング・スクリプトは即座にフルスタックのディレクトリ構造を生成します:

  • backend/: バックエンドのHTTP/WebSocketサーバー。
  • frontend/: WASMコンパイルされるフロントエンドコード。
  • coni.edn: プロジェクト設定。ネイティブのWASMビルドがシームレスに機能するように、現在のコンパイラパスが自動的に注入されます。

2. 開発サーバーの実行

プロジェクトが作成されたら、conimo devコマンドを実行するだけで開発環境を起動できます。

cd my-cms
coni conimo dev

内部では、Conimoの開発サーバーは以下のことを行います:

  1. frontend/コードのためのWASMコンパイルプロセスをバックグラウンドで起動します。
  2. main.wasmと必要なJSブリッジが完全にコンパイルされるまで待機します。
  3. 自動的にbackend/main.coniサーバーを起動します。

これで、バックエンドサーバーとWASMフロントエンドがシームレスに接続されたライブのフルスタック環境が整いました。

3. CMSを書く

../conimo-todo.png

csv-storeテンプレートを使用すると、CMSの構築は信じられないほど高速になります。バックエンドはすでに、Coniの永続的なアトミック状態管理システムであるpatomを使用するように配線されています。

「投稿(Posts)」を管理するための最小限のCMSバックエンドを定義する方法は以下の通りです:

;; backend/main.coni
(require "libs/http/src/server.coni" :as http)
(require "libs/patom/src/core.coni" :as patom)

;; 永続的なCSVバックドアトムを初期化
(def *db* (patom/create-store "cms_data.csv" []))

(defn handle-get-posts [req]
  (http/json-response @*db*))

(defn handle-create-post [req]
  (let [body (http/parse-json (:body req))
        new-post {:id (rand-int 10000)
                  :title (:title body)
                  :content (:content body)}]
    ;; アトミックに状態をスワップし、CSVに永続化する
    (patom/swap! *db* conj new-post)
    (http/json-response new-post)))

(defn start-server []
  (let [mux (http/serve-mux)]
    (http/handle mux "GET /api/posts" handle-get-posts)
    (http/handle mux "POST /api/posts" handle-create-post)
    
    (println "CMS API running on port 8080")
    (http/listen-and-serve ":8080" mux)))

(start-server)

わずか数行のコードで、永続的なCSVストアに裏打ちされた完全に機能するJSON APIが完成します。

4. フロントエンド

フロントエンドでは、Coniのreframe_wasmライブラリを使用して、ブラウザ内でこれらの投稿をネイティブに取得してレンダリングできます:

;; frontend/main.coni
(require "libs/reframe/src/core.coni" :as rf)
(require "libs/http/src/client.coni" :as client)

(rf/reg-event-fx :fetch-posts
  (fn [_ _]
    (let [res (client/get "/api/posts")]
      {:dispatch [:set-posts (:body res)]})))

(rf/reg-event-db :set-posts
  (fn [db [_ posts]]
    (assoc db :posts posts)))

(rf/reg-sub :posts
  (fn [db _]
    (:posts db [])))

(defn cms-view []
  (let [posts @(rf/subscribe [:posts])]
    [:div.container
      [:h1 "My Conimo CMS"]
      [:button {:on-click #(rf/dispatch [:fetch-posts])} "Load Posts"]
      [:ul
        (for [p posts]
          [:li [:h3 (:title p)] [:p (:content p)]])]]))

(rf/mount cms-view (js/document.getElementById "app"))

まとめ

CLIスクリプトをbinディレクトリに直接組み込むことで、Conimoプロジェクトの開始がこれまで以上にスムーズになりました。createスクリプトは完璧なボイラープレートを提供し、devは優れたローカルワークフローを提供し、patomとConi WASMの組み合わせにより、CMSのような強力で永続的なアプリケーションを数分で構築することができます。

Happy coding!