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
0
14k
Contaienr/Presentationalパターン再入門
KazukiHayase
August 10, 2022
Tweet
Share
More Decks by KazukiHayase
See All by KazukiHayase
GraphQLクライアントの技術選定 2023冬
kazukihayase
8
4.2k
Introduction and Insights of the Hasura-based Architecture
kazukihayase
0
620
自分だけが頑張るのをやめて、フルスタックなチームを作る
kazukihayase
2
1.6k
Goでテンプレートからファイルを自動生成するCLIを作る
kazukihayase
0
220
生産性が上がり続けるチームを作るための第一歩
kazukihayase
4
2.8k
GraphQLにおけるクライアントキャッシュ戦略
kazukihayase
0
1.9k
MUIをベースにしたデザインシステムの構築
kazukihayase
0
310
Hasuraを活用するためのTips集
kazukihayase
0
28k
ReactとGraphQLで実現する宣言的データフェッチ
kazukihayase
1
2.2k
Other Decks in Technology
See All in Technology
どう買う?Azure
kuniteru
1
190
OCI Data Integration技術情報 / ocidi_technical_jp
oracle4engineer
PRO
1
1.5k
Autopsy of a Cascading Outage from a MySQL Crashing Bug
jfg956
0
200
中学生でもわかる深層学習
e869120
8
1.6k
Kubeflow Pipelines v2 で変わる機械学習パイプライン開発
asei
4
340
10分でわかるfreeeのQA
freee
0
260
私のRSpecの書き方 / How I write RSpec
tmtms
4
840
継続的テストモデルを実現するためにスリーアミーゴスを用いた10Xでのシフトレフトの事例
nihonbuson
3
230
サービス成長と共に肥大化するモノレポ、長くなるCI時間 / As services grow, monorepos get bigger and CI time gets longer
kohbis
5
2.1k
長文から長文を生成するLLMツールをオープンソースで作ってみた。
tomohisa
2
150
Autify Company Deck
autifyhq
1
30k
エンジニア候補者向け資料2024.03.28.pdf
macloud
0
2.9k
Featured
See All Featured
Docker and Python
trallard
33
2.6k
Building Your Own Lightsaber
phodgson
97
5.6k
Rails Girls Zürich Keynote
gr2m
91
13k
YesSQL, Process and Tooling at Scale
rocio
160
13k
GraphQLとの向き合い方2022年版
quramy
28
12k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
Designing for Performance
lara
601
67k
Practical Orchestrator
shlominoach
180
9.7k
Producing Creativity
orderedlist
PRO
335
39k
Teambox: Starting and Learning
jrom
126
8.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
The Brand Is Dead. Long Live the Brand.
mthomps
48
22k
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 ·ͱΊ