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
22k
Contaienr/Presentationalパターン再入門
KazukiHayase
August 10, 2022
Tweet
Share
More Decks by KazukiHayase
See All by KazukiHayase
もし今からGraphQLを採用するなら
kazukihayase
12
5.2k
Goでテストをしやすくするためにやったこと
kazukihayase
1
810
GraphQLクライアントの技術選定 2023冬
kazukihayase
9
6.9k
Introduction and Insights of the Hasura-based Architecture
kazukihayase
0
940
自分だけが頑張るのをやめて、フルスタックなチームを作る
kazukihayase
2
3.2k
Goでテンプレートからファイルを自動生成するCLIを作る
kazukihayase
0
1.3k
生産性が上がり続けるチームを作るための第一歩
kazukihayase
4
3.8k
GraphQLにおけるクライアントキャッシュ戦略
kazukihayase
0
3.1k
MUIをベースにしたデザインシステムの構築
kazukihayase
0
580
Other Decks in Technology
See All in Technology
やさしいClaude Code入門
minorun365
PRO
21
13k
積み上げられた技術資産と向き合いながら、プロダクトの信頼性をどう守るか
plaidtech
PRO
0
330
技術書典18結果報告
mutsumix
2
170
ソフトウェアは捨てやすく作ろう/Let's make software easy to discard
sanogemaru
10
5.6k
Roo Codeにすべてを委ねるためのルール運用
pharma_x_tech
1
200
FastMCPでSQLをチェックしてくれるMCPサーバーを自作してCursorから動かしてみた
nayuts
1
170
Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
0
460
ゴリラ.vim #36 ~ Vim x SNS ~ スポンサーセッション
yasunori0418
1
280
Azure Developer CLI と Azure Deployment Environment / Azure Developer CLI and Azure Deployment Environment
nnstt1
1
110
Oracle Cloud Infrastructure:2025年5月度サービス・アップデート
oracle4engineer
PRO
0
330
ITエンジニアを取り巻く環境とキャリアパス / A career path for Japanese IT engineers
takatama
4
1.5k
iOS/Androidで無限循環Carousel表現を考えてみる
fumiyasac0921
0
120
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Embracing the Ebb and Flow
colly
85
4.7k
Raft: Consensus for Rubyists
vanstee
137
7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
Building an army of robots
kneath
306
45k
Why Our Code Smells
bkeepers
PRO
336
57k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
The Language of Interfaces
destraynor
158
25k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.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 ·ͱΊ