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

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

Story Permalink

昨日に続いて、ボタンのコンポーネントを用意していきます。

ボタンコンポーネントを定義する

ボタンコンポーネントの定義は、下記のようなコードで行います。

(defn button-component
  "ボタンコンポーネント"
  [message owner]
  (reify om/IRender
    (render [this]
      (dom/div nil
               (dom/button #js {:onClick (fn [e]
                                           (om/update! message :message "マイ"))}
                           "add my to component")))))

ポイントとしては、om/componentマクロを使わずに、reifyを使ったインターフェースの実装を行っています。

これは、ユーザの操作が入るような、単純でなくなる可能性があるコンポーネントの場合、様々なインターフェースを定義しておくコードとしてあらかじめ作っておきたいからです。

処理としては、app-state:mini-component {:message ""}に対して、操作を行っており、ここでは「マイ」という文字列が入るようになっています。

これによって、おそらくはボタンを押すとミニミニコンポーネントマイミニミニコンポーネントになることでしょう。

さて、コンポーネント全体の作りは前回紹介した通りでここも変わっていません。

状態を変化させる関数として、(om/update! message :message "マイ")を今回使ってみました。

om/update!は、対象のカーソルに対して、指定のキーの値を書き換えるという処理をOm経由でしてくれます。

om/update!も内部実装的にはom/transact!関数を実行する形になります。

これで、コンポーネントができました。

ボタンコンポーネントの配置

ボタンコンポーネントの配置も前回と同様にom/build関数を使って行います。複数のコンポーネントを配置したい場合は、om/build-allという関数も存在しています。

ここでは、(om/build button-component (:mini-component state))を挿入しました。

以下が出来上がったコードです。

(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")
                  (om/build button-component (:mini-component state))))))
   app-state
   {:target (. js/document
               (getElementById "app"))}))

add my to componentというボタンを押すと、ミニミニコンポーネントマイミニミニコンポーネントに変わるはずです。

以上で、簡単ですがコンポーネントの初歩的な使い方終わりです。

これで、アプリケーション内の部品化とアプリケーション全体の状態の管理という部分ができるようになりました。

ここまででもちょっとしたアプリケーションが作れるようになるはずです。

次以降で、アプリケーションのネイティブメニューの構築などをやっていく予定です。

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っていうじつに面白いプログラミング言語をとりあげていきます

インフォメーション

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

編集後記