React/Reduxで半年くらい真面目にSPAするとわかること

frontend meetup vol.1 in finc での登壇資料です。

Transcript

1. 'SPOUFOE
   NFFUVQ
   WPM !UBLBZVLJTIN[ React/Reduxで半年くらい 真面目にSPAするとわかること 'J/$
   *OD
2. ~table of contents~ ࣗݾ঺հ 8IZ
   41"
   8IZ
   3FBDU3FEVY ࣮ફ͔ͯ͠Βؾ͍ͮͨ͜ͱ $PODMVTJPO
3. 自己紹介 ⦁ਗ਼ਫོ೭ ⦁Web Application Development manager ( ௕͍ ) ⦁github @takayukishmz ⦁DeNA -> Grood -> FiNC ⦁Native->Server-> WebClient
4. What is FiNC w σʔλऩूˠ෼ੳˠιϦϡʔγϣϯˠ&$ w ߦಈม༰ͱܧଓͷͨΊͷ΢ΣϧωεόϦϡʔνΣʔϯ ウェルネス サーベイ 遺伝子･ 血液検査 食事指導 サーベイ＋ 各種検査 分析結果 レポート パーソナライズ ソリューション&コンテンツ 専門家の アドバイス SNS ヘルスケア の知識・智恵 レシピ 豆知識 理想の食事 腕を大きくふって歩く 背伸びを3回する 肩甲骨を3回す 野菜を毎食食べる 1日1ℓ以上水を飲む 朝ヨーグルトを食べる • 総合結果 • 心身の状態 • 解決すべき行動 • 生活習慣病リスク • お勧めプラン etc. フィットネスタスク FiNC STORE ポイント 獲得 • オーダメイド･ パ ーソナル･ サプ リメント • 酵素ドリンク • スムージー etc. タスク実行や 食事投稿で 貯まるポイント ポイント適用可 サーベイ結果 ヘルスケア ツーリズム 健康食 コンテンツ etc. 食事タスク スクワットを10回ｘ3 継続して10分歩く ライスを半分に控える 毎食野菜から食べる
5. Media *51SP͞ΜͰ3FBDU3FEVYͷهࣄΛॻ͖·ͨ͠
6. ~table of contents~ ࣗݾ঺հ 8IZ
   41"
   8IZ
   3FBDU3FEVY ࣮ફ͔ͯ͠Βؾ͍ͮͨ͜ͱ $PODMVTJPO
7. Why SPA? Why React/Redux? 'JOD BQQ
   XFC
8. Why SPA? Why React/Redux? • ΠϯλϥΫγϣϯͷଟ͍/BUJWFΞϓϦͷXFC൛ • طଘ"1*Λ͏·͘׆͔ͯ͠࠷୹ϦϦʔε • ௕ظͷϝϯςφϯεੑ΋ॏཁ ϦονͳUXΛޮ཰Α࣮͘ݱ͠ͳ͕Β΋ɺ ௕ظͰշదʹ։ൃ͠ଓ͚ΒΕΔΞʔΩςΫνϟ͕ඞཁ
9. てことはつまり
10. てことで早速やってみた • υΩϡϝϯτ͕๛෋ • ͤͬͤͱ3FBDUͷαϯϓϧΛͭ͘Γ • 3FBDU3FEVYͷαϯϓϧΛͭ͘Γ ͱ͍͏Α͋͘Δύλʔϯɻ ຬΛ࣋ͯ͠ϓϩδΣΫτελʔτ ೔ຊޠ΋ॆ࣮͖ͯͨ͠ʔ Ծ૝%0.͛͢ʔ 'MVYศརʔ ៉ྷͳઃܭͰ͸͡ΊΔͧʔ
11. 初めて一週間 ͋Ε
12. 初めて一週間 41"ͬͯ޾ͤʹͳΕΔ ͬͯฉ͍ͯͨͷʹ
13. 初めて一週間 ͭΒ͍
14. ~table of contents~ ࣗݾ঺հ 8IZ
    41"
    8IZ
    3FBDU3FEVY ࣮ફ͔ͯ͠Βޙչͨ͜͠ͱؾ͍ͮͨ͜ͱ $PODMVTJPO
15. つらい理由 • ͭΒ͍ίϯϙʔωϯτ • ͭΒ͍܁Γฦ͠ɾςετ • ͭΒ͍σʔλͷѻ͍ ͭΒ͍··41"ͨ͘͠ͳ͍
16. 実践で最初に抑えるべきこと • ਖ਼͍͠ίϯϙʔωϯτࢦ޲ • this.contextͷ׆༻ • ΤϯςΟςΟͱܕ
17. 実践で最初に抑えるべきこと • ਖ਼͍͠ίϯϙʔωϯτࢦ޲ • this.contextͷ׆༻ • ΤϯςΟςΟͱܕ
18. コンポーネント指向？ 6*ύʔπʢίϯϙʔωϯτʣΛ૊Έ߹Θͤ ͯ7JFXΛߏங͢Δߟ͑ํ
19. コンポーネント指向 • ࠶ར༻ੑΛҙࣝ͢Δ • ঢ়ଶͷ༗ແͷׂΓ੾Γ • CSSͱίϯϙʔωϯτ͸ҰରҰ
20. 再利用性とは
21. 再利用性 Smart Component ঢ়ଶΛ΋ͪɺDumpίϯϙʔωϯτͱaction, storeΛͭͳ͙ɻ MVCͷCʹ͍ۙɻ Dumb Component ঢ়ଶΛ΋ͨͣɺࢀরಁաతʹड͚औͬͨ΋ͷʹ஧࣮ʹಈ͖ɺ DomΛͭ͘Δ
22. 状態の有無の割り切り ͜ͷঢ়ଶɺͲ͏ѻ͍·͢ʁ
23. 状態の有無の割り切り ͜ͷঢ়ଶɺͲ͏ѻ͍·͢ʁ • Statelessͳίϯϙʔωϯτ͕ݪଇ • Ͱ΋ࢠίϯϙʔωϯτʹ·͔ͤͯ͠·ͬͨ΄ ͏͕͍͍state΋͋Δ ॊೈʹྫ֎ͰָΛ͢Δ
24. コンポーネント指向 • ࠶ར༻ੑΛҙࣝ͢Δ • ঢ়ଶͷ༗ແͷׂΓ੾Γ • CSSͱίϯϙʔωϯτ͸ҰରҰ
25. 実践で最初に抑えるべきこと • ਖ਼͍͠ίϯϙʔωϯτࢦ޲ • this.contextͷ׆༻ • ΤϯςΟςΟͱܕ
26. What is Contents ? ͜͜ಡΜͩ͜ͱ͋Γ·͔͢ʁ
27. What is Contents ? 0DDBTJPOBMMZ
    ZPV
    XBOU
    UP
    QBTT
    EBUB
    UISPVHI
    UIF
    DPNQPOFOU
    USFF
    XJUIPVU
    IBWJOH
    UP
    QBTT
    UIF
    QSPQT
    EPXO
    NBOVBMMZ
    BU
    FWFSZ
    MFWFM
    3FBDUT DPOUFYU
    GFBUVSF
    MFUT
    ZPV
    EP
    UIJT IUUQTGBDFCPPLHJUIVCJPSFBDUEPDTDPOUFYUIUNM
28. React Context ͜͏ఆٛͯ͠
29. React Context ͜͏࢖͏
30. What is Contents ? ༻๏༻ྔΛकͬͯਖ਼͓͔͍͍ͭͩ͘͘͠͞ IUUQTGBDFCPPLHJUIVCJPSFBDUEPDTDPOUFYUIUNM
31. React Context ஫ҙ͕ඞཁ͕ͩɺे෼ศརͰ࣮༻త ༻్ • "1*૚ • ଟݴޠԽ • ෼ੳ (PPHMF
    "OBMZUJDT FUD %*ʹΑΔςετͷ͠΍͢͞΋ັྗ
32. サンプルでよくあつこれはNG
33. API層をcontextに渡しContaierで呼ぶ
34. 実践で最初に抑えるべきこと • ਖ਼͍͠ίϯϙʔωϯτࢦ޲ • this.contextͷ׆༻ • ΤϯςΟςΟͱܕ
35. エンティティと型 • "1*͔Βऔ͖ͬͯͨ஋ͷ৴པ͢Δ͔ • ΤϯςΟςΟͷఆ͕ٛ41"ͷ؊ • Մಡੑɾอकੑͷ୲อ
36. APIから取ってきた値の信頼するか • ૝ఆ֎͸ɺ&OUJUZͰ͔ͬ͠Γམͱ͢ • &OUJUZ3FEVDFS
    DPNQPOFOUʹ͸༨ܭͳ͜ ͱΛߟ͑ͤ͞ͳ͍
37. エンティティの定義がSPAの肝? • 6*ʹ͋ΘͤͨFOUJUZΛͭͬͯ͘͸͍͚ͳ͍ • ͋͘·Ͱ֓೦ͱͯ͠ਖ਼͍͠࠷খ୯Ґ • 4UPSFͷઃܭ΋ࣗͣͱܾ·Δ
38. 可読性・保守性の担保 • 3FBDUશൠͦ͏͕ͩɺͱͯ΋'MVY͸هड़ྔ͕ͱͯ΋ ଟ͍ • ࡾਓYҰϲ݄Ͱ΋ɺ΋͏ʮ͜͜Ͳ͏͍͏͜ͱʁʯʹ ͳΔ • 41"ͱ͍͏ΑΓɺΫϥΠΞϯτΞϓϦέʔγϣϯશ ൠͰେࣄͳ͜ͱ
39. Conclusion ਖ਼͍͠ίϯϙʔωϯτࢦ޲ • ਖ਼͍͠ίϯϙʔωϯτΛੵΈ্͛Ͷ͹ɺ޾ͤ͸΍ͬͯ͜ͳ͍ this.contextͷ׆༻ • DRYͱDI ΤϯςΟςΟͱܕ • ਖ਼֓͘͠೦Λ੔ཧΛ͠ɺݟ௨͠ΛΑ͘͢Δ
40. Enjoy SPA! Enjoy React/Redux! We are always hiring! 'J/$
    *OD