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

Om はじめの一歩

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
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
Avatar for RIZAPテクノロジーズ rizap_tech
0
6.7k
AI駆動で0→1をやって見えた光と伸びしろ
Avatar for passion😎 passion0102
1
800
Developer Joy - The New Paradigm
Avatar for Holly Cummins hollycummins
1
350
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
Avatar for Samuel Williams ioquatix
4
2.5k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
7
580
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
430
CSC305 Lecture 09
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
310
Go言語はstack overflowの夢を見るか？
Avatar for Takuto Nagami logica0419
0
520
AI Agent 時代的開發者生存指南
Avatar for 高見龍 eddie
4
2.1k
スマホから Youtube Shortsを見られないようにする
Avatar for lemolatoon lemolatoon
27
33k
Cursorハンズオン実践！
Avatar for Ikko Eltociear Ashimine eltociear
2
1.2k
Vueのバリデーション、結局どれを選べばいい？ ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
Avatar for ねぎなす neginasu
2
840

Featured

See All Featured
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.2k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.6k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
7.9k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
27
2.1k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.6k

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