Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Om はじめの一歩

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Satoshi Kondo Satoshi Kondo
May 23, 2015
Programming
1
270

Om はじめの一歩

2015.05.23 ClojureScript 勉強会
「Om はじめての一歩」の発表資料

https://halake.doorkeeper.jp/events/25002

Avatar for Satoshi Kondo

Satoshi Kondo

May 23, 2015
Tweet

Other Decks in Programming

See All in Programming
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
170
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
Avatar for とすり tosuri13
4
590
IFSによる形状設計／デモシーンの魅力 @ 慶應大学SFC
Avatar for がむ gam0022
1
300
AIフル活用時代だからこそ学んでおきたい働き方の心得
Avatar for shinoyu shinoyu
0
130
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
組織で育むオブザーバビリティ
Avatar for ryotaro kobayashi ryota_hnk
0
170
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
370
インターン生でもAuth0で 認証基盤刷新が出来るのか
Avatar for takumi taku271
0
190
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
Avatar for Hiroshi Morishige himorishige
11
7.4k
Best-Practices-for-Cortex-Analyst-and-AI-Agent
Avatar for ryotaro.ikeda@finatext.com ryotaroikeda
1
100
Data-Centric Kaggle
Avatar for ねぼすけAI isax1015
2
770
Automatic Grammar Agreementと Markdown Extended Attributes
について
Avatar for Kishikawa Katsumi kishikawakatsumi
0
190

Featured

See All Featured
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
36k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
0
54
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
240
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
380
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
0
1.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
240
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
810
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
8.5k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
0
320

