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
270
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
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
420
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
Cache Me If You Can
ryunen344
2
4k
私の後悔をAWS DMSで解決した話
hiramax
4
210
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
300
個人軟體時代
ethanhuang13
0
330
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
320
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
3.4k
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
11
4.4k
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
GitHub's CSS Performance
jonrohan
1032
460k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Documentation Writing (for coders)
carmenintech
74
5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
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*ͷ͍ํΛ֬ೝɻ