descjop で遊ぼう day 11 : Omのコンポーネントで遊ぼう

descjop (Electron + Clojure) Advent Calendar 2015 - Adventarの11日目です。

Story Permalink

ここのところ、descjopの話というよりはOmの話が続いていますが、実際の所、ClojureScriptでアプリケーションを作るということは、Electronのレイヤー、Node.jsのレイヤー、ClojureScriptのレイヤー、Clojureのビルドまわりの設定レイヤー、そしてフロントエンドライブラリに関するレイヤーといったそれぞれのレイヤーを適切に設計し、それらを協調させることでアプリケーションが動作するということであります。

さて、前回、ちょっとだけHello Worldをカスタマイズしました。

今回もちょこっとだけカスタマイズしてみます。

前回作成したサンプルは、ボタンを押すと、HTMLが変化するというものでした。

ただ、これはボタンも表示場所も含めて一つのルートコンポーネントに記述しており、拡張していくのには限界があります。

そこで、今回は、Omのコンポーネントを使って部品化を進めてみましょう。

コンポーネント向けの状態を定義

まず、app-stateへ、コンポーネント用向けに状態を追加しておきます。

下記のように変更してみてください。

(defonce app-state (atom {:message "Hello om world!"
                          :mini-component {:message ""}}))

:mini-componentというキーがマップに追加されています。この部分を更新するコンポーネントと、表示するコンポーネントを作ります。

最小コンポーネントをつくってみる

まずは、表示するコンポーネントから。

以下のコードを追加してみましょう。

(defn mini-component
  "小さなOmコンポーネント"
  [owner]
  (om/component
   (dom/p nil
          (str (:message owner) "ミニミニコンポーネント!") )))

この関数はOmコンポーネントを返す関数で、おそらく最も小さいOmコンポーネントです。受け取ったカーソルにある:messageを表示する以外なにもしません。

om/componentというのは、Omで用意されているマクロで、実際には下記のように書いたのと同義になります。

(defn mini-component
  "小さなOmコンポーネント"
  [message owner]
  (reify om/IRender
    (render [this]
      (dom/p nil
             (str (:message message) "ミニミニコンポーネント!")))))

om/componentのコードは以下のように定義されています。

(ns om.core)
 