Transcript

  1. 0N͸͡ΊͷҰา ʙ50%0ϦετΛ࡞ֶͬͯͿʙ $MPKVSF4DSJQUษڧձ !TOVGLPO

  2. ࣗݾ঺հ w ͜Μʹͪ͸ w !TOVGLPOͰ͢ɻ w ϑϦʔϥϯεͰ͢ɻ w $MPKVSFͰ࢓ࣄΛ͍ͯ͠·͢ɻ

  3. આ໌͢Δ͜ͱ w 0Nͱ͸Կ͔ʁ w 0NͰ͸ͲΜͳ෩ʹίʔυΛॻ͔͘ʁ

  4. આ໌͠ͳ͍͜ͱ w $MPKVSF$MPKVSF4DSJQUʹ͍ͭͯ w 3FBDUͱͷൺֱ w 0NΛ࢖Θͳ͍৔߹ͱͷൺֱ

  5. ࠓ೔ͷ໨ඪ

  6. 0NͷงғؾΛ͔ͭΉ

  7. 0Nͱ͸ʁ w 3FBDUͷ$MPKVSF4DSJQUϥούʔ w .7$ͷ7JFXʹରԠ͢ΔϥΠϒϥϦ w ಡΈํ͸ʁ w ΦϜɻ

  8. ಛ௃ w %0.Λ௚઀ૢ࡞͢ΔͷͰ͸ͳ͘ɺঢ়ଶΛมߋ͠ ͦͷ݁Ռͱͯ͠%0.͕ߋ৽͞ΕΔ w %0.ͷϨϯμϦϯά͸7JSUVBM%0.ʹΑΔࠩ ෼ߋ৽ͷͨΊߴ଎ w Ұํ޲ͳσʔλόΠϯσΟϯάΛఏڙ͢Δ

  9. 0Nͷίʔυྫ (ns example (:require [om.core :as om] [om.dom :as dom]))

    (defn widget [data owner] (reify om/IRender (render [this] (dom/h1 nil (:text data))))) (om/root widget {:text "Hello world!"} {:target (. js/document (getElementById "my-app"))})

  10. 0Nͷίʔυྫ (ns example (:require [om.core :as om] [om.dom :as dom]))

    (defn widget [data owner] (reify om/IRender (render [this] (dom/h1 nil (:text data))))) (om/root widget {:text "Hello world!"} {:target (. js/document (getElementById "my-app"))}) $PNQPOFOU

  11. 0Nͷίʔυྫ (ns example (:require [om.core :as om] [om.dom :as dom]))

    (defn widget [data owner] (reify om/IRender (render [this] (dom/h1 nil (:text data))))) (om/root widget {:text "Hello world!"} {:target (. js/document (getElementById "my-app"))}) $PNQPOFOU -JGF$ZDMF1SPUPDPM

  12. 0Nͷίʔυྫ (ns example (:require [om.core :as om] [om.dom :as dom]))

    (defn widget [data owner] (reify om/IRender (render [this] (dom/h1 nil (:text data))))) (om/root widget {:text "Hello world!"} {:target (. js/document (getElementById "my-app"))}) $PNQPOFOU -JGF$ZDMF1SPUPDPM ׳ΕΔ·ͰಡΈͮΒ͍͔΋ɻTBCMPOP PNUPPMTͳͲͷϥ ΠϒϥϦΛར༻͢Δ͜ͱͰΑΓ؆ܿʹهड़Ͱ͖Δɻ ࠓ೔͸આ໌͠·ͤΜɹ

  13. 50%0ϦετΛ࡞Δ

  14. ஫ҙࣄ߲ w ίʔυͷৄࡉ͸આ໌͠ͳ͍ w શମͱͯ͠ͲΜͳྲྀΕ͔Λҙࣝͯ͠΄͍͠

  15. ࢓༷ w 50%0Λදࣔ͢Δ͜ͱ͕Ͱ͖Δ w 50%0Λ௥Ճ͢Δ͜ͱ͕Ͱ͖Δ w 50%0Λ׬ྃऔফ͢͠Δ͜ͱ͕Ͱ͖Δ w 50%0Λ࡟আ͢Δ͜ͱ͕Ͱ͖Δ

  16. Ͱ͖Δ΋ͷ

  17. Ͱ͖Δ΋ͷ

  18. -FJOJOHFOͰϓϩδΣΫτ Λ࡞੒͢Δ

  19. ςϯϓϨʔτΛ࢖͏ USFFUPEPMJTU UPEPMJTU ᵓᴷᴷ3&"%.&NE ᵓᴷᴷJOEFYIUNM ᵓᴷᴷQSPKFDUDMK ᵋᴷᴷTSD ᵋᴷᴷUPEPMJTU ᵋᴷᴷDPSFDMKT EJSFDUPSJFT

    pMFT MFJOOFXNJFTPNUPEPMJTU DEUPEPMJTU MFJODMKTCVJMEPODF PQFOJOEFYIUNM UFSNJOBM PNͷ࡞ऀʹΑΔ࠷খߏ੒ͷςϯϓϨʔτ

  20. (def app-state (atom {:text "Hello world!"})) (om/root (fn [app owner]

    (reify om/IRender (render [_] (dom/h1 nil (:text app))))) app-state {:target (. js/document (getElementById "app"))}) ੜ੒͞Εͨίʔυ <html> <body> <div id="app"></div> <script src="out/todolist.js" type="text/javascript"></script> </body> </html> JOEFYIUNM DPSFDMKT

  21. (def app-state (atom {:text "Hello world!"})) (om/root (fn [app owner]

    (reify om/IRender (render [_] (dom/h1 nil (:text app))))) app-state {:target (. js/document (getElementById "app"))}) ੜ੒͞Εͨίʔυ <html> <body> <div id="app"></div> <script src="out/todolist.js" type="text/javascript"></script> </body> </html> JOEFYIUNM DPSFDMKT ΞϓϦέʔγϣϯͱඳըͷؔ܎Λఆٛ

  22. (def app-state (atom {:text "Hello world!"})) (om/root (fn [app owner]

    (reify om/IRender (render [_] (dom/h1 nil (:text app))))) app-state {:target (. js/document (getElementById "app"))}) ੜ੒͞Εͨίʔυ <html> <body> <div id="app"></div> <script src="out/todolist.js" type="text/javascript"></script> </body> </html> JOEFYIUNM DPSFDMKT τοϓϨϕϧͷ$PNQPOFOU

  23. (def app-state (atom {:text "Hello world!"})) (om/root (fn [app owner]

    (reify om/IRender (render [_] (dom/h1 nil (:text app))))) app-state {:target (. js/document (getElementById "app"))}) ੜ੒͞Εͨίʔυ <html> <body> <div id="app"></div> <script src="out/todolist.js" type="text/javascript"></script> </body> </html> JOEFYIUNM DPSFDMKT ΞϓϦέʔγϣϯͷঢ়ଶΛ؅ཧ ରԠ෇͚

  24. (def app-state (atom {:text "Hello world!"})) (om/root (fn [app owner]

    (reify om/IRender (render [_] (dom/h1 nil (:text app))))) app-state {:target (. js/document (getElementById "app"))}) ੜ੒͞Εͨίʔυ <html> <body> <div id="app"></div> <script src="out/todolist.js" type="text/javascript"></script> </body> </html> JOEFYIUNM DPSFDMKT දࣔྖҬͷରԠ෇͚

  25. ϙΠϯτ w BUPNͰΞϓϦέʔγϣϯͷঢ়ଶΛ؅ཧ w PNDPSFSPPUͰϨϯμϦϯάͨ݁͠ՌΛදࣔ͢ Δ&MFNFOUͱͷରԠ෇͚Δ w SFOEFSͰΞϓϦʔέʔγϣϯͷঢ়ଶʹରԠͨ͠ ϨϯμϦϯά͕ߦΘΕΔ

  26. Πϝʔδ ΞϓϦέʔγϣϯঢ়ଶ "UPN $PNQPOFOU %0. SFOEFS FWFOUঢ়ଶมߋ ରԠ෇͚ ✕ΞϓϦέʔγϣϯঢ়ଶͷมߋʹରԠͯ͠ඳըΛߋ৽͢Δ ˓ΞϓϦέʔγϣϯঢ়ଶͷมߋʹରԠͯ͠ඳը͕ߋ৽͞ΕΔ

  27. ࢓༷ w 50%0Λදࣔ͢Δ͜ͱ͕Ͱ͖Δ w 50%0Λ௥Ճ͢Δ͜ͱ͕Ͱ͖Δ w 50%0Λ׬ྃऔফ͢͠Δ͜ͱ͕Ͱ͖Δ w 50%0Λ࡟আ͢Δ͜ͱ͕Ͱ͖Δ

  28. (def app-state (atom {:todos [{:id 1 :title "ಲ೑Λങͬͯ͘Δ"} {:id 2

    :title "ͨ·Ͷ͗Λങͬͯ͘Δ"} {:id 3 :title "ʹΜ͡ΜΛങͬͯ͘Δ"} {:id 4 :title "͡Ό͕͍΋Λങͬͯ͘Δ"} {:id 5 :title "ΧϨʔΛ࡞Δ"}]})) (defn- todolist-view [app owner] (reify om/IRender (render [_] (apply dom/ul nil (map #(dom/li nil (:title %)) (:todos app)))))) (om/root todolist-view app-state {:target (. js/document (getElementById "app"))}) DPSFDMKT 50%0ϦετΛදࣔ

  29. (def app-state (atom {:todos [{:id 1 :title "ಲ೑Λങͬͯ͘Δ"} {:id 2

    :title "ͨ·Ͷ͗Λങͬͯ͘Δ"} {:id 3 :title "ʹΜ͡ΜΛങͬͯ͘Δ"} {:id 4 :title "͡Ό͕͍΋Λങͬͯ͘Δ"} {:id 5 :title "ΧϨʔΛ࡞Δ"}]})) (defn- todolist-view [app owner] (reify om/IRender (render [_] (apply dom/ul nil (map #(dom/li nil (:title %)) (:todos app)))))) (om/root todolist-view app-state {:target (. js/document (getElementById "app"))}) DPSFDMKT 50%0ϦετΛදࣔ ΞϓϦέʔγϣϯঢ়ଶΛઃఆ

  30. (def app-state (atom {:todos [{:id 1 :title "ಲ೑Λങͬͯ͘Δ"} {:id 2

    :title "ͨ·Ͷ͗Λങͬͯ͘Δ"} {:id 3 :title "ʹΜ͡ΜΛങͬͯ͘Δ"} {:id 4 :title "͡Ό͕͍΋Λങͬͯ͘Δ"} {:id 5 :title "ΧϨʔΛ࡞Δ"}]})) (defn- todolist-view [app owner] (reify om/IRender (render [_] (apply dom/ul nil (map #(dom/li nil (:title %)) (:todos app)))))) (om/root todolist-view app-state {:target (. js/document (getElementById "app"))}) DPSFDMKT 50%0ϦετΛදࣔ $PNQPOFOUΛ࡞੒

  31. (def app-state (atom {:todos [{:id 1 :title "ಲ೑Λങͬͯ͘Δ"} {:id 2

    :title "ͨ·Ͷ͗Λങͬͯ͘Δ"} {:id 3 :title "ʹΜ͡ΜΛങͬͯ͘Δ"} {:id 4 :title "͡Ό͕͍΋Λങͬͯ͘Δ"} {:id 5 :title "ΧϨʔΛ࡞Δ"}]})) (defn- todolist-view [app owner] (reify om/IRender (render [_] (apply dom/ul nil (map #(dom/li nil (:title %)) (:todos app)))))) (om/root todolist-view app-state {:target (. js/document (getElementById "app"))}) DPSFDMKT 50%0ϦετΛදࣔ

  32. (def app-state (atom {:todos [{:id 1 :title "ಲ೑Λങͬͯ͘Δ"} {:id 2

    :title "ͨ·Ͷ͗Λങͬͯ͘Δ"} {:id 3 :title "ʹΜ͡ΜΛങͬͯ͘Δ"} {:id 4 :title "͡Ό͕͍΋Λങͬͯ͘Δ"} {:id 5 :title "ΧϨʔΛ࡞Δ"}]})) (defn- todolist-view [app owner] (reify om/IRender (render [_] (apply dom/ul nil (map #(dom/li nil (:title %)) (:todos app)))))) (om/root todolist-view app-state {:target (. js/document (getElementById "app"))}) DPSFDMKT 50%0ϦετΛදࣔ

  33. ࢓༷ w 50%0Λදࣔ͢Δ͜ͱ͕Ͱ͖Δ w 50%0Λ௥Ճ͢Δ͜ͱ͕Ͱ͖Δ w 50%0Λ׬ྃऔফ͢͠Δ͜ͱ͕Ͱ͖Δ w 50%0Λ࡟আ͢Δ͜ͱ͕Ͱ͖Δ

  34. (defn- handle-key-down [e app owner] (when (= (.-keyCode e) ENTER_KEY)

    (let [new-field (om/get-node owner "newField") new-todo {:id (-> (:todos app) count inc) :title (.-value new-field)}] (om/transact! app :todos #(conj % new-todo)) (set! (.-value new-field) "")))) (defn- todolist-view [app owner] (reify om/IRender (render [_] (dom/div nil (dom/input #js {:className "new-todo" :placeholder "What needs to be done?" :onKeyDown #(handle-key-down % app owner) :ref "newField"}) (apply dom/ul nil (map #(dom/li nil (:title %)) (:todos app))))))) DPSFDMKT 50%0ೖྗΛ௥Ճ

  35. (defn- handle-key-down [e app owner] (when (= (.-keyCode e) ENTER_KEY)

    (let [new-field (om/get-node owner "newField") new-todo {:id (-> (:todos app) count inc) :title (.-value new-field)}] (om/transact! app :todos #(conj % new-todo)) (set! (.-value new-field) "")))) (defn- todolist-view [app owner] (reify om/IRender (render [_] (dom/div nil (dom/input #js {:className "new-todo" :placeholder "What needs to be done?" :onKeyDown #(handle-key-down % app owner) :ref "newField"}) (apply dom/ul nil (map #(dom/li nil (:title %)) (:todos app))))))) DPSFDMKT 50%0ೖྗΛ௥Ճ ೖྗϘοΫεΛ௥Ճ

  36. (defn- handle-key-down [e app owner] (when (= (.-keyCode e) ENTER_KEY)

    (let [new-field (om/get-node owner "newField") new-todo {:id (-> (:todos app) count inc) :title (.-value new-field)}] (om/transact! app :todos #(conj % new-todo)) (set! (.-value new-field) "")))) (defn- todolist-view [app owner] (reify om/IRender (render [_] (dom/div nil (dom/input #js {:className "new-todo" :placeholder "What needs to be done?" :onKeyDown #(handle-key-down % app owner) :ref "newField"}) (apply dom/ul nil (map #(dom/li nil (:title %)) (:todos app))))))) DPSFDMKT 50%0ೖྗΛ௥Ճ

  37. (defn- handle-key-down [e app owner] (when (= (.-keyCode e) ENTER_KEY)

    (let [new-field (om/get-node owner "newField") new-todo {:id (-> (:todos app) count inc) :title (.-value new-field)}] (om/transact! app :todos #(conj % new-todo)) (set! (.-value new-field) "")))) (defn- todolist-view [app owner] (reify om/IRender (render [_] (dom/div nil (dom/input #js {:className "new-todo" :placeholder "What needs to be done?" :onKeyDown #(handle-key-down % app owner) :ref "newField"}) (apply dom/ul nil (map #(dom/li nil (:title %)) (:todos app))))))) DPSFDMKT 50%0ೖྗΛ௥Ճ SFGͰࢦఆ͞Εͨ&MFNFOUΛऔಘ͢Δ

  38. (defn- handle-key-down [e app owner] (when (= (.-keyCode e) ENTER_KEY)

    (let [new-field (om/get-node owner "newField") new-todo {:id (-> (:todos app) count inc) :title (.-value new-field)}] (om/transact! app :todos #(conj % new-todo)) (set! (.-value new-field) "")))) (defn- todolist-view [app owner] (reify om/IRender (render [_] (dom/div nil (dom/input #js {:className "new-todo" :placeholder "What needs to be done?" :onKeyDown #(handle-key-down % app owner) :ref "newField"}) (apply dom/ul nil (map #(dom/li nil (:title %)) (:todos app))))))) DPSFDMKT 50%0ೖྗΛ௥Ճ PXOFS3FBDUͷίϯϙʔωϯτʹΞΫηε͢ΔͨΊʹར༻

  39. (defn- handle-key-down [e app owner] (when (= (.-keyCode e) ENTER_KEY)

    (let [new-field (om/get-node owner "newField") new-todo {:id (-> (:todos app) count inc) :title (.-value new-field)}] (om/transact! app :todos #(conj % new-todo)) (set! (.-value new-field) "")))) (defn- todolist-view [app owner] (reify om/IRender (render [_] (dom/div nil (dom/input #js {:className "new-todo" :placeholder "What needs to be done?" :onKeyDown #(handle-key-down % app owner) :ref "newField"}) (apply dom/ul nil (map #(dom/li nil (:title %)) (:todos app))))))) DPSFDMKT 50%0ೖྗΛ௥Ճ ΞϓϦέʔγϣϯঢ়ଶมߋ

  40. (defn- handle-key-down [e app owner] (when (= (.-keyCode e) ENTER_KEY)

    (let [new-field (om/get-node owner "newField") new-todo {:id (-> (:todos app) count inc) :title (.-value new-field)}] (om/transact! app :todos #(conj % new-todo)) (set! (.-value new-field) "")))) (defn- todolist-view [app owner] (reify om/IRender (render [_] (dom/div nil (dom/input #js {:className "new-todo" :placeholder "What needs to be done?" :onKeyDown #(handle-key-down % app owner) :ref "newField"}) (apply dom/ul nil (map #(dom/li nil (:title %)) (:todos app))))))) DPSFDMKT 50%0ೖྗΛ௥Ճ ΞϓϦέʔγϣϯঢ়ଶมߋ (def app-state (atom {:todos [{:id 1 :title "ಲ೑Λങͬͯ͘Δ"} ɾɾɾ {:id 5 :title “ΧϨʔΛ࡞Δ”} {:id 6 :title "ΧϨʔΛ৯΂Δ"}]})) UPEP͕௥Ճ͞ΕΔ

  41. (defn- handle-key-down [e app owner] (when (= (.-keyCode e) ENTER_KEY)

    (let [new-field (om/get-node owner "newField") new-todo {:id (-> (:todos app) count inc) :title (.-value new-field)}] (om/transact! app :todos #(conj % new-todo)) (set! (.-value new-field) "")))) (defn- todolist-view [app owner] (reify om/IRender (render [_] (dom/div nil (dom/input #js {:className "new-todo" :placeholder "What needs to be done?" :onKeyDown #(handle-key-down % app owner) :ref "newField"}) (apply dom/ul nil (map #(dom/li nil (:title %)) (:todos app))))))) DPSFDMKT 50%0ೖྗΛ௥Ճ ΞϓϦέʔγϣϯঢ়ଶมߋ SFOEFS͕࣮ߦ͞ΕΔ (def app-state (atom {:todos [{:id 1 :title "ಲ೑Λങͬͯ͘Δ"} ɾɾɾ {:id 5 :title “ΧϨʔΛ࡞Δ”} {:id 6 :title "ΧϨʔΛ৯΂Δ"}]})) UPEP͕௥Ճ͞ΕΔ

  42. (defn- handle-key-down [e app owner] (when (= (.-keyCode e) ENTER_KEY)

    (let [new-field (om/get-node owner "newField") new-todo {:id (-> (:todos app) count inc) :title (.-value new-field)}] (om/transact! app :todos #(conj % new-todo)) (set! (.-value new-field) "")))) (defn- todolist-view [app owner] (reify om/IRender (render [_] (dom/div nil (dom/input #js {:className "new-todo" :placeholder "What needs to be done?" :onKeyDown #(handle-key-down % app owner) :ref "newField"}) (apply dom/ul nil (map #(dom/li nil (:title %)) (:todos app))))))) DPSFDMKT 50%0ೖྗΛ௥Ճ ΞϓϦέʔγϣϯঢ়ଶมߋ ߋ৽͞ΕͨUPEPT SFOEFS͕࣮ߦ͞ΕΔ (def app-state (atom {:todos [{:id 1 :title "ಲ೑Λങͬͯ͘Δ"} ɾɾɾ {:id 5 :title “ΧϨʔΛ࡞Δ”} {:id 6 :title "ΧϨʔΛ৯΂Δ"}]})) UPEP͕௥Ճ͞ΕΔ

  43. ࢓༷ w 50%0Λදࣔ͢Δ͜ͱ͕Ͱ͖Δ w 50%0Λ௥Ճ͢Δ͜ͱ͕Ͱ͖Δ w 50%0Λ׬ྃऔফ͢͠Δ͜ͱ͕Ͱ͖Δ w 50%0Λ࡟আ͢Δ͜ͱ͕Ͱ͖Δ

  44. (def app-state (atom {:todos [{:id 1 :title "ಲ೑Λങͬͯ͘Δ" :completed false}

    ɾɾɾ {:id 5 :title "ΧϨʔΛ࡞Δ" :completed false}]})) (defn- todo-item [todo owner] (reify om/IRender (render [_] (let [class (if (:completed todo) "completed" "")] (dom/li nil (dom/input #js {:type "checkbox" :className "toggle" :checked (and (:completed todo) "checked") :onChange (fn [_] (om/transact! todo :completed #(not %)))}) (dom/span #js {:className class} (:title todo))))))) (defn- todolist-view [app owner] (reify om/IRender (render [_] (dom/div nil (dom/input #js {:className "new-todo" :placeholder "What needs to be done?" :onKeyDown #(handle-key-down % app owner) :ref "newField"}) (apply dom/ul nil (om/build-all todo-item (:todos app) {:key :id})))))) DPSFDMKT 50%0ͷ׬ྃऔফΛ௥Ճ

  45. (def app-state (atom {:todos [{:id 1 :title "ಲ೑Λങͬͯ͘Δ" :completed false}

    ɾɾɾ {:id 5 :title "ΧϨʔΛ࡞Δ" :completed false}]})) (defn- todo-item [todo owner] (reify om/IRender (render [_] (let [class (if (:completed todo) "completed" "")] (dom/li nil (dom/input #js {:type "checkbox" :className "toggle" :checked (and (:completed todo) "checked") :onChange (fn [_] (om/transact! todo :completed #(not %)))}) (dom/span #js {:className class} (:title todo))))))) (defn- todolist-view [app owner] (reify om/IRender (render [_] (dom/div nil (dom/input #js {:className "new-todo" :placeholder "What needs to be done?" :onKeyDown #(handle-key-down % app owner) :ref "newField"}) (apply dom/ul nil (om/build-all todo-item (:todos app) {:key :id})))))) DPSFDMKT 50%0ͷ׬ྃऔফΛ௥Ճ νΣοΫঢ়ଶΛ؅ཧ

  46. (def app-state (atom {:todos [{:id 1 :title "ಲ೑Λങͬͯ͘Δ" :completed false}

    ɾɾɾ {:id 5 :title "ΧϨʔΛ࡞Δ" :completed false}]})) (defn- todo-item [todo owner] (reify om/IRender (render [_] (let [class (if (:completed todo) "completed" "")] (dom/li nil (dom/input #js {:type "checkbox" :className "toggle" :checked (and (:completed todo) "checked") :onChange (fn [_] (om/transact! todo :completed #(not %)))}) (dom/span #js {:className class} (:title todo))))))) (defn- todolist-view [app owner] (reify om/IRender (render [_] (dom/div nil (dom/input #js {:className "new-todo" :placeholder "What needs to be done?" :onKeyDown #(handle-key-down % app owner) :ref "newField"}) (apply dom/ul nil (om/build-all todo-item (:todos app) {:key :id})))))) DPSFDMKT 50%0ͷ׬ྃऔফΛ௥Ճ UPEPΞΠςϜʹରԠ͢Δ$PNQPOFOU

  47. (def app-state (atom {:todos [{:id 1 :title "ಲ೑Λങͬͯ͘Δ" :completed false}

    ɾɾɾ {:id 5 :title "ΧϨʔΛ࡞Δ" :completed false}]})) (defn- todo-item [todo owner] (reify om/IRender (render [_] (let [class (if (:completed todo) "completed" "")] (dom/li nil (dom/input #js {:type "checkbox" :className "toggle" :checked (and (:completed todo) "checked") :onChange (fn [_] (om/transact! todo :completed #(not %)))}) (dom/span #js {:className class} (:title todo))))))) (defn- todolist-view [app owner] (reify om/IRender (render [_] (dom/div nil (dom/input #js {:className "new-todo" :placeholder "What needs to be done?" :onKeyDown #(handle-key-down % app owner) :ref "newField"}) (apply dom/ul nil (om/build-all todo-item (:todos app) {:key :id})))))) DPSFDMKT 50%0ͷ׬ྃऔফΛ௥Ճ UPEPΞΠςϜʹରԠ͢Δ$PNQPOFOU $PNQPOFOUͷ഑ஔ͸CVJMECVJMEBMMΛར༻͢Δ

  48. (def app-state (atom {:todos [{:id 1 :title "ಲ೑Λങͬͯ͘Δ" :completed false}

    ɾɾɾ {:id 5 :title "ΧϨʔΛ࡞Δ" :completed false}]})) (defn- todo-item [todo owner] (reify om/IRender (render [_] (let [class (if (:completed todo) "completed" "")] (dom/li nil (dom/input #js {:type "checkbox" :className "toggle" :checked (and (:completed todo) "checked") :onChange (fn [_] (om/transact! todo :completed #(not %)))}) (dom/span #js {:className class} (:title todo))))))) (defn- todolist-view [app owner] (reify om/IRender (render [_] (dom/div nil (dom/input #js {:className "new-todo" :placeholder "What needs to be done?" :onKeyDown #(handle-key-down % app owner) :ref "newField"}) (apply dom/ul nil (om/build-all todo-item (:todos app) {:key :id})))))) DPSFDMKT 50%0ͷ׬ྃऔফΛ௥Ճ ΞϓϦέʔγϣϯঢ়ଶΛมߋ

  49. (def app-state (atom {:todos [{:id 1 :title "ಲ೑Λങͬͯ͘Δ" :completed false}

    ɾɾɾ {:id 5 :title "ΧϨʔΛ࡞Δ" :completed false}]})) (defn- todo-item [todo owner] (reify om/IRender (render [_] (let [class (if (:completed todo) "completed" "")] (dom/li nil (dom/input #js {:type "checkbox" :className "toggle" :checked (and (:completed todo) "checked") :onChange (fn [_] (om/transact! todo :completed #(not %)))}) (dom/span #js {:className class} (:title todo))))))) (defn- todolist-view [app owner] (reify om/IRender (render [_] (dom/div nil (dom/input #js {:className "new-todo" :placeholder "What needs to be done?" :onKeyDown #(handle-key-down % app owner) :ref "newField"}) (apply dom/ul nil (om/build-all todo-item (:todos app) {:key :id})))))) DPSFDMKT 50%0ͷ׬ྃऔফΛ௥Ճ ΞϓϦέʔγϣϯঢ়ଶΛมߋ DPNQMFUFEΛUSVFʹมߋ

  50. (def app-state (atom {:todos [{:id 1 :title "ಲ೑Λങͬͯ͘Δ" :completed false}

    ɾɾɾ {:id 5 :title "ΧϨʔΛ࡞Δ" :completed false}]})) (defn- todo-item [todo owner] (reify om/IRender (render [_] (let [class (if (:completed todo) "completed" "")] (dom/li nil (dom/input #js {:type "checkbox" :className "toggle" :checked (and (:completed todo) "checked") :onChange (fn [_] (om/transact! todo :completed #(not %)))}) (dom/span #js {:className class} (:title todo))))))) (defn- todolist-view [app owner] (reify om/IRender (render [_] (dom/div nil (dom/input #js {:className "new-todo" :placeholder "What needs to be done?" :onKeyDown #(handle-key-down % app owner) :ref "newField"}) (apply dom/ul nil (om/build-all todo-item (:todos app) {:key :id})))))) DPSFDMKT 50%0ͷ׬ྃऔফΛ௥Ճ ΞϓϦέʔγϣϯঢ়ଶΛมߋ DPNQMFUFEΛUSVFʹมߋ SFOEFS͕࣮ߦ͞ΕΔ

  51. (def app-state (atom {:todos [{:id 1 :title "ಲ೑Λങͬͯ͘Δ" :completed false}

    ɾɾɾ {:id 5 :title "ΧϨʔΛ࡞Δ" :completed false}]})) (defn- todo-item [todo owner] (reify om/IRender (render [_] (let [class (if (:completed todo) "completed" "")] (dom/li nil (dom/input #js {:type "checkbox" :className "toggle" :checked (and (:completed todo) "checked") :onChange (fn [_] (om/transact! todo :completed #(not %)))}) (dom/span #js {:className class} (:title todo))))))) (defn- todolist-view [app owner] (reify om/IRender (render [_] (dom/div nil (dom/input #js {:className "new-todo" :placeholder "What needs to be done?" :onKeyDown #(handle-key-down % app owner) :ref "newField"}) (apply dom/ul nil (om/build-all todo-item (:todos app) {:key :id})))))) DPSFDMKT 50%0ͷ׬ྃऔফΛ௥Ճ ΞϓϦέʔγϣϯঢ়ଶΛมߋ DPNQMFUFEΛUSVFʹมߋ SFOEFS͕࣮ߦ͞ΕΔ ߋ৽͞ΕͨUPEP

  52. (def app-state (atom {:todos [{:id 1 :title "ಲ೑Λങͬͯ͘Δ" :completed false}

    ɾɾɾ {:id 5 :title "ΧϨʔΛ࡞Δ" :completed false}]})) (defn- todo-item [todo owner] (reify om/IRender (render [_] (let [class (if (:completed todo) "completed" "")] (dom/li nil (dom/input #js {:type "checkbox" :className "toggle" :checked (and (:completed todo) "checked") :onChange (fn [_] (om/transact! todo :completed #(not %)))}) (dom/span #js {:className class} (:title todo))))))) (defn- todolist-view [app owner] (reify om/IRender (render [_] (dom/div nil (dom/input #js {:className "new-todo" :placeholder "What needs to be done?" :onKeyDown #(handle-key-down % app owner) :ref "newField"}) (apply dom/ul nil (om/build-all todo-item (:todos app) {:key :id})))))) DPSFDMKT 50%0ͷ׬ྃऔফΛ௥Ճ ΞϓϦέʔγϣϯঢ়ଶΛมߋ DPNQMFUFEΛUSVFʹมߋ SFOEFS͕࣮ߦ͞ΕΔ ߋ৽͞ΕͨUPEP SFOEFS͕࣮ߦ͞ΕΔ

  53. ࢓༷ w 50%0Λදࣔ͢Δ͜ͱ͕Ͱ͖Δ w 50%0Λ௥Ճ͢Δ͜ͱ͕Ͱ͖Δ w 50%0Λ׬ྃऔফ͢͠Δ͜ͱ͕Ͱ͖Δ w 50%0Λ࡟আ͢Δ͜ͱ͕Ͱ͖Δ

  54. (defn- todo-item [todo owner] (reify om/IRender (render [_] (let [class

    (if (:completed todo) "completed" "")] (dom/li nil (dom/input #js {:type "checkbox" :className "toggle" :checked (and (:completed todo) "checked") :onChange (fn [_] (om/transact! todo :completed #(not %)))}) (dom/span #js {:className class} (:title todo)) (dom/span #js {:className "delete" :onClick (fn [] (println "remove:" todo) )} "[x]")))))) λάΛ௥Ճ DPSFDMKT ࡟আϘλϯ

  55. (defn- todo-item [todo owner] (reify om/IRender (render [_] (let [class

    (if (:completed todo) "completed" "")] (dom/li nil (dom/input #js {:type "checkbox" :className "toggle" :checked (and (:completed todo) "checked") :onChange (fn [_] (om/transact! todo :completed #(not %)))}) (dom/span #js {:className class} (:title todo)) (dom/span #js {:className "delete" :onClick (fn [] (println "remove:" todo) )} "[x]")))))) λάΛ௥Ճ DPSFDMKT ࡟আϘλϯ

  56. ਌ࢠؔ܎ w $PNQPOFOUʹ͸਌ࢠؔ܎͕͋Δ w UPEPMJTUWJFX͕਌ͰUPEPJUFN͕ࢠ ڞୡ  w ਌͔Βࢠɺࢠ͔Β਌΁σʔλΛ౉͢ํ๏͸ҟͳ Δ

  57. ਌͔Βࢠ΁ w CVJMECVJMEBMMͰࢠͷ$PNQPOFOUΛ࡞੒͢Δ ࡍʹҾ਺Ͱ౉͢

  58. ࢠ͔Β਌΁ w DPSFBTZODΛར༻ͯ͠σʔλΛ౉͢ ଞͷํ๏΋͋Δ  w ਌ଆͰDIBOOFMΛ࡞੒ɺCVJME࣌ʹࢠʹ౉͢ w ࢠଆͰड͚औͬͨDIBOOFMΛར༻ͯ͠਌ʹใࠂ ͢Δ

  59. DPSFBTZOD (ns todolist.core (:require-macros [cljs.core.async.macros :refer [go-loop]]) (:require [om.core :as

    om] [om.dom :as dom] [cljs.core.async :refer [chan <! put!]])) QSPKFDUDMK DPSFDMKT :dependencies [[org.clojure/clojure "1.7.0-beta1"] [org.clojure/clojurescript "0.0-3208"] [org.omcljs/om "0.8.8"] [org.clojure/core.async "0.1.346.0-17112a-alpha"]] ඇಉظॲཧΛߦ͏ͨΊͷϥΠϒϥϦ

  60. (defn- todolist-view [app owner] (reify om/IInitState (init-state [_] {:ch (chan)})

    om/IWillMount (will-mount [_] (let [ch (om/get-state owner :ch)] (go-loop [] (let [todo (<! ch)] (println "remove: " todo) (om/transact! app :todos (fn [todos] (vec (remove #(= (:id todo) (:id %)) todos)))) (recur))))) om/IRenderState … DPSFDMKT ਌ͷઃఆ ࢠ͔Β࡟আର৅ͷUPEPΛड͚औΕΔΑ͏ʹ͢Δ

  61. (defn- todolist-view [app owner] (reify om/IInitState (init-state [_] {:ch (chan)})

    om/IWillMount (will-mount [_] (let [ch (om/get-state owner :ch)] (go-loop [] (let [todo (<! ch)] (println "remove: " todo) (om/transact! app :todos (fn [todos] (vec (remove #(= (:id todo) (:id %)) todos)))) (recur))))) om/IRenderState … DPSFDMKT ਌ͷઃఆ ࢠ͔Β࡟আର৅ͷUPEPΛड͚औΕΔΑ͏ʹ͢Δ $PNQPOFOUϩʔΧϧͳঢ়ଶΛॳظԽ

  62. (defn- todolist-view [app owner] (reify om/IInitState (init-state [_] {:ch (chan)})

    om/IWillMount (will-mount [_] (let [ch (om/get-state owner :ch)] (go-loop [] (let [todo (<! ch)] (println "remove: " todo) (om/transact! app :todos (fn [todos] (vec (remove #(= (:id todo) (:id %)) todos)))) (recur))))) om/IRenderState … DPSFDMKT ਌ͷઃఆ ࢠ͔Β࡟আର৅ͷUPEPΛड͚औΕΔΑ͏ʹ͢Δ $PNQPOFOUϩʔΧϧͳঢ়ଶΛॳظԽ $PNQPOFOU͕Ϛ΢ϯτ͞ΕΔࡍʹҰճ͚ͩݺ͹ΕΔ

  63. (defn- todolist-view [app owner] (reify om/IInitState (init-state [_] {:ch (chan)})

    om/IWillMount (will-mount [_] (let [ch (om/get-state owner :ch)] (go-loop [] (let [todo (<! ch)] (println "remove: " todo) (om/transact! app :todos (fn [todos] (vec (remove #(= (:id todo) (:id %)) todos)))) (recur))))) om/IRenderState … DPSFDMKT ਌ͷઃఆ ࢠ͔Β࡟আର৅ͷUPEPΛड͚औΕΔΑ͏ʹ͢Δ $PNQPOFOUϩʔΧϧͳঢ়ଶΛॳظԽ $PNQPOFOU͕Ϛ΢ϯτ͞ΕΔࡍʹҰճ͚ͩݺ͹ΕΔ ࢠ͔Β࡟আର৅ͷUPEPΛड͚औΔ

  64. (defn- todolist-view [app owner] (reify om/IInitState (init-state [_] {:ch (chan)})

    om/IWillMount (will-mount [_] (let [ch (om/get-state owner :ch)] (go-loop [] (let [todo (<! ch)] (println "remove: " todo) (om/transact! app :todos (fn [todos] (vec (remove #(= (:id todo) (:id %)) todos)))) (recur))))) om/IRenderState … DPSFDMKT ਌ͷઃఆ ࢠ͔Β࡟আର৅ͷUPEPΛड͚औΕΔΑ͏ʹ͢Δ $PNQPOFOUϩʔΧϧͳঢ়ଶΛॳظԽ $PNQPOFOU͕Ϛ΢ϯτ͞ΕΔࡍʹҰճ͚ͩݺ͹ΕΔ ࢠ͔Β࡟আର৅ͷUPEPΛड͚औΔ ΞϓϦέʔγϣϯঢ়ଶ͸ WFDUPSPSNBQΛར༻͢Δඞཁ͋Γ

  65. (defn- todolist-view [app owner] (reify om/IInitState … om/IWillMount … om/IRenderState

    (render-state [_ state] (dom/div nil (dom/input #js {:className "new-todo" :placeholder "What needs to be done?" :onKeyDown #(handle-key-down % app owner) :ref "newField"}) (apply dom/ul nil (om/build-all todo-item (:todos app) {:init-state {:ch (:ch state)} :key :id})))))) DPSFDMKT ਌ͷઃఆ

  66. (defn- todolist-view [app owner] (reify om/IInitState … om/IWillMount … om/IRenderState

    (render-state [_ state] (dom/div nil (dom/input #js {:className "new-todo" :placeholder "What needs to be done?" :onKeyDown #(handle-key-down % app owner) :ref "newField"}) (apply dom/ul nil (om/build-all todo-item (:todos app) {:init-state {:ch (:ch state)} :key :id})))))) DPSFDMKT ਌ͷઃఆ ϩʔΧϧͳঢ়ଶΛࢀর͢ΔͨΊ *3FOEFS͔Β*3FOEFS4UBUFʹมߋ

  67. (defn- todolist-view [app owner] (reify om/IInitState … om/IWillMount … om/IRenderState

    (render-state [_ state] (dom/div nil (dom/input #js {:className "new-todo" :placeholder "What needs to be done?" :onKeyDown #(handle-key-down % app owner) :ref "newField"}) (apply dom/ul nil (om/build-all todo-item (:todos app) {:init-state {:ch (:ch state)} :key :id})))))) DPSFDMKT ਌ͷઃఆ ϩʔΧϧͳঢ়ଶΛࢀর͢ΔͨΊ *3FOEFS͔Β*3FOEFS4UBUFʹมߋ ࢠͷॳظঢ়ଶΛઃఆ

  68. DPSFDMKT ࢠͷઃఆ ਌ʹ࡟আର৅ͷUPEPΛ஌ΒͤΔ (defn- todo-item [todo owner] (reify om/IRenderState (render-state

    [_ state] (let [class (if (:completed todo) "completed" "")] (dom/li nil (dom/input #js {:type "checkbox" :className "toggle" :checked (and (:completed todo) "checked") :onChange (fn [_] (om/transact! todo :completed #(not %)))}) (dom/span #js {:className class} (:title todo)) (dom/span #js {:className "delete" :onClick #(put! (:ch state) todo)} "[x]"))))))

  69. DPSFDMKT ࢠͷઃఆ ਌ʹ࡟আର৅ͷUPEPΛ஌ΒͤΔ *3FOEFS*3FOEFS4UBUF ਌͔Β౉͞Εͨঢ়ଶΛࢀর͢ΔͨΊ (defn- todo-item [todo owner] (reify

    om/IRenderState (render-state [_ state] (let [class (if (:completed todo) "completed" "")] (dom/li nil (dom/input #js {:type "checkbox" :className "toggle" :checked (and (:completed todo) "checked") :onChange (fn [_] (om/transact! todo :completed #(not %)))}) (dom/span #js {:className class} (:title todo)) (dom/span #js {:className "delete" :onClick #(put! (:ch state) todo)} "[x]"))))))

  70. DPSFDMKT ࢠͷઃఆ ਌ʹ࡟আର৅ͷUPEPΛ஌ΒͤΔ *3FOEFS*3FOEFS4UBUF ਌͔Β౉͞Εͨঢ়ଶΛࢀর͢ΔͨΊ ਌΁࡟আΛґཔ (defn- todo-item [todo owner]

    (reify om/IRenderState (render-state [_ state] (let [class (if (:completed todo) "completed" "")] (dom/li nil (dom/input #js {:type "checkbox" :className "toggle" :checked (and (:completed todo) "checked") :onChange (fn [_] (om/transact! todo :completed #(not %)))}) (dom/span #js {:className class} (:title todo)) (dom/span #js {:className "delete" :onClick #(put! (:ch state) todo)} "[x]"))))))

  71. ׬੒ʂ w 50%0Λදࣔ͢Δ͜ͱ͕Ͱ͖Δ w 50%0Λ௥Ճ͢Δ͜ͱ͕Ͱ͖Δ w 50%0Λ׬ྃऔফ͢͠Δ͜ͱ͕Ͱ͖Δ w 50%0Λ࡟আ͢Δ͜ͱ͕Ͱ͖Δ

  72. ׬੒ʂ w 50%0Λදࣔ͢Δ͜ͱ͕Ͱ͖Δ w 50%0Λ௥Ճ͢Δ͜ͱ͕Ͱ͖Δ w 50%0Λ׬ྃऔফ͢͠Δ͜ͱ͕Ͱ͖Δ w 50%0Λ࡟আ͢Δ͜ͱ͕Ͱ͖Δ

  73. ·ͱΊ

  74. ·ͱΊ w $PNQPOFOU୯ҐͰ։ൃΛߦ͏ ‎ -JGF$ZDMF1SPUPDPMͷ࣮૷Λهड़ w $PNQPOFOUʹ͸਌ࢠؔ܎͕͋Δ ‎ ਌͔Βࢠ΁ͷσʔλ౉͠ CVJME࣌ʹ౉͢

    ‎ ࢠ͔Β਌΁ͷσʔλ౉͠ DPSFBTZODΛར༻ w ΞϓϦέʔγϣϯঢ়ଶΛมߋ͠ɺඳը %0. Λߋ৽ͤ͞Δ ‎ σʔλϑϩʔ͸Ұํ޲

  75. ೋา໨Λ౿Έग़͢ w #BTJD5VUPSJBM ‎ ຊՈνϡʔτϦΞϧɻΘ͔Γ΍͍͢ɻ w 0Nɾ5PEP.7$ ‎ ΋͏গ͠ຊ֨తͳ50%0Ϧετͷ࡞੒Λֶ΂Δɻ࡞੒͍ͯ͠Δͷ͸0Nͷ࡞ऀɻ w

    PNFYBNQMFT ‎ ຊՈͷαϯϓϧɻݸผͷػೳຖͷαϯϓϧ͕๛෋ɻ w PNDPPLCPPL ‎ 0NͰͷϧʔςΟϯά΍όϦσʔγϣϯͳͲɺ࣮ફతͳϨγϐू w %PDVNFOUBUJPO ‎ ຊՈͷυΩϡϝϯτɻ"1*ͷ࢖͍ํΛ֬ೝɻ