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
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
220
アセットのコンパイルについて
ojun9
0
110
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
1
500
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
270
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
340
速いWebフレームワークを作る
yusukebe
5
1.7k
TanStack DB ~状態管理の新しい考え方~
bmthd
2
480
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
160
🔨 小さなビルドシステムを作る
momeemt
3
660
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
1k
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
430
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
340
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
How GitHub (no longer) Works
holman
315
140k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Bash Introduction
62gerente
615
210k
Designing for Performance
lara
610
69k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
How to Ace a Technical Interview
jacobian
279
23k
Scaling GitHub
holman
463
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
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*ͷ͍ํΛ֬ೝɻ