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
18k
Contaienr/Presentationalパターン再入門
KazukiHayase
August 10, 2022
Tweet
Share
More Decks by KazukiHayase
See All by KazukiHayase
Goでテストをしやすくするためにやったこと
kazukihayase
1
670
GraphQLクライアントの技術選定 2023冬
kazukihayase
8
5.9k
Introduction and Insights of the Hasura-based Architecture
kazukihayase
0
780
自分だけが頑張るのをやめて、フルスタックなチームを作る
kazukihayase
2
2.2k
Goでテンプレートからファイルを自動生成するCLIを作る
kazukihayase
0
920
生産性が上がり続けるチームを作るための第一歩
kazukihayase
4
3.6k
GraphQLにおけるクライアントキャッシュ戦略
kazukihayase
0
2.5k
MUIをベースにしたデザインシステムの構築
kazukihayase
0
410
Hasuraを活用するためのTips集
kazukihayase
0
32k
Other Decks in Technology
See All in Technology
Grafana エコシステムの活用事例 on ABEMA
tetsuya28
5
710
Unlearn Modularity
lemiorhan
6
280
エンジニアのドメイン知識獲得コストを低減するアプリケーションデザイン
ryo_nagata_
3
140
外部カンファレンスで登壇しよう! 〜「強い」エンジニアへの一歩を踏み出す〜
logica0419
4
130
さくっと実践!Postmanを活用した高品質で持続可能なAPI管理
yokawasa
5
350
なぜ Rack を理解すべきかプレトーク / Why should you understand Rack - Pre-talk
hogelog
0
220
AWS DDKを利用したDataOps事始め
beex
1
160
From naive to advanced RAG: the complete guide
glaforge
0
620
0x5F3759DF
ykozw
0
320
ゼロからはじめる生成AI〜AWS認定とハンズオンで学ぶ初心者の道〜
kenichinakamura
0
130
SOLID - Architecture and Architectural Decisions - Devfest Goa 2024
rivuchk
0
150
生成AI入門
shukob
0
110
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
31
2.9k
Building Adaptive Systems
keathley
38
2.2k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Optimizing for Happiness
mojombo
375
69k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4.1k
The Pragmatic Product Professional
lauravandoore
31
6.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
5
130
The Language of Interfaces
destraynor
154
24k
We Have a Design System, Now What?
morganepeng
50
7.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
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 ·ͱΊ