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

Om はじめの一歩

Satoshi Kondo
May 23, 2015
Programming
1
260

Om はじめの一歩

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

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

Satoshi Kondo

May 23, 2015
Tweet

Other Decks in Programming

See All in Programming
Semantic search with Django and pgvector
pauloxnet
0
220
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
240
プールにゆこう
irof
2
120
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
受託開発でGitLab CI を活用していく
xiombatsg
1
260
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
130
puregoの活用例
aethiopicuschan
0
220
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
310
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
170
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
24
7.6k
Elm Form Validation
bkuhlmann
0
500
元気予報
suu_mire0726
0
850

Featured

See All Featured
A designer walks into a library…
pauljervisheath
199
23k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
12
1.5k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
Navigating Team Friction
lara
177
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
29
6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
12k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k

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*ͷ࢖͍ํΛ֬ೝɻ