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
4.7k
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
370
エンジニアリングマネージャーと実行力 - 13ヶ月の組織改善から学ぶ3つのアンチパターンとチェックリスト - / Engineering Manager and Execution
takayukishmz
8
4.3k
エンジニアリングマネージャーと戦略 / Engineering Manager and Strategy
takayukishmz
2
3.2k
カイカクジャーニー ~ スタートアップが必ずぶつかる課題と開発チームのメジャーバージョンアップ ~/ Rails Developer Meetup 2018-12-08
takayukishmz
5
3.3k
8 Tips for React beginner
takayukishmz
0
230
Other Decks in Technology
See All in Technology
「XX試験の環境作ってよ」と言われた時によく使うAWSのソリューションについて
bun913
0
120
技術広報経験0のEMがエンジニアブランディングをはじめてみた
coconala_engineer
1
130
エンジニアブランディングチームの KPI / KPI's of engineer branding team
chaspy
1
140
SREsのためのSRE定着ガイド
netmarkjp
10
1.6k
社内共通ルールを値オブジェクトにして社内ライブラリとして運用してみた話
leveragestech
2
1.1k
Elementaryを用いたデータ品質の可視化とデータ基盤の運用改善
10xinc
6
1.4k
沒想過的前端錯誤處理可能比你有做的還多
line_developers_tw
PRO
0
2k
ビジネスロジックを「型」で表現するOOPのための関数型DDD / Functional And Type-Safe DDD for OOP
yuitosato
29
11k
Tohoku.Tech #1 「Cursorを使ったRaspberry Piの開発」by ねこまた
jun2882
0
250
サービス成長と共に肥大化するモノレポ、長くなるCI時間 / As services grow, monorepos get bigger and CI time gets longer
kohbis
5
2k
検証からプロダクトへ: シームレスなLLM開発の ためのしくみ作り
nunukim
1
150
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
330
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
323
20k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
Typedesign – Prime Four
hannesfritz
36
2k
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.8k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
GraphQLとの向き合い方2022年版
quramy
28
12k
Debugging Ruby Performance
tmm1
68
11k
Designing for Performance
lara
601
67k
Clear Off the Table
cherdarchuk
82
310k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
319
20k
Code Reviewing Like a Champion
maltzj
512
39k
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