Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Om はじめの一歩
Search
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
Share
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
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$ZDMF1SPUPDPM
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ͳͲͷϥ ΠϒϥϦΛར༻͢Δ͜ͱͰΑΓ؆ܿʹهड़Ͱ͖Δɻ ࠓઆ໌͠·ͤΜɹ
50%0ϦετΛ࡞Δ
ҙࣄ߲ w ίʔυͷৄࡉઆ໌͠ͳ͍ w શମͱͯ͠ͲΜͳྲྀΕ͔Λҙࣝͯ͠΄͍͠
༷ w 50%0Λදࣔ͢Δ͜ͱ͕Ͱ͖Δ w 50%0ΛՃ͢Δ͜ͱ͕Ͱ͖Δ w 50%0Λྃऔফ͢͠Δ͜ͱ͕Ͱ͖Δ w 50%0Λআ͢Δ͜ͱ͕Ͱ͖Δ
Ͱ͖Δͷ
Ͱ͖Δͷ
-FJOJOHFOͰϓϩδΣΫτ Λ࡞͢Δ
ςϯϓϨʔτΛ͏ USFFUPEPMJTU UPEPMJTU ᵓᴷᴷ3&"%.&NE ᵓᴷᴷJOEFYIUNM ᵓᴷᴷQSPKFDUDMK ᵋᴷᴷTSD ᵋᴷᴷUPEPMJTU ᵋᴷᴷDPSFDMKT EJSFDUPSJFT
pMFT MFJOOFXNJFTPNUPEPMJTU DEUPEPMJTU MFJODMKTCVJMEPODF PQFOJOEFYIUNM 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"))}) ੜ͞Εͨίʔυ <html> <body> <div id="app"></div> <script src="out/todolist.js" type="text/javascript"></script> </body> </html> 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"))}) ੜ͞Εͨίʔυ <html> <body> <div id="app"></div> <script src="out/todolist.js" type="text/javascript"></script> </body> </html> 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"))}) ੜ͞Εͨίʔυ <html> <body> <div id="app"></div> <script src="out/todolist.js" type="text/javascript"></script> </body> </html> 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"))}) ੜ͞Εͨίʔυ <html> <body> <div id="app"></div> <script src="out/todolist.js" type="text/javascript"></script> </body> </html> 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"))}) ੜ͞Εͨίʔυ <html> <body> <div id="app"></div> <script src="out/todolist.js" type="text/javascript"></script> </body> </html> 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ೖྗΛՃ PXOFS3FBDUͷίϯϙʔωϯτʹΞΫηε͢ΔͨΊʹར༻
(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 <! 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"]] ඇಉظॲཧΛߦ͏ͨΊͷϥΠϒϥϦ
(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Λड͚औΕΔΑ͏ʹ͢Δ
(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ϩʔΧϧͳঢ়ଶΛॳظԽ
(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͕Ϛϯτ͞ΕΔࡍʹҰճ͚ͩݺΕΔ
(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Λड͚औΔ
(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Λར༻͢Δඞཁ͋Γ
(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$ZDMF1SPUPDPMͷ࣮Λهड़ w $PNQPOFOUʹࢠ͕ؔ͋Δ ͔Βࢠͷσʔλ͠ CVJME࣌ʹ͢
ࢠ͔Βͷσʔλ͠ DPSFBTZODΛར༻ w ΞϓϦέʔγϣϯঢ়ଶΛมߋ͠ɺඳը %0. Λߋ৽ͤ͞Δ σʔλϑϩʔҰํ
ೋาΛ౿Έग़͢ w #BTJD5VUPSJBM ຊՈνϡʔτϦΞϧɻΘ͔Γ͍͢ɻ w 0Nɾ5PEP.7$ ͏গ͠ຊ֨తͳ50%0Ϧετͷ࡞ΛֶΔɻ࡞͍ͯ͠Δͷ0Nͷ࡞ऀɻ w
PNFYBNQMFT ຊՈͷαϯϓϧɻݸผͷػೳຖͷαϯϓϧ͕๛ɻ w PNDPPLCPPL 0NͰͷϧʔςΟϯάόϦσʔγϣϯͳͲɺ࣮ફతͳϨγϐू w %PDVNFOUBUJPO ຊՈͷυΩϡϝϯτɻ"1*ͷ͍ํΛ֬ೝɻ