Introducing React.js and Redux

イドバタ会議第一回（2016年6月29日 @ 塩尻インキュベーションプラザ）でのプレゼンテーション

Transcript

1. INTRODUCING React.js + REDUX 29TH JUNE 2016
2. ࣗݾ঺հ SELF INTRODUCTION ޙ౻ ྑีʢ͝ͱ͏ Γΐ͏͚͢ʣ 1975೥ ௗऔݝถࢠࢢੜ·Εɺ෱ౡݝ෱ౡࢢҭͪ
 
 5೥લʹ౦ژ͔Βদຊ΁ɺݱࡏদຊࢢԬాԼԬాࡏॅ
 7ࡀͷࢠڙʢখֶ2೥ੜͷஉͷࢠʣ͕͍·͢
 σΟϨΫγΦגࣜձࣾ ʢ҆ಶ໺ࢢ๛ՊʣͷΤϯδχΞ
 
 ϑϩϯτΤϯυ͸React.js
 REST APIͳͲͷόοΫΤϯυ͸PythonͰॻ͍ͯ·͢
3. 20 YEARS AGO 1996೥ࠒͷϠϑʔ
4. 10 YEARS AGO 2006೥͝ΖͷGMAIL (AJAX͕৽͔ͬͨ͠ࠒ)
5. AND NOW ݱ୅ͷWEB APP - TRELLOͱ͔
6. THEN LET’S BUILD IT… ͡Όɺͭ͘Γ·͢Αʔ photo by flickr.com/vgb-studios/
7. photo by flickr.com/mystical-mii ͑ʁϚδͰʁ
8. UI/UXͷཁٻਫ४ͷߴ·Γ → ϑϩϯτΤϯυͷෳࡶԽ
9. As developers, we are expected to handle optimistic updates, server-side rendering, fetching data before performing route transitions, and so on. We find ourselves trying to manage a complexity that we have never had to deal with before,
 ʮ։ൃऀͰ͋Ε͹ɺଈ࣌ߋ৽ɺαʔόʔαΠυϨϯμϦϯάɺը໘ભ Ҡલͷσʔλಉظͱ͔ɺ৭ʑͳ͜ͱΛظ଴͞ΕΔΑͶɻ͜Ε·Ͱʹ ͳ͔ͬͨΑ͏ͳෳࡶ͞ΛɺͲ͏ʹ͔͠ͳ͖Ό͖Ό͍͚ͳ͍Α͏ʹͳͬ ͯΔɻʯʢfrom redux.js.org )
10. ͱʹ͔͘ϑϩϯτΤϯυΛͭ͘Δͷ͸େมʂ
11. ͦΕɺReact.js + REDUXͰ ͳΜͱ͔ͳΔ͔΋Αʂ
 (By California͋ͨΓͷ୭͔)
12. React.js → Ծ૝DOMΛ࣮૷ͨ͠JSϑϨʔϜϫʔΫ REDUX → JS ApplicationͷͨΊͷઃܭ
13. React.js
14. 1996೥ͷ͋Δ೔…
 
 ը໘্ͰԿ͔มߋ͕ඞཁʁͦΕʮ࠶ಡΈࠐΈʯͩͶ
 ↓
 CTRL + R (⌘ + R) తͳԿ͔…
 ͱʹ͔͘ϖʔδશମΛ΋͏Ұճϩʔυ
15. body div div div h1 ul li li a มߋ Ajax Ҏલ
16. body div div div h1 ul li li a શ෦Ϧϩʔυʂ
17. ͦͯ͠·ͨ Ϧϩʔυ͢ΔΜͩͥʔʂ
18. 2006೥ͷ͋Δ೔…
 
 ͳʹ͔ى͖ΔͨͼʹWebΞϓϦͷViewશମΛ࠶ඳը͢Δͷ͸
 ύϑΥʔϚϯεʹͱͬͯக໋తͬͯؾ͍ͮͨ
 ˣ
 ඞཁͳͱ͚ͩ͜AjaxΛ࢖ͬͯ࠶ඳը͢ΔϩδοΫΛॻ͜͏
 ૉఢͳDOMૢ࡞ͱͱ΋ʹ…