(defmacro component
  "Sugar over reify for quickly putting together components that
   only need to implement om.core/IRender and don't need access to
   the owner argument."
  [& body]
  `(reify
     om.core/IRender
     (~'render [this#]
       ~@body)))

コンポーネントの配置

続いて、mount-rootを編集します。

(defn mount-root []
  (om/root
   (fn [state owner]
     (reify om/IRender
       (render [this]
         (dom/div nil
                  (dom/h1 nil (:message state))
                  (dom/p {:className "my-message"} (:message state))
                  (om/build mini-component (:mini-component state))
                  (dom/button #js {:onClick (fn [e]
                                              (om/transact! state :message (fn [] "World.")))
                                   :className "press"}
                              "Hello")))))
   app-state
   {:target (. js/document
               (getElementById "app"))}))

(om/build mini-component (:mini-component state))が、追加されたコードになります。

om/buildは、コンポーネントを任意の場所に生成する関数です。第1引数には、IRenderIRenderStateインターフェースを実装したインスタンスを返す関数を渡します。

つまり、Omのコンポーネントというのは、これらのインターフェースを実装したインスタンスを返す関数というわけです。

第2引数で、ここで、app-state:mini-component以下をカーソルとして渡しているのがわかると思います。

これで、アプリケーションを実行すると、ミニミニコンポーネント!と書かれたpタグ要素が出力されたのがわかると思います。

明日は、ボタンコンポーネントを作ります。

Colophon

編集長
Greative GK. 原一浩 ( kara_d )
製版システム
Clojure / Compojure / Ring / Enlive / markdown-clj / Jetty / MySQL
Share this magazine!
Follow designudge

Magazine Archives

vol.122

2016-2-01

Cover

台湾に行ってきました。

今回のカバーは、台湾にて撮影したものです。

自治体Webデザイントレンドこぼれ話 : ここだよマップ

CSS Niteの年末イベントShiftでやっているセッションにデザイントレンドというのがあります。

descjop で遊ぼう day 16 : Windows版のメニューを表示する

2015年の振り返り的な一人レトロスペクティブ

そういえば、まだ2015年の振り返りをマガジンに掲載していませんでした

編集後記

vol.121

2016-1-14

Cover

今回のカバーは、、、UFO?

自治体Webデザイントレンドこぼれ話 : 予告

CSS Niteの年末イベントShiftでやっているセッションにデザイントレンドというのがあります。

descjop で遊ぼう day 11 : Omのコンポーネントで遊ぼう

descjop で遊ぼう day 12 : Omのコンポーネントで遊ぼうその2

descjop で遊ぼう day 13 : Clojure ワークショップでTAしてきた話

descjop で遊ぼう day 14 : アプリケーションメニューを作ろう

descjop で遊ぼう day 15 : descjop 0.5.3をリリースしました

編集後記

vol.120

2016-1-14

Cover

今回のカバーも、初詣に行ったときのショットです。

descjop で遊ぼう day 6 : Electronがうまくダウンロードできないとき

descjop で遊ぼう day 7 : Hello Worldを出力してみるには

descjop で遊ぼう day 8 : Om basedテンプレートを使ってみる

descjop で遊ぼう day 9 : Om basedテンプレートにボタンをつける

descjop で遊ぼう day 10 : Om basedテンプレートにボタンをつけるその2

編集後記

vol.119

2016-1-10

Cover

今回のカバーは、初詣に行ったときのショット。

「descjop で遊ぼう」について

「descjop で遊ぼう」というのは年末にやったアドベントカレンダーのシリーズなのですが、前段としてまずはその解説をば。

descjop で遊ぼう day 1 : はじめに

descjop で遊ぼう day 2 : 3つのテンプレート

descjop で遊ぼう day 3 : 環境構築をしよう

descjop で遊ぼう day 4 : Helpを見てみよう

descjop で遊ぼう day 5 : デフォルトアプリケーションのビルドと起動

編集後記

vol.118

2015-10-22

Cover

今回のカバーは、Stack Overflow DevDaysのイベントをお手伝いしたときの窓からのショット。

Vaqum Web Design Review

創刊以来延々と続くWebサイトレビュー

ミカヅキClojure : ゼロからはじめるClojure入門第2回

Clojureっていうじつに面白いプログラミング言語をとりあげていきます

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記

vol.117

2015-10-07

Cover

今回は散歩道からのショット

Editor’s Picks

designudgeで扱っている内容に近いジャンルのリソースのうち気になったものなど

U.S. Web Design Standardsを見てみる

今話題となっているU.S. Web Design Standardsの周辺情報など見てみました

Bootstrap 4徹底攻略 (3)

Bootstrap 4のアルファ版がでているので使おう

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記

vol.116

2015-9-28

Cover

今回は帰省した際に通った三島からのショットです

Vaqum Web Design Review

創刊以来延々と続くWebサイトレビュー

みそじ過ぎからの英語再学習

40を目前に今までサボっていた英語学習をはじめました

Bootstrap 4徹底攻略 (2)

Bootstrap 4のアルファ版がでているので使おう

ミカヅキClojure

Clojureっていうじつに面白いプログラミング言語をとりあげていきます

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記

vol.115

2015-9-13

Cover

前回と同じ開発合宿のショットから一つ

Vaqum Web Design Review

創刊以来延々と続くWebサイトレビュー

開発合宿へ行こう! : Python mini hack-a-thon 夏山合宿 2015

先週末に行ってきた開発合宿について書きました。

ミカヅキClojure

Clojureっていうじつに面白いプログラミング言語をとりあげていきます

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記