0N
͸͡ΊͷҰา ʙ50%0
ϦετΛ࡞ֶͬͯͿʙ

$MPKVSF4DSJQU
ษڧձ
!TOVGLPO 

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

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

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

ࠓ೔ͷ໨ඪ 

0N
ͷงғؾΛ͔ͭΉ 

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

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

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"))}) 

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 

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
$ZDMF
1SPUPDPM 

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
$ZDMF
1SPUPDPM ׳ΕΔ·ͰಡΈͮΒ͍͔΋ɻTBCMPOP
PNUPPMT
ͳͲͷϥ ΠϒϥϦΛར༻͢Δ͜ͱͰΑΓ؆ܿʹهड़Ͱ͖Δɻ ࠓ೔͸આ໌͠·ͤΜɹ 

50%0
ϦετΛ࡞Δ 

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

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

Ͱ͖Δ΋ͷ 

Ͱ͖Δ΋ͷ 

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

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




ᵋᴷᴷ
UPEPMJTU








ᵋᴷᴷ
DPSFDMKT

EJSFDUPSJFT

pMFT 
MFJO
OFX
NJFTPN
UPEPMJTU

DE
UPEPMJTU

MFJO
DMKTCVJME
PODF

PQFO
JOEFYIUNM UFSNJOBM PN

ͷ࡞ऀʹΑΔ࠷খߏ੒ͷςϯϓϨʔτ 

(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"))}) ੜ੒͞Εͨίʔυ JOEFYIUNM DPSFDMKT 

(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"))}) ੜ੒͞Εͨίʔυ JOEFYIUNM DPSFDMKT ΞϓϦέʔγϣϯͱඳըͷؔ܎Λఆٛ 

(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"))}) ੜ੒͞Εͨίʔυ JOEFYIUNM DPSFDMKT τοϓϨϕϧͷ$PNQPOFOU 

(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"))}) ੜ੒͞Εͨίʔυ JOEFYIUNM DPSFDMKT ΞϓϦέʔγϣϯͷঢ়ଶΛ؅ཧ ରԠ෇͚ 

(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"))}) ੜ੒͞Εͨίʔυ JOEFYIUNM DPSFDMKT දࣔྖҬͷରԠ෇͚ 

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

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

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

(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
ϦετΛදࣔ 

(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
ϦετΛදࣔ ΞϓϦέʔγϣϯঢ়ଶΛઃఆ 

(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
Λ࡞੒ 

(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
ϦετΛදࣔ 

(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
ϦετΛදࣔ 

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

(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
ೖྗΛ௥Ճ 

(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
ೖྗΛ௥Ճ ೖྗϘοΫεΛ௥Ճ 

(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
ೖྗΛ௥Ճ 

(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
Λऔಘ͢Δ 

(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
ೖྗΛ௥Ճ PXOFS
3FBDU
ͷίϯϙʔωϯτʹΞΫηε͢ΔͨΊʹར༻ 

(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
ೖྗΛ௥Ճ ΞϓϦέʔγϣϯঢ়ଶมߋ 

(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
͕௥Ճ͞ΕΔ 

(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
͕௥Ճ͞ΕΔ 

(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
͕௥Ճ͞ΕΔ 

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

(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
ͷ׬ྃऔফΛ௥Ճ 

(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
ͷ׬ྃऔফΛ௥Ճ νΣοΫঢ়ଶΛ؅ཧ 

(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 

(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
Λར༻͢Δ 

(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
ͷ׬ྃऔফΛ௥Ճ ΞϓϦέʔγϣϯঢ়ଶΛมߋ 

(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
ʹมߋ 

(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
͕࣮ߦ͞ΕΔ 

(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 

(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
͕࣮ߦ͞ΕΔ 

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

(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 ࡟আϘλϯ 

(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 ࡟আϘλϯ 

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

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

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

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

(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 (

(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 (

(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 (

(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 (

(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 (

(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 ਌ͷઃఆ 

(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
ʹมߋ 

(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
ʹมߋ ࢠͷॳظঢ়ଶΛઃఆ 

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]")))))) 

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]")))))) 

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]")))))) 

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

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

·ͱΊ 

·ͱΊ w $PNQPOFOU
୯ҐͰ։ൃΛߦ͏
‎ -JGF
$ZDMF
1SPUPDPM
ͷ࣮૷Λهड़
w $PNQPOFOU
ʹ͸਌ࢠؔ܎͕͋Δ
‎ ਌͔Βࢠ΁ͷσʔλ౉͠
CVJME
࣌ʹ౉͢
‎ ࢠ͔Β਌΁ͷσʔλ౉͠
DPSFBTZOD
Λར༻
w ΞϓϦέʔγϣϯঢ়ଶΛมߋ͠ɺඳը %0. Λߋ৽ͤ͞Δ
‎ σʔλϑϩʔ͸Ұํ޲ 

ೋา໨Λ౿Έग़͢ w #BTJD
5VUPSJBM
‎ ຊՈνϡʔτϦΞϧɻΘ͔Γ΍͍͢ɻ
w 0Nɾ5PEP.7$
‎ ΋͏গ͠ຊ֨తͳ50%0Ϧετͷ࡞੒Λֶ΂Δɻ࡞੒͍ͯ͠Δͷ͸0N
ͷ࡞ऀɻ
w PNFYBNQMFT
‎ ຊՈͷαϯϓϧɻݸผͷػೳຖͷαϯϓϧ͕๛෋ɻ
w PNDPPLCPPL
‎ 0N
ͰͷϧʔςΟϯά΍όϦσʔγϣϯͳͲɺ࣮ફతͳϨγϐू
w %PDVNFOUBUJPO
‎ ຊՈͷυΩϡϝϯτɻ"1*ͷ࢖͍ํΛ֬ೝɻ