Tweet
Tweet

Slide 1

Slide 1 text

'SPOUFOENFFUVQWPM !UBLBZVLJTIN[ React/Reduxで半年くらい 真面目にSPAするとわかること 'J/$*OD

Slide 2

Slide 2 text

~table of contents~ ࣗݾ঺հ 8IZ41" 8IZ3FBDU3FEVY ࣮ફ͔ͯ͠Βؾ͍ͮͨ͜ͱ $PODMVTJPO

Slide 3

Slide 3 text

自己紹介 ⦁ਗ਼ਫོ೭ ⦁Web Application Development manager ( ௕͍ ) ⦁github @takayukishmz ⦁DeNA -> Grood -> FiNC ⦁Native->Server-> WebClient

Slide 4

Slide 4 text

What is FiNC w σʔλऩूˠ෼ੳˠιϦϡʔγϣϯˠ&$ w ߦಈม༰ͱܧଓͷͨΊͷ΢ΣϧωεόϦϡʔνΣʔϯ ウェルネス サーベイ 遺伝子･ 血液検査 食事指導 サーベイ＋ 各種検査 分析結果 レポート パーソナライズ ソリューション&コンテンツ 専門家の アドバイス SNS ヘルスケア の知識・智恵 レシピ 豆知識 理想の食事 腕を大きくふって歩く 背伸びを3回する 肩甲骨を3回す 野菜を毎食食べる 1日1ℓ以上水を飲む 朝ヨーグルトを食べる • 総合結果 • 心身の状態 • 解決すべき行動 • 生活習慣病リスク • お勧めプラン etc. フィットネスタスク FiNC STORE ポイント 獲得 • オーダメイド･ パ ーソナル･ サプ リメント • 酵素ドリンク • スムージー etc. タスク実行や 食事投稿で 貯まるポイント ポイント適用可 サーベイ結果 ヘルスケア ツーリズム 健康食 コンテンツ etc. 食事タスク スクワットを10回ｘ3 継続して10分歩く ライスを半分に控える 毎食野菜から食べる

Slide 5

Slide 5 text

Media *51SP͞ΜͰ3FBDU3FEVYͷهࣄΛॻ͖·ͨ͠

Slide 6

Slide 6 text

~table of contents~ ࣗݾ঺հ 8IZ41" 8IZ3FBDU3FEVY ࣮ફ͔ͯ͠Βؾ͍ͮͨ͜ͱ $PODMVTJPO

Slide 7

Slide 7 text

Why SPA? Why React/Redux? 'JOD BQQXFC

Slide 8

Slide 8 text

Why SPA? Why React/Redux? • ΠϯλϥΫγϣϯͷଟ͍/BUJWFΞϓϦͷXFC൛ • طଘ"1*Λ͏·͘׆͔ͯ͠࠷୹ϦϦʔε • ௕ظͷϝϯςφϯεੑ΋ॏཁ ϦονͳUXΛޮ཰Α࣮͘ݱ͠ͳ͕Β΋ɺ ௕ظͰշదʹ։ൃ͠ଓ͚ΒΕΔΞʔΩςΫνϟ͕ඞཁ

Slide 9

Slide 9 text

てことはつまり

Slide 10

Slide 10 text

てことで早速やってみた • υΩϡϝϯτ͕๛෋ • ͤͬͤͱ3FBDUͷαϯϓϧΛͭ͘Γ • 3FBDU3FEVYͷαϯϓϧΛͭ͘Γ ͱ͍͏Α͋͘Δύλʔϯɻ ຬΛ࣋ͯ͠ϓϩδΣΫτελʔτ ೔ຊޠ΋ॆ࣮͖ͯͨ͠ʔ Ծ૝%0.͛͢ʔ 'MVYศརʔ ៉ྷͳઃܭͰ͸͡ΊΔͧʔ

Slide 11

Slide 11 text

初めて一週間 ͋Ε

Slide 12

Slide 12 text

初めて一週間 41"ͬͯ޾ͤʹͳΕΔ ͬͯฉ͍ͯͨͷʹ

Slide 13

Slide 13 text

初めて一週間 ͭΒ͍

Slide 14

Slide 14 text

~table of contents~ ࣗݾ঺հ 8IZ41" 8IZ3FBDU3FEVY ࣮ફ͔ͯ͠Βޙչͨ͜͠ͱؾ͍ͮͨ͜ͱ $PODMVTJPO

Slide 15

Slide 15 text

つらい理由 • ͭΒ͍ίϯϙʔωϯτ • ͭΒ͍܁Γฦ͠ɾςετ • ͭΒ͍σʔλͷѻ͍ ͭΒ͍··41"ͨ͘͠ͳ͍

Slide 16

Slide 16 text

実践で最初に抑えるべきこと • ਖ਼͍͠ίϯϙʔωϯτࢦ޲ • this.contextͷ׆༻ • ΤϯςΟςΟͱܕ

Slide 17

Slide 17 text

実践で最初に抑えるべきこと • ਖ਼͍͠ίϯϙʔωϯτࢦ޲ • this.contextͷ׆༻ • ΤϯςΟςΟͱܕ

Slide 18

Slide 18 text

コンポーネント指向？ 6*ύʔπʢίϯϙʔωϯτʣΛ૊Έ߹Θͤ ͯ7JFXΛߏங͢Δߟ͑ํ

Slide 19

Slide 19 text

コンポーネント指向 • ࠶ར༻ੑΛҙࣝ͢Δ • ঢ়ଶͷ༗ແͷׂΓ੾Γ • CSSͱίϯϙʔωϯτ͸ҰରҰ

