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
EMになってからチームの成果を最大化するために取り組んだこと/ Maximize team performance as EM
nashiusagi
0
100
Laravel や Symfony で手っ取り早く
OpenAPI のドキュメントを作成する
azuki
2
120
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
Ethereum_.pdf
nekomatu
0
470
Jakarta EE meets AI
ivargrimstad
0
220
Quine, Polyglot, 良いコード
qnighy
4
650
CSC509 Lecture 09
javiergs
PRO
0
140
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
110
CSC509 Lecture 11
javiergs
PRO
0
180
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
Jakarta EE meets AI
ivargrimstad
0
600
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
970

Featured

See All Featured
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Building Adaptive Systems
keathley
38
2.3k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
655
59k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Faster Mobile Websites
deanohume
305
30k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
How STYLIGHT went responsive
nonsquared
95
5.2k
Writing Fast Ruby
sferik
627
61k

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