19. body div div div h1 ul li li a ߋ৽ʂ ͑ʔͬͱɺulͷதͷ2൪ΊͷliΛ
 ߋ৽ͯ͠ɺͬͱɻ
20. body div div div h1 ul li li a ͑ʁҧͬͨ!? 
 ΋͏৽͍͠σʔλདྷͨʁ
 ΍ͬͺ3൪Ίͷliʁ li $.ajax()
22. React.js
 
 Virtual DOMͷ͓͔͛Ͱࡉ͔͍࠶ඳըϩδοΫ͕ෆཁ
 ίϯϙʔωϯτʹʮߋ৽ʯ͕఻ΘΔͱඞཁͳͱ͚ͩ͜࠶ඳը
 ˣ
 ͔͠΋ಈ࡞͕ߴ଎
23. body div div div h1 ul li li a component 1. ͳΜͱͳ͘ ߋ৽ ίϯϙʔωϯτͬͯ΍ͭʹ
 ʮߋ৽͍ͨ͠ʯͬͯ఻͑Δͱ͍͍Α
24. body div div div h1 ul li li a component 1. ͳΜͱͳ͘ ߋ৽ 2. ࣗಈͰ ॻ͖׵͑ ίϯϙʔωϯτͬͯ΍ͭʹ
 ʮߋ৽͍ͨ͠ʯͬͯ఻͑Δͱ͍͍Α
25. Α͏΍͘৸ΕΔ
26. ίϯϙʔωϯτࢦ޲
 ਌ࢠؔ܎Λ࣋ͬͨ෦඼Λ૊Έ߹Θͤͯͭ͘Δ
 ˠ อकੑɾՄಡੑ͕ߴ͍
 
 <ProjectList>
 <Project item={this.props.active_project} />
 </ProjectList>
27. REDUX
28. REDUX
 
 JSͷσόοά͕΍Γ΍͘͢ͳΔʢඇಉظͰ͋ͬͯ΋ʣ
 ΞϓϦέʔγϣϯશମͷঢ়ଶΛ೺Ѳɾ؅ཧ͠΍͘͢ͳΔ
 ˣ
 ΑΓޮ཰తʹϑϩϯτΤϯυΛ࡞ΕΔ
29. REDUX
 
 3ݪଇ͔ΒͳΔJSΞϓϦέʔγϣϯͷઃܭࢥ૝
 ରԠͨ͠JSΛॻͨ͘Ίͷ”redux”ͱ͍͏ϥΠϒϥϦ͸
 ଘࡏ͠·͕͢ɺ͍ΘΏΔϑϨʔϜϫʔΫͰ͸ͳ͍Ͱ͢
30. ͰɺͲΜͳઃܭʁ
31. 1. ιʔε͸Ұ͚ͭͩ (Single source of truth) ΞϓϦέʔγϣϯશମͷঢ়ଶʢstateʣ͸୯ҰͷʮετΞʯʹπϦʔ্ͷ
 ΦϒδΣΫτͱͯ͠อଘ
 ˞ stateͷอଘઌ͕Ұ͔ͭͩΒɺσόοά΋࣮૷΋΍Γ΍͍͢
