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
5k
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
390
エンジニアリングマネージャーと実行力 - 13ヶ月の組織改善から学ぶ3つのアンチパターンとチェックリスト - / Engineering Manager and Execution
takayukishmz
8
4.4k
エンジニアリングマネージャーと戦略 / Engineering Manager and Strategy
takayukishmz
2
3.4k
カイカクジャーニー ~ スタートアップが必ずぶつかる課題と開発チームのメジャーバージョンアップ ~/ Rails Developer Meetup 2018-12-08
takayukishmz
5
3.6k
8 Tips for React beginner
takayukishmz
0
250
Other Decks in Technology
See All in Technology
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
180
EDRの検知の仕組みと検知回避について
chayakonanaika
8
4.2k
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
150
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
150
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
450
JavaにおけるNull非許容性
skrb
1
400
Iceberg Meetup Japan #1 : Iceberg and Databricks
databricksjapan
0
290
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
6
1.9k
短縮URLをお手軽に導入しよう
nakasho
0
130
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
13
3.6k
実は強い 非ViTな画像認識モデル
tattaka
1
1k
わたしのOSS活動
kazupon
2
330
Featured
See All Featured
Building Applications with DynamoDB
mza
93
6.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Music & Morning Musume
bryan
46
6.4k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
How STYLIGHT went responsive
nonsquared
98
5.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
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