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
React/Reduxで半年くらい真面目にSPAするとわかること
Search
takayuki shimizu
September 16, 2016
Technology
6
5.1k
React/Reduxで半年くらい真面目にSPAするとわかること
frontend meetup vol.1 in finc での登壇資料です。
takayuki shimizu
September 16, 2016
Tweet
Share
More Decks by takayuki shimizu
See All by takayuki shimizu
VPoEの仕事 / What's VPoE work?
takayukishmz
0
410
エンジニアリングマネージャーと実行力 - 13ヶ月の組織改善から学ぶ3つのアンチパターンとチェックリスト - / Engineering Manager and Execution
takayukishmz
8
4.5k
エンジニアリングマネージャーと戦略 / Engineering Manager and Strategy
takayukishmz
2
3.4k
カイカクジャーニー ~ スタートアップが必ずぶつかる課題と開発チームのメジャーバージョンアップ ~/ Rails Developer Meetup 2018-12-08
takayukishmz
5
3.7k
8 Tips for React beginner
takayukishmz
0
270
Other Decks in Technology
See All in Technology
どこで動かすか、誰が動かすか 〜 kintoneのインフラ基盤刷新と運用体制のシフト 〜
ueokande
0
190
KiroでGameDay開催してみよう(準備編)
yuuuuuuu168
1
140
自社製CMSからmicroCMSへのリプレースがプロダクトグロースを加速させた話
nextbeatdev
0
150
RAID6 を楔形文字で組んで現代人を怖がらせましょう(実装編)
mimifuwa
1
320
Goss: Faiss向けの新しい本番環境対応 Goバインディング #coefl_go_jp
bengo4com
0
1.4k
Amazon Bedrock AgentCore でプロモーション用動画生成エージェントを開発する
nasuvitz
6
450
人を動かすことについて考える
ichimichi
2
330
R-SCoRe: Revisiting Scene Coordinate Regression for Robust Large-Scale Visual Localization
takmin
0
430
mruby(PicoRuby)で ファミコン音楽を奏でる
kishima
1
290
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
110
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
18
5.5k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.6k
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.6k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Documentation Writing (for coders)
carmenintech
73
5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
4 Signs Your Business is Dying
shpigford
184
22k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Transcript
'SPOUFOENFFUVQWPM !UBLBZVLJTIN[ React/Reduxで半年くらい 真面目にSPAするとわかること 'J/$*OD
~table of contents~ ࣗݾհ 8IZ41" 8IZ3FBDU3FEVY ࣮ફ͔ͯ͠Βؾ͍ͮͨ͜ͱ $PODMVTJPO
自己紹介 ⦁ਗ਼ਫོ೭ ⦁Web Application Development manager ( ͍ ) ⦁github
@takayukishmz ⦁DeNA -> Grood -> FiNC ⦁Native->Server-> WebClient
What is FiNC w σʔλऩूˠੳˠιϦϡʔγϣϯˠ&$ w ߦಈม༰ͱܧଓͷͨΊͷΣϧωεόϦϡʔνΣʔϯ ウェルネス サーベイ 遺伝子・
血液検査 食事指導 サーベイ+ 各種検査 分析結果 レポート パーソナライズ ソリューション&コンテンツ 専門家の アドバイス SNS ヘルスケア の知識・智恵 レシピ 豆知識 理想の食事 腕を大きくふって歩く 背伸びを3回する 肩甲骨を3回す 野菜を毎食食べる 1日1ℓ以上水を飲む 朝ヨーグルトを食べる • 総合結果 • 心身の状態 • 解決すべき行動 • 生活習慣病リスク • お勧めプラン etc. フィットネスタスク FiNC STORE ポイント 獲得 • オーダメイド・ パ ーソナル・ サプ リメント • 酵素ドリンク • スムージー etc. タスク実行や 食事投稿で 貯まるポイント ポイント適用可 サーベイ結果 ヘルスケア ツーリズム 健康食 コンテンツ etc. 食事タスク スクワットを10回x3 継続して10分歩く ライスを半分に控える 毎食野菜から食べる
Media *51SP͞ΜͰ3FBDU3FEVYͷهࣄΛॻ͖·ͨ͠
~table of contents~ ࣗݾհ 8IZ41" 8IZ3FBDU3FEVY ࣮ફ͔ͯ͠Βؾ͍ͮͨ͜ͱ $PODMVTJPO
Why SPA? Why React/Redux? 'JOD BQQXFC
Why SPA? Why React/Redux? • ΠϯλϥΫγϣϯͷଟ͍/BUJWFΞϓϦͷXFC൛ • طଘ"1*Λ͏·͘׆͔ͯ͠࠷ϦϦʔε • ظͷϝϯςφϯεੑॏཁ
ϦονͳUXΛޮΑ࣮͘ݱ͠ͳ͕Βɺ ظͰշదʹ։ൃ͠ଓ͚ΒΕΔΞʔΩςΫνϟ͕ඞཁ
てことはつまり
てことで早速やってみた • υΩϡϝϯτ͕๛ • ͤͬͤͱ3FBDUͷαϯϓϧΛͭ͘Γ • 3FBDU3FEVYͷαϯϓϧΛͭ͘Γ ͱ͍͏Α͋͘Δύλʔϯɻ ຬΛ࣋ͯ͠ϓϩδΣΫτελʔτ ຊޠॆ࣮͖ͯͨ͠ʔ
Ծ%0.͛͢ʔ 'MVYศརʔ ៉ྷͳઃܭͰ͡ΊΔͧʔ
初めて一週間 ͋Ε
初めて一週間 41"ͬͯͤʹͳΕΔ ͬͯฉ͍ͯͨͷʹ
初めて一週間 ͭΒ͍
~table of contents~ ࣗݾհ 8IZ41" 8IZ3FBDU3FEVY ࣮ફ͔ͯ͠Βޙչͨ͜͠ͱؾ͍ͮͨ͜ͱ $PODMVTJPO
つらい理由 • ͭΒ͍ίϯϙʔωϯτ • ͭΒ͍܁Γฦ͠ɾςετ • ͭΒ͍σʔλͷѻ͍ ͭΒ͍··41"ͨ͘͠ͳ͍
実践で最初に抑えるべきこと • ਖ਼͍͠ίϯϙʔωϯτࢦ • this.contextͷ׆༻ • ΤϯςΟςΟͱܕ
実践で最初に抑えるべきこと • ਖ਼͍͠ίϯϙʔωϯτࢦ • this.contextͷ׆༻ • ΤϯςΟςΟͱܕ
コンポーネント指向? 6*ύʔπʢίϯϙʔωϯτʣΛΈ߹Θͤ ͯ7JFXΛߏங͢Δߟ͑ํ
コンポーネント指向 • ࠶ར༻ੑΛҙࣝ͢Δ • ঢ়ଶͷ༗ແͷׂΓΓ • CSSͱίϯϙʔωϯτҰରҰ
再利用性とは
再利用性 Smart Component ঢ়ଶΛͪɺDumpίϯϙʔωϯτͱaction, storeΛͭͳ͙ɻ MVCͷCʹ͍ۙɻ Dumb Component ঢ়ଶΛͨͣɺࢀরಁաతʹड͚औͬͨͷʹ࣮ʹಈ͖ɺ DomΛͭ͘Δ
状態の有無の割り切り ͜ͷঢ়ଶɺͲ͏ѻ͍·͢ʁ
状態の有無の割り切り ͜ͷঢ়ଶɺͲ͏ѻ͍·͢ʁ • Statelessͳίϯϙʔωϯτ͕ݪଇ • Ͱࢠίϯϙʔωϯτʹ·͔ͤͯ͠·ͬͨ΄ ͏͕͍͍state͋Δ ॊೈʹྫ֎ͰָΛ͢Δ
コンポーネント指向 • ࠶ར༻ੑΛҙࣝ͢Δ • ঢ়ଶͷ༗ແͷׂΓΓ • CSSͱίϯϙʔωϯτҰରҰ
実践で最初に抑えるべきこと • ਖ਼͍͠ίϯϙʔωϯτࢦ • this.contextͷ׆༻ • ΤϯςΟςΟͱܕ
What is Contents ? ͜͜ಡΜͩ͜ͱ͋Γ·͔͢ʁ
What is Contents ? 0DDBTJPOBMMZ ZPVXBOUUPQBTTEBUBUISPVHIUIF DPNQPOFOUUSFFXJUIPVUIBWJOHUPQBTTUIFQSPQT EPXONBOVBMMZBUFWFSZMFWFM 3FBDUT DPOUFYUGFBUVSFMFUTZPVEPUIJT
IUUQTGBDFCPPLHJUIVCJPSFBDUEPDTDPOUFYUIUNM
React Context ͜͏ఆٛͯ͠
React Context ͜͏͏
What is Contents ? ༻๏༻ྔΛकͬͯਖ਼͓͔͍͍ͭͩ͘͘͠͞ IUUQTGBDFCPPLHJUIVCJPSFBDUEPDTDPOUFYUIUNM
React Context ҙ͕ඞཁ͕ͩɺेศརͰ࣮༻త ༻్ • "1* • ଟݴޠԽ • ੳ
(PPHMF"OBMZUJDT FUD %*ʹΑΔςετͷ͢͠͞ັྗ
サンプルでよくあつこれはNG
API層をcontextに渡しContaierで呼ぶ
実践で最初に抑えるべきこと • ਖ਼͍͠ίϯϙʔωϯτࢦ • this.contextͷ׆༻ • ΤϯςΟςΟͱܕ
エンティティと型 • "1*͔Βऔ͖ͬͯͨͷ৴པ͢Δ͔ • ΤϯςΟςΟͷఆ͕ٛ41"ͷ؊ • Մಡੑɾอकੑͷ୲อ
APIから取ってきた値の信頼するか • ఆ֎ɺ&OUJUZͰ͔ͬ͠Γམͱ͢ • &OUJUZ3FEVDFS DPNQPOFOUʹ༨ܭͳ͜ ͱΛߟ͑ͤ͞ͳ͍
エンティティの定義がSPAの肝? • 6*ʹ͋ΘͤͨFOUJUZΛ͍͚ͭͬͯ͘ͳ͍ • ͋͘·Ͱ֓೦ͱͯ͠ਖ਼͍͠࠷খ୯Ґ • 4UPSFͷઃܭࣗͣͱܾ·Δ
可読性・保守性の担保 • 3FBDUશൠͦ͏͕ͩɺͱͯ'MVYهड़ྔ͕ͱͯ ଟ͍ • ࡾਓYҰϲ݄Ͱɺ͏ʮ͜͜Ͳ͏͍͏͜ͱʁʯʹ ͳΔ • 41"ͱ͍͏ΑΓɺΫϥΠΞϯτΞϓϦέʔγϣϯશ ൠͰେࣄͳ͜ͱ
Conclusion ਖ਼͍͠ίϯϙʔωϯτࢦ • ਖ਼͍͠ίϯϙʔωϯτΛੵΈ্͛Ͷɺͤͬͯ͜ͳ͍ this.contextͷ׆༻ • DRYͱDI ΤϯςΟςΟͱܕ • ਖ਼֓͘͠೦ΛཧΛ͠ɺݟ௨͠ΛΑ͘͢Δ
Enjoy SPA! Enjoy React/Redux! We are always hiring! 'J/$*OD