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
NestJSのコードからOpenAPIを自動生成する際の最適解を探す
astatsuya
0
190
WordPress Playground for Developers
iambherulal
0
120
Go1.24で testing.B.Loopが爆誕
kuro_kurorrr
0
170
DomainException と Result 型で作る型安全なエラーハンドリング
karszawa
0
500
AIエージェントを活用したアプリ開発手法の模索
kumamotone
1
750
SideKiqでジョブが二重起動した事象を深堀りしました
t_hatachi
0
240
体得しよう!RSA暗号の原理と解読
laysakura
3
540
보일러플레이트 코드가 진짜 나쁜 건가요?
gaeun5744
0
370
リアクティブシステムの変遷から理解するalien-signals / Learning alien-signals from the evolution of reactive systems
yamanoku
2
1.1k
DataStoreをテストする
mkeeda
0
110
PHPによる"非"構造化プログラミング入門 -本当に熱いスパゲティコードを求めて- #phperkaigi
o0h
PRO
0
1.1k
Develop Faster With FrankenPHP
dunglas
2
2.7k
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
Making Projects Easy
brettharned
116
6.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Building an army of robots
kneath
304
45k
4 Signs Your Business is Dying
shpigford
183
22k
Writing Fast Ruby
sferik
628
61k
Agile that works and the tools we love
rasmusluckow
328
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Git: the NoSQL Database
bkeepers
PRO
429
65k
Become a Pro
speakerdeck
PRO
27
5.2k
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*ͷ͍ํΛ֬ೝɻ