32. 2. ΞϓϦέʔγϣϯͷঢ়ଶ͸ಡΈऔΓઐ༻ ʢState is read-onlyʣ • Ϗϡʔ΍ίʔϧόοΫ͕ঢ়ଶΛ௚઀มߋͤ͞Δ͜ͱ͸Ͱ͖ͳ͍ • มߋ͸Ұͭͣͭॱ൪ʹߦͳΘΕΔ • action͸ΦϒδΣΫτͳͷͰɺอଘՄೳͰ͋Γɺςετ͠΍͍͢
33. 3. શͯpureؔ਺ʹΑͬͯมߋ ʢChanges are made with pure functions) ͲͷΑ͏ʹΞϓϦέʔγϣϯͷঢ়ଶʢstate treeʣ͕ʮΞΫγϣϯʯͰมΘͬͯ ͍͔͘Λɺ७ਮؔ਺Ͱهड़ɹˠ ͦΕΒ͸ʮreducerʯͱݺ͹ΕΔ • ʮreducerʯ͸ঢ়ଶͱΞΫγϣϯΛड͚ͯɺ৽͍͠ঢ়ଶΛฦؔ͢਺ɻ • ݱࡏͷstateΦϒδΣΫτΛมߋͤͣʹɺ৽͍͠stateΦϒδΣΫτΛ࡞Δɻ • ίʔυͷن໛ʹԠͯ͡ɺػೳ͝ͱʹreducerΛෳ਺࡞͍ͬͯ͘
34. ͪͳΈʹ७ਮؔ਺ͱ͸ʁ Ҿ਺ͱͯ͠ड͚औΔม਺ɺ഑ྻɺΦϒδΣΫτͳͲͷݩͷ஋Λॻ͖׵͑ͣɺ ݁ՌΛฦؔ͢਺ͷ͜ͱɻ ↓ ഑ྻͷ֤ཁૉΛ2ഒʹ͢Δؔ਺
35. ৽͍͠εςʔτ͕७ਮؔ਺Ͱ࡞ΒΕͯ Δͬͯ͜ͱ͸ɺ֤εςʔτ͕ಠཱͯ͠ ଘࡏͯ͠Δͬͯ͜ͱͳΜͰ͢ʂ
 JSΞϓϦͷ࣍ͷঢ়ଶ͕༧ଌ͠΍͍͢ʂ
36. UI STATE REDUCER dispatch update! user interaction ACTION STORE STATE JS App NEXT STATE apply
37. ʮΞϓϦέʔγϣϯ͕ࠓͲΜͳঢ়ଶ͔ʁʯ
 ΛҰՕॴʢStoreʣͰूத؅ཧɻ
 εςοϓ͝ͱʹ໰୊Λ௥੻Ͱ͖·͢ɻ
 ɹ
 console.log(store.getStore())
38. Who uses React.js?
39. Instagram͕࢖ͬͯ·͢ɻ
41. Who uses REDUX?
42. Uber͕࢖ͬͯ·͢ɻ
44. ίϛϡχςΟ͸ʁ
47. RECAP ( ·ͱΊ )
48. React.js →
 
 Virutal DOMͰ࣮ߦ͕ߴ଎ʹ
 ίϯϙʔωϯτࢦ޲Ͱ։ൃ͕༰қʹ
 Ecosystem΋݁ߏॆ࣮
49. REDUX →
 
 JSΞϓϦέʔγϣϯͷঢ়ଶભҠΛָʹ೺Ѳɾ؅ཧ͢Δํ๏
 SIDE EFFECTSʢ෭࡞༻ɿࢥΘ͵Τϥʔʣͷগͳ͍
 ϓϩάϥϛϯάख๏ͰJSΛίϯτϩʔϧԼʹ
50. React.js + REDUX → ݱ୅తͳϑϩϯτΤϯυ΁ͷҰͭͷղ
51. 3೥ޙ͸࢖ͬͯͳ͍͔΋͠Εͳ͍͚Ͳ…
 དྷिʢདྷ݄ʣ͸ؒҧ͍ͳ͘࢖ͬͯ·͢ɺReact.js + REDUX
52. flickr.com/Mike's Birds/Sea otter ૣ͘࢓ࣄΛ ऴΘΒͤͯؼΖ͏…
53. THANK YOU! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
54. Any Question? React.js
 https://facebook.github.io/react/ REDUX
 http://redux.js.org/index.html ryosuke@direcsio.jp twitter: @direcsio