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
CIでのgolangci-lintの実行を約90%削減した話
kazukihayase
0
350
もし今からGraphQLを採用するなら
kazukihayase
12
5.2k
Goでテストをしやすくするためにやったこと
kazukihayase
1
820
GraphQLクライアントの技術選定 2023冬
kazukihayase
9
7k
Introduction and Insights of the Hasura-based Architecture
kazukihayase
0
960
自分だけが頑張るのをやめて、フルスタックなチームを作る
kazukihayase
2
3.2k
Goでテンプレートからファイルを自動生成するCLIを作る
kazukihayase
0
1.3k
生産性が上がり続けるチームを作るための第一歩
kazukihayase
4
3.8k
GraphQLにおけるクライアントキャッシュ戦略
kazukihayase
0
3.1k
Other Decks in Technology
See All in Technology
Model Mondays S2E02: Model Context Protocol
nitya
0
200
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.6k
[TechNight #90-1] 本当に使える?ZDMの新機能を実践検証してみた
oracle4engineer
PRO
3
140
Prox Industries株式会社 会社紹介資料
proxindustries
0
210
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
0
160
JSX - 歴史を振り返り、⾯⽩がって、エモくなろう
pal4de
3
1.1k
VCpp Link and Library - C++ breaktime 2025 Summer
harukasao
0
220
ユーザーのプロフィールデータを活用した推薦精度向上の取り組み
yudai00
0
490
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
2
250
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
100
AIのAIによるAIのための出力評価と改善
chocoyama
1
520
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
110
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Unsuck your backbone
ammeep
671
58k
Faster Mobile Websites
deanohume
307
31k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Fireside Chat
paigeccino
37
3.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Writing Fast Ruby
sferik
628
61k
Designing for Performance
lara
609
69k
Why Our Code Smells
bkeepers
PRO
337
57k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
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 ·ͱΊ