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
モーダルウィンドウを作るときは createPortal を選択肢に加えよう、という話 / 20200201-react-nagoya-learning
Search
girigiribauer
February 01, 2020
Programming
0
98
モーダルウィンドウを作るときは createPortal を選択肢に加えよう、という話 / 20200201-react-nagoya-learning
今日もエモい話はしません!
girigiribauer
February 01, 2020
Tweet
Share
More Decks by girigiribauer
See All by girigiribauer
初めての chrome extension で Plasmo 使ってみた / 20240329-niigata-5min-tech
girigiribauer
0
15
時間配分を常に意識するために、通知する仕組みを作った話 / 20220527-peacock-meets-up-01
girigiribauer
0
160
コードフォーマッタを導入して プロジェクト内に平穏をもたらす話 / 20191025-v-okinawa
girigiribauer
0
150
TypeScript を活用してサービス構築頑張ってみた話 / 20190906_v-sendai_girigiribauer
girigiribauer
1
270
TypeScript から JavaScript への変換が見えやすくするビューワーを作った話 / 20190403-typescript-studying
girigiribauer
1
490
沖縄のバスがつらすぎて自分でバスアプリ作った話 / ngk2018b-okinawabus
girigiribauer
2
1.4k
Other Decks in Programming
See All in Programming
Semantic search with Django and pgvector
pauloxnet
0
240
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
0
180
PostmanでAPIの動作確認が楽になった話
h455h1
0
160
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
630
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
160
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
820
Site Reliability Engineering for GMO
pyama86
7
1k
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
110
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.3k
What We Can Learn From OSS
inouehi
0
420
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
350
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
26
8.2k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
Thoughts on Productivity
jonyablonski
58
3.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
Bash Introduction
62gerente
604
210k
Statistics for Hackers
jakevdp
789
220k
The Brand Is Dead. Long Live the Brand.
mthomps
49
28k
Code Review Best Practice
trishagee
55
15k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Transcript
モーダルウィンドウを作るときは createPortal を選択肢に加えよう、 という話 2020/02/01 React Nagoya Learning #5 @girigiribauer
タイトルの通りです • ͍ͬͯΔਓʹͱͬͯɺࠓͷൃදඞཁ ͳ͍͔͠Ε·ͤΜ͕ɺΒͳ͍ํ͍Δͱ ࢥ͏ͷͰ͜ͷ··ଓ͚·͢ɻ ʢΞτϓοτେࣄʣ
空いていたので飛び入り参加 しました!
空いていたので飛び入り参加 しました! • ݟ͔͚ͨͷ͕ճͬͨࠓͩͬͨͷͰɺ ٸ͍Ͱࢿྉ༻ҙ͠·ͨ͠ɾɾɾʂ • ʢͰͪΌΜͱ৸·ͨ͠ʣ
本編
要望: 「商品リストを表示したい!」 • ྫͱͯ͠ҎԼͷΑ͏ͳ HTML ʢͨͩ͠ࡶʣ
要望: 「商品リストを表示したい!」 • ͪͳΈʹ͜͏͍͏ͭͰ͢ʢৄ͘͠આ໌͠·ͤΜʣ
まずは普通にコンポーネント化 • ͷϦετͷΞΠςϜͳͷͰɺ `GoodsListItem` ͱͰ͓͖ͯ͠·͢ • ໊Λ `title` ͱ͓͖ͯ͠·͢ •
ίϯϙʔωϯτ1͚ͭͩදࣔͯ͠Έ·͢ • ʢ໘ͳͷͰϦετ `App.tsx` Λྲྀ༻ͪ͠Ό͍ ·͢ʣ
scaffolding • `npx create-react-app sample-goodslistitem --template typescript` • ҎԼ `App.tsx`
͔Β `GoodsListItem` ΛݺͿͱ ͜Ζ·ͰΛ࡞Γ·͢
雑に react-app-env.d.ts で 型定義
雑に App.tsx をいじる
雑に GoodsListItem.tsx を 作る
タイトルを表示するだけの 商品リストができた!
タイトルを表示するだけの 商品リストができた! • λΠτϧ͚ͩදࣔͰ͖ͨʂ • ଞཁૉಉ༷ʹܕఆٛͯ͠ड͚͠ʢཁૉΛ ૿͚ͩ͢Ͱ֓Ͷ༧Ͱ͖ΔͷͰলུʣ • `title` ͷଞʹ
`price`, `description`, `sellingPoints` ͋ͨΓΛ࡞͓͖ͬͯ·͢
None
要望:「商品詳細の部分を モーダルウィンドウにしたい!」 • HTML Ͱ `class="detail"` ͷ෦ • ίϯϙʔωϯτͰ `sellingPoints`
͋ͨΓͷ෦ • ࣮ࡍʹͬͱͨ͘͞ΜͷཁૉΛදࣔͨ͠ Γɺ HTML ࡶͩͬͨΓ͢Δ
ここで実装中に問題が起きる • CSS ͚ͩͰؤுΓ͖Εͳ͍έʔε͕ग़ͯ͘Δ • DOM ͷॏͳΓॱ `z-index` ͷ݉Ͷ߹͍ͳͲ ͷ্ؔɺϞʔμϧΟϯυͷίϯςϯπ
`body` ͷด͡λάͷલʹ࣋ͬͯ͘Δඞཁ ͕ग़͖ͯͨ
でもコンポーネントが 間違ってるわけじゃない • ݟͨৼΔ͍͕มΘ͖͚ͬͯͨͩͰɺߏʹ มԽ͕ى͖ͯΔΘ͚Ͱͳ͍ • Ϟʔμϧʹݟ͍ͤͨɺϞʔυΛΓସ͑ͯݟͤͨ ͍ɺͭ·ΓݟͨৼΔ͍ͷ • ݟͨৼΔ͍
CSS / JavaScript ͷ • ߏ HTML ͷ
問題の本質はこのあたり • ߏͱͯͦ͠ͷ··͕ྑ͍ ʢϦετ͕ϦετΞΠςϜΛ͍࣋ͬͯΔʣ • Ͱ HTML Λม͑͟ΔΛಘͳ͍ • ίϯϙʔωϯτͷ֎ଆʹίϯϙʔωϯτͷ
ཁૉΛ࣋ͬͯ͘Δඞཁ͕͋Δ
さてどうしよう?
解決案: モーダルウィンドウ用のコンポーネ ントを作り、データを渡す • `body` ͷด͡λάͷखલʹ༧ΊϞʔμϧΟ ϯυදࣔ༻ίϯϙʔωϯτΛ࡞Δ • ϦετΞΠςϜͷԿΒ͔ͷ action
ʹΑΓɺ ϞʔμϧΟϯυදࣔ༻ίϯϙʔωϯτʹ ඞཁͳσʔλΛ͢
確かに一定解決するが・・・ • ෳࡶʹͳΓ͍͢ • ݟͨৼΔ͍Λม͔͚͑ͨͬͨͩͳͷ ʹɺػೳ͕૿͍͑ͯΔײɾɾɾ
奥様、createPortal ですよ!
奥様、createPortal ですよ! • React v16.0 Ͱೖͬͨϙʔλϧͱ͍͏ػೳ • `ReactDOM.createPortal(child, container)` •
ୈ1ҾͷදࣔཁૉΛɺୈ2Ҿͷॴʹදࣔ͢Δɺͱ͍͏ ·͞ʹઌͷΛղܾ͢ΔͨΊͷΈ • Vue.js ʹ `PortalVue` ͱ͍͏αʔυύʔςΟͷ ϓϥάΠϯ͕͋Δ
解決案: createPortal を使う • `createPortal` ΛͬͯϞʔμϧΟϯυʹ ͍ͨ͠෦ͷΈΛίϯϙʔωϯτͷ֎ଆʹग़ ͢ • ͔Γ͢͞ͷͨΊʹίϯϙʔωϯτΛ
ׂ͢Δ
react-app-env.d.ts で 雑に型定義
App.tsx に追記する (1)
App.tsx に追記する (2)
GoodsListItem.tsx を 書き直す (1)
GoodsListItem.tsx を 書き直す (2)
表示してどーん
表示してどーん
表示してどーん • ϦετΞΠςϜ `ul > li` ͕Ұ௨Γඳը͞Εͨޙʹ `<div class=“details” />`
͕ඳը͞Ε͍ͯΔ • createPortal Ͱׂͨ͠෦͚͕ͩ `body` ͷด͡λάͷલʹग़ྗ͞ΕͯΔ • ελΠϧ͋ͯͯɺදࣔΓସ͑ͱ͔ೖΕͨΒɺ ޙԿͱ͔ͳΓͦ͏ʢͳͷͰུʣ
None
リストとリストアイテムの 関係性はそのままですっきり! • ϞʔμϧΟϯυදࣔ༻ͷίϯϙʔωϯτ Λ࡞Δํ๏ΑΓ͖ͬ͢Γͯ͠Δ • ͪΖΜϞʔμϧΟϯυҎ֎ʹɺҰ࣌ తʹίϯϙʔωϯτ֎ʹཁૉΛग़͍ͨ͠ͱ͖ ʹ͑Δ •
ޙͬͯΈͯͶʂ
まとめ • createPortal ͍͍ͧ • ެࣜυΩϡϝϯτΛಡ͏ʂ • ݸਓϒϩάΛͨ·ʹॻ͘ͱ͖ɺ࠷ޙͷ·ͱΊ ͕͍ͭʮެࣜυΩϡϝϯτΛಡ͏ʯʹͳ Δ
Refs • https://reactjs.org/docs/portals.html • https://reactjs.org/blog/2017/09/26/react- v16.0.html
時間が余ったら自己紹介 • @girigiribauer ͏͋ʔ͞ΜͱݺΕΔ͜ͱ͕ଟ͍Ͱ͢ • TwentyFour ͖Ͱɺ DVD ϘοΫε͋Δ͠ϝοηϯδϟʔόοά 3΄Ͳ͍௵ͨ͠
• ͷ·ΘΓͰຊ൛ TwentyFour ͷې۟ • ษڧձʹ͍ͭͯ • Nagoya Frontend User Group / ϑϩϯτΤϯυ͘͘ձ • ൃදܗࣜͷձΛଟ͘ͷਓʹἤ͍ͬͯΔ͕ɺͳ͔ͳ͔Ұॹʹͬͯ͘Εͳ͍ • ͓ࣄʹ͍ͭͯ • ࡢ·ͰελʔτΞοϓͷ্ཱͪ͛ͱ͔ॾʑͬͯͨ • ·ͨϑϦʔϥϯεʹཱͪฦͬͨͷͰ͓ख͍ग़དྷͦ͏ͳͱ͜Ζ͋Εͥͻʂ