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 を選択肢に加えよう、という話 / 2...
Search
girigiribauer
February 01, 2020
Programming
0
100
モーダルウィンドウを作るときは createPortal を選択肢に加えよう、という話 / 20200201-react-nagoya-learning
今日もエモい話はしません!
girigiribauer
February 01, 2020
Tweet
Share
More Decks by girigiribauer
See All by girigiribauer
『Bluesky 公式アカウント移行まとめ』のアップデートをした話 / 20241018-niigata-5min-tech
girigiribauer
0
79
コンテナクエリはコンテナ技術の話ではなく CSS の話です / 20240920-niigata-5min-tech
girigiribauer
1
62
公共交通のオープンデータ事始め / 20240823-niigata-5min-tech
girigiribauer
0
71
私と Vim / 20240426-niigata-5min-tech
girigiribauer
2
160
がんばらない勉強会の続け方 / 20240426-niigata-5min-tech-omake
girigiribauer
1
540
初めての chrome extension で Plasmo 使ってみた / 20240329-niigata-5min-tech
girigiribauer
0
95
時間配分を常に意識するために、通知する仕組みを作った話 / 20220527-peacock-meets-up-01
girigiribauer
0
230
コードフォーマッタを導入して プロジェクト内に平穏をもたらす話 / 20191025-v-okinawa
girigiribauer
0
160
TypeScript を活用してサービス構築頑張ってみた話 / 20190906_v-sendai_girigiribauer
girigiribauer
1
280
Other Decks in Programming
See All in Programming
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
250
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
210
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
230
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
150
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
930
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.4k
もう僕は OpenAPI を書きたくない
sgash708
6
1.9k
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.4k
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
490
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
110
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
120
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
Featured
See All Featured
Being A Developer After 40
akosma
89
590k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Code Review Best Practice
trishagee
67
18k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Why Our Code Smells
bkeepers
PRO
336
57k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
How STYLIGHT went responsive
nonsquared
98
5.4k
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 / ϑϩϯτΤϯυ͘͘ձ • ൃදܗࣜͷձΛଟ͘ͷਓʹἤ͍ͬͯΔ͕ɺͳ͔ͳ͔Ұॹʹͬͯ͘Εͳ͍ • ͓ࣄʹ͍ͭͯ • ࡢ·ͰελʔτΞοϓͷ্ཱͪ͛ͱ͔ॾʑͬͯͨ • ·ͨϑϦʔϥϯεʹཱͪฦͬͨͷͰ͓ख͍ग़དྷͦ͏ͳͱ͜Ζ͋Εͥͻʂ