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
Contaienr/Presentationalパターン再入門
Search
KazukiHayase
August 10, 2022
Technology
1
23k
Contaienr/Presentationalパターン再入門
KazukiHayase
August 10, 2022
Tweet
Share
More Decks by KazukiHayase
See All by KazukiHayase
CIでのgolangci-lintの実行を約90%削減した話
kazukihayase
0
420
もし今からGraphQLを採用するなら
kazukihayase
12
5.3k
Goでテストをしやすくするためにやったこと
kazukihayase
1
820
GraphQLクライアントの技術選定 2023冬
kazukihayase
9
7.1k
Introduction and Insights of the Hasura-based Architecture
kazukihayase
0
970
自分だけが頑張るのをやめて、フルスタックなチームを作る
kazukihayase
2
3.2k
Goでテンプレートからファイルを自動生成するCLIを作る
kazukihayase
0
1.4k
生産性が上がり続けるチームを作るための第一歩
kazukihayase
4
3.8k
GraphQLにおけるクライアントキャッシュ戦略
kazukihayase
0
3.2k
Other Decks in Technology
See All in Technology
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
17
6.4k
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
160
PO初心者が考えた ”POらしさ”
nb_rady
0
230
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
190
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
330
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
160
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
54
22k
microCMSではじめるAIライティング
himaratsu
0
120
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
2
940
大量配信システムにおけるSLOの実践:「見えない」信頼性をSLOで可視化
plaidtech
PRO
0
260
AWS CDK 開発を成功に導くトラブルシューティングガイド
wandora58
3
150
Featured
See All Featured
Bash Introduction
62gerente
613
210k
4 Signs Your Business is Dying
shpigford
184
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Unsuck your backbone
ammeep
671
58k
For a Future-Friendly Web
brad_frost
179
9.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Cult of Friendly URLs
andyhume
79
6.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Transcript
Container/Presentationalύλʔϯ ࠶ೖ 2022.05.31 ࣾLT
ࣗݾհ • ૣً • ϓϩδΣΫτϦʔμʔɾϑϧελοΫΤϯδχΞ • झຯ ◦ ։ൃɺϚϯΨɺυϥΠϒɺ͓ञ ◦
͖ͳϚϯΨ ▪ ͋ͻΔͷۭɺӉܑఋɺϒϧʔϐϦΦυɺΞΦΞγ 2
ΞδΣϯμ 1. ຊͷΰʔϧ 2. Container/Presentationalύλʔϯͱ 3. ࣮ํ๏ a. ྨύλʔϯ b.
ׂύλʔϯ c. ྨύλʔϯͱׂύλʔϯͷ͍͚ 4. ·ͱΊ 3
ຊͷΰʔϧ Container/PresentationalύλʔϯΛ ਖ਼͘͠ཧղ͢Δ 4
• Container/PresentationalύλʔϯΛͬͯΔ͕ɺ 2௨Γͷ࣮ํ๏͕͋Δ͜ͱΛΒͳ͍ਓ • Container/PresentationalύλʔϯΛΒͳ͍ਓ 5 λʔήοτ
• ࣮ͷৄࡉ • React HooksʹΑΔContainer/Presentationalύλʔϯͷஔ͖͑ 6 ͞ͳ͍͜ͱ
Container/Presentationalύλʔϯͱ 7
ϩδοΫͱUIΛ͚࣮ͯ͢Δ͜ͱͰ ؔ৺ͷΛਤΔσβΠϯύλʔϯ 8 Container/Presentationalύλʔϯͱ
ϩδοΫΛͱ͢ΔContainer Componentͱ UIΛͱ͢ΔPresentational Componentʹ͚࣮ͯ͢Δ 9 Container/Presentationalύλʔϯͱ
10 Container/Presentationalίϯϙʔωϯτͷൺֱ Container Component Presentational Component ϩδοΫ UI ঢ়ଶʢεςʔτʣ
࣋ͭ ݪଇ࣋ͨͳ͍ σʔλͷड͚औΓݩ ঢ়ଶཧϥΠϒϥϦɺAPI PropsͷΈ
11 Πϝʔδਤ Container Component Presentational Component ঢ়ଶཧ ϥΠϒϥϦ API ঢ়ଶ
ϩδοΫ UI Props
• Componentͷ͕໌֬ʹͳΔ • ςετ͕͘͢͠ͳΔ • Presentational Componentͷ࠶ར༻͕༰қʹͳΔ 12 Container/PresentationalύλʔϯͷϝϦοτ
Presentational ComponentPropsͷΈʹґଘ͍ͯ͠ΔͷͰ࠶ར༻ੑ͕ߴ͍ 13 Presentational Componentͷ࠶ར༻͕༰қʹͳΔ Container Component A Presentational Component
Container Component B Props ঢ়ଶཧ ϥΠϒϥϦ API
࣮ํ๏ 14
2௨Γͷ࣮ํ๏͕ଘࡏ 15 ࣮ํ๏ తʹԠͯ͡దͳ࣮ํ๏ͷબ͕ඞཁ
ྨύλʔϯ 1ͭͷίϯϙʔωϯτΛContainer/PresentationalͷͲͪΒ͔ʹྨ͢Δ ׂύλʔϯ 1ͭͷίϯϙʔωϯτΛContainer/Presentationalʹׂ͢Δ 16 2௨Γͷ࣮ํ๏
• 1ͭͷίϯϙʔωϯτΛContainer͔PresentationalͷͲͪΒ͔ʹྨ͢Δ • ҰൠతʹContaner/Presentationalύλʔϯͱݴ͑ͪ͜Β • UIʹؔ͢Δঢ়ଶͰ͋ΕPresentational ComponentͰอ࣋͢Δ߹͋Δ 17 ྨύλʔϯ FooComponent
Container Component Presentational Component BarComponent
ϝϦοτ • લड़ͨ͠Container/PresentationalύλʔϯͷϝϦοτ ◦ Componentͷ͕໌֬ʹͳΔ ◦ ςετ͕͘͢͠ͳΔ ◦ Presentational Componentͷ࠶ར༻͕༰қʹͳΔ
σϝϦοτ • ͲͷཻͰContainerΛಋೖ͢Δ͔͕͍͠ 18 ྨύλʔϯͷϝϦοτɾσϝϦοτ
• 1ͭͷίϯϙʔωϯτΛContainerͱPresentationalʹׂ͢Δ • 21ηοτͰ1ͭͷίϯϙʔωϯτͱͯ͠ৼΔ͏ • Presentational Componentঢ়ଶΛҰ࣋ͨͳ͍ 19 ׂύλʔϯ HogeComponent
Container Component Presentational Component
ϝϦοτ • ը૾ճؼςετͱ૬ੑ͕͍͍ ◦ Presentational Component͔Βঢ়ଶΛશʹநग़ ◦ PropsͰશύλʔϯͷදࣔͷΓସ͕͑Մೳ σϝϦοτ •
࠶ར༻͕͍͠ • ϑΝΠϧ͕ഒ૿͢Δ 20 ׂύλʔϯͷϝϦοτɾσϝϦοτ
• ঢ়ଶΛશʹநग़͍ͨ͠߹ͷΈ༻͢Δ • ͦΕҎ֎ͷ߹ʹ࠾༻͢ΔͱσϝϦοτͷํ͕େ͖͍ 21 ׂύλʔϯͷҙ
• جຊతʹྨύλʔϯΛ࠾༻͢Δ ◦ લड़ͨ͠ϝϦοτʹՃ͑ɺίϯϙʔωϯτಉ͕࢜ૄ݁߹ʹͳΔͷͰอकੑ্͕͕Δ ◦ ࠷ॳҰ൪ͷίϯϙʔωϯτͷΈΛContainerͱͯ͠ɺ׳Ε͖ͯͨΒ్தͷ֊ʹ ಋೖ͢Δͱ͍͏ྲྀΕ͕ྑ͍ • ঢ়ଶΛશʹநग़͍ͨ͠߹ʹݶΓׂύλʔϯΛ࠾༻͢Δ ◦
ը૾ճؼςετͷΧόϨοδΛ্͍͛ͨ߹ͳͲ 22 ྨύλʔϯͱׂύλʔϯͷ͍͚
• Container/PresentationalύλʔϯʹΑͬͯUIͱϩδοΫΛͰ͖Δ • Container/Presentationalύλʔϯͷ࣮ํ๏ʹ2௨Γ͋Δ ◦ ྨύλʔϯ ◦ ׂύλʔϯ • తʹԠͯ͡దͳ࣮ํ๏Λબ͢Δ
◦ جຊతʹྨύλʔϯ ◦ ঢ়ଶΛશʹநग़͍ͨ͠߹ʹݶΓׂύλʔϯ 23 ·ͱΊ