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
400
エンジニアリングマネージャーと実行力 - 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
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
220
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
580
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
430
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
150
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
140
Model Mondays S2E03: SLMs & Reasoning
nitya
0
240
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
310
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
1
130
フィンテック養成勉強会#54
finengine
0
200
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
0
320
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
170
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
0
120
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing for humans not robots
tammielis
253
25k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Producing Creativity
orderedlist
PRO
346
40k
Faster Mobile Websites
deanohume
307
31k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Writing Fast Ruby
sferik
628
62k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.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