• ϑϩϯτΤϯυ༻७ਮؔܕݴޠ
• JSʹίϯύΠϧ͢Δ
• ܕ҆શɺNon-nullable
• ReactͷΑ͏ʹએݴతʹUIΛߏங͢Δ
• Reduxಉ༷Single source of truth
Slide 5
Slide 5 text
C o u n t e r A p p
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
( . . ) શ ෦ e x p o r t ͢ Δ ͱ ͍ ͏ ҙ ຯ
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
m o d e l Λ Ҿ ʹ औ Δ ؔ
Slide 14
Slide 14 text
m s g ͱ m o d e l Λ Ҿ ʹ औ Δ
Χ Ϧ ʔ Խ ͞ Ε ͨ ؔ
Slide 15
Slide 15 text
Ұ ݟ ఆ ͩ ͕ Ҿ ͷ ແ ͍ ؔ
Slide 16
Slide 16 text
E l m ʹ ม ɺ ఆ ɺ Ϋ ϥε ͕ ͳ ͍ ͷ ͱ ɺ
શ ͯ ͕ ࣜ ͳ ͷ Ͱɺ
v a r, l e t , c o n s t , f u n c t i o n , re t u r n ͱ ͍ ͬ
ͨ ༧ ޠ ͕ ແ ͍
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
“ V i e w ” ؔ
• એݴతʹఆٛ͞ΕͨHTMLߏΛฦ͢
Slide 19
Slide 19 text
E l m ͷ ؔ ద ༻ ׅ ހ ͷ ͔ Θ Γ ʹ ۭ ന Λ ͏
શ ͯͷ ؔ ͷ Ҿ ͕ 1 ͭ ͱ ܾ · ͬͯ ͍ Δ ͷ Ͱ ղ ऍ Ͱ ͖ Δ
“ V i e w ” ؔ
Slide 20
Slide 20 text
J S Ͱ Χ Ϧ ʔ Խ ͢ Δ ͱ ಡ Έ ʹ͘ ͍
“ V i e w ” ؔ
Slide 21
Slide 21 text
J S X ͷ ํ ͕ ݟ ͢ ͍
“ V i e w ” ؔ
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
• Messagesൃੜͨ͠ࣄ (ReduxͰ͍͏Action)
• UpdateؔMessageड৴࣌ʹݺΕɺߋ৽͞ΕͨΞ
ϓϦέʔγϣϯͷঢ়ଶΛฦ͢ (ReduxͰ͍͏Reducer)
“ M e s s a g e s ” ͱ “ U p d a t e ” ؔ
Slide 24
Slide 24 text
“ M e s s a g e s ” ͱ “ U p d a t e ” ؔ
Slide 25
Slide 25 text
“ M e s s a g e s ” ͱ “ U p d a t e ” ؔ
U n i o n ܕ
C a s e ࣜ
Slide 26
Slide 26 text
“ M e s s a g e s ” ͱ “ U p d a t e ” ؔ
σ ʔ λ ί ϯε τ ϥ Ϋ λ
C a s e ࣜ
U n i o n ܕ
Slide 27
Slide 27 text
“ M e s s a g e s ” ͱ “ U p d a t e ” ؔ
σ ʔ λ ί ϯε τ ϥ Ϋ λ ϑ Ν ʔε
τ Ϋ ϥε ͷ ͱ ͯ͠ ༻ Ͱ ͖ Δ
U n i o n ܕ ͱ C a s e ࣜ Λ ͏ ͜ ͱ ʹ
Αͬͯɺ ύ λ ʔϯ Λ ཏ ͠ ͳ ͚ Ε
ί ϯύ Πϧ Τ ϥ ʔ ʹ ͳ Δ
C a s e ࣜ
U n i o n ܕ
σ ʔ λ ί ϯε τ ϥ Ϋ λ
Slide 28
Slide 28 text
“ M e s s a g e s ” ͱ “ U p d a t e ” ؔ
ಉ ༷ ͷ ݴ ޠ α ϙ ʔ τ ͕ ͳ ͍ ͷ Ͱ
J S Ͱ ද ݱ Ͱ ͖ ͳ ͍
Ty p e S c r i p t F l o w ͷ U n i o n ܕ ଞ ͷ ܕ ͷ η ο τ Ͱɺ ϑ Ν ʔε τ
Ϋ ϥε Ͱ ͳ ͘ ɺ ύ λ ʔϯ Ϛ ο νϯ ά ͢ Δ ػ ೳ ͳ ͍
Slide 29
Slide 29 text
F o r m A p p
Slide 30
Slide 30 text
“ M e s s a g e s ” ͱ “ U p d a t e ” ؔ
Ҿ Λ औ Δ ͱ ه ड़ ྔ ͕
૿ ͑ͯ ͠ · ͏
૿ ͑Δ ω ε τ ͯ͠ ͠ · ͏
Slide 31
Slide 31 text
“ M e s s a g e s ” ͱ “ U p d a t e ” ؔ
R e d u x ͷ Γ ํ