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.5k
8 Tips for React beginner
takayukishmz
0
250
Other Decks in Technology
See All in Technology
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
100
いざ、BSC討伐の旅
nikinusu
2
780
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
330
Security-JAWS【第35回】勉強会クラウドにおけるマルウェアやコンテンツ改ざんへの対策
4su_para
0
180
飲食店データの分析事例とそれを支えるデータ基盤
kimujun
0
160
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
300
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
1
1k
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
210
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.7k
Terraform Stacks入門 #HashiTalks
msato
0
360
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
180
OTelCol_TailSampling_and_SpanMetrics
gumamon
1
200
Featured
See All Featured
What's new in Ruby 2.0
geeforr
343
31k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Scaling GitHub
holman
458
140k
Done Done
chrislema
181
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Building Your Own Lightsaber
phodgson
103
6.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Into the Great Unknown - MozCon
thekraken
32
1.5k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
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