Slide 20

Slide 20 text

再利用性とは

Slide 21

Slide 21 text

再利用性 Smart Component ঢ়ଶΛ΋ͪɺDumpίϯϙʔωϯτͱaction, storeΛͭͳ͙ɻ MVCͷCʹ͍ۙɻ Dumb Component ঢ়ଶΛ΋ͨͣɺࢀরಁաతʹड͚औͬͨ΋ͷʹ஧࣮ʹಈ͖ɺ DomΛͭ͘Δ

Slide 22

Slide 22 text

状態の有無の割り切り ͜ͷঢ়ଶɺͲ͏ѻ͍·͢ʁ

Slide 23

Slide 23 text

状態の有無の割り切り ͜ͷঢ়ଶɺͲ͏ѻ͍·͢ʁ • Statelessͳίϯϙʔωϯτ͕ݪଇ • Ͱ΋ࢠίϯϙʔωϯτʹ·͔ͤͯ͠·ͬͨ΄ ͏͕͍͍state΋͋Δ ॊೈʹྫ֎ͰָΛ͢Δ

Slide 24

Slide 24 text

コンポーネント指向 • ࠶ར༻ੑΛҙࣝ͢Δ • ঢ়ଶͷ༗ແͷׂΓ੾Γ • CSSͱίϯϙʔωϯτ͸ҰରҰ

Slide 25

Slide 25 text

実践で最初に抑えるべきこと • ਖ਼͍͠ίϯϙʔωϯτࢦ޲ • this.contextͷ׆༻ • ΤϯςΟςΟͱܕ

Slide 26

Slide 26 text

What is Contents ? ͜͜ಡΜͩ͜ͱ͋Γ·͔͢ʁ

Slide 27

Slide 27 text

What is Contents ? 0DDBTJPOBMMZ ZPVXBOUUPQBTTEBUBUISPVHIUIF DPNQPOFOUUSFFXJUIPVUIBWJOHUPQBTTUIFQSPQT EPXONBOVBMMZBUFWFSZMFWFM 3FBDUT DPOUFYUGFBUVSFMFUTZPVEPUIJT IUUQTGBDFCPPLHJUIVCJPSFBDUEPDTDPOUFYUIUNM

Slide 28

Slide 28 text

React Context ͜͏ఆٛͯ͠

Slide 29

Slide 29 text

React Context ͜͏࢖͏

Slide 30

Slide 30 text

What is Contents ? ༻๏༻ྔΛकͬͯਖ਼͓͔͍͍ͭͩ͘͘͠͞ IUUQTGBDFCPPLHJUIVCJPSFBDUEPDTDPOUFYUIUNM

Slide 31

Slide 31 text

React Context ஫ҙ͕ඞཁ͕ͩɺे෼ศརͰ࣮༻త ༻్ • "1*૚ • ଟݴޠԽ • ෼ੳ (PPHMF"OBMZUJDT FUD %*ʹΑΔςετͷ͠΍͢͞΋ັྗ

Slide 32

Slide 32 text

サンプルでよくあつこれはNG

Slide 33

Slide 33 text

API層をcontextに渡しContaierで呼ぶ

Slide 34

Slide 34 text

実践で最初に抑えるべきこと • ਖ਼͍͠ίϯϙʔωϯτࢦ޲ • this.contextͷ׆༻ • ΤϯςΟςΟͱܕ

Slide 35

Slide 35 text

エンティティと型 • "1*͔Βऔ͖ͬͯͨ஋ͷ৴པ͢Δ͔ • ΤϯςΟςΟͷఆ͕ٛ41"ͷ؊ • Մಡੑɾอकੑͷ୲อ

Slide 36

Slide 36 text

APIから取ってきた値の信頼するか • ૝ఆ֎͸ɺ&OUJUZͰ͔ͬ͠Γམͱ͢ • &OUJUZ3FEVDFS DPNQPOFOUʹ͸༨ܭͳ͜ ͱΛߟ͑ͤ͞ͳ͍

Slide 37

Slide 37 text

エンティティの定義がSPAの肝? • 6*ʹ͋ΘͤͨFOUJUZΛͭͬͯ͘͸͍͚ͳ͍ • ͋͘·Ͱ֓೦ͱͯ͠ਖ਼͍͠࠷খ୯Ґ • 4UPSFͷઃܭ΋ࣗͣͱܾ·Δ

Slide 38

Slide 38 text

可読性・保守性の担保 • 3FBDUશൠͦ͏͕ͩɺͱͯ΋'MVY͸هड़ྔ͕ͱͯ΋ ଟ͍ • ࡾਓYҰϲ݄Ͱ΋ɺ΋͏ʮ͜͜Ͳ͏͍͏͜ͱʁʯʹ ͳΔ • 41"ͱ͍͏ΑΓɺΫϥΠΞϯτΞϓϦέʔγϣϯશ ൠͰେࣄͳ͜ͱ

Slide 39

Slide 39 text

Conclusion ਖ਼͍͠ίϯϙʔωϯτࢦ޲ • ਖ਼͍͠ίϯϙʔωϯτΛੵΈ্͛Ͷ͹ɺ޾ͤ͸΍ͬͯ͜ͳ͍ this.contextͷ׆༻ • DRYͱDI ΤϯςΟςΟͱܕ • ਖ਼֓͘͠೦Λ੔ཧΛ͠ɺݟ௨͠ΛΑ͘͢Δ

Slide 40

Slide 40 text

Enjoy SPA! Enjoy React/Redux! We are always hiring! 'J/$*OD