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
110
モーダルウィンドウを作るときは createPortal を選択肢に加えよう、という話 / 20200201-react-nagoya-learning
今日もエモい話はしません!
girigiribauer
February 01, 2020
Tweet
Share
More Decks by girigiribauer
See All by girigiribauer
Bluesky のフィードを作ろう / 20250620-niigata-5min-tech
girigiribauer
0
32
『Bluesky 公式アカウント移行まとめ』のアップデートをした話 / 20241018-niigata-5min-tech
girigiribauer
0
89
コンテナクエリはコンテナ技術の話ではなく CSS の話です / 20240920-niigata-5min-tech
girigiribauer
1
76
公共交通のオープンデータ事始め / 20240823-niigata-5min-tech
girigiribauer
0
91
私と Vim / 20240426-niigata-5min-tech
girigiribauer
2
180
がんばらない勉強会の続け方 / 20240426-niigata-5min-tech-omake
girigiribauer
1
560
初めての chrome extension で Plasmo 使ってみた / 20240329-niigata-5min-tech
girigiribauer
0
120
時間配分を常に意識するために、通知する仕組みを作った話 / 20220527-peacock-meets-up-01
girigiribauer
0
240
コードフォーマッタを導入して プロジェクト内に平穏をもたらす話 / 20191025-v-okinawa
girigiribauer
0
170
Other Decks in Programming
See All in Programming
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
300
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
510
A2A プロトコルを試してみる
azukiazusa1
2
1.1k
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
230
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
110
Select API from Kotlin Coroutine
jmatsu
1
190
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
430
ReadMoreTextView
fornewid
1
480
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
310
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
190
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
Create a website using Spatial Web
akkeylab
0
300
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Scaling GitHub
holman
459
140k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Making Projects Easy
brettharned
116
6.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
It's Worth the Effort
3n
185
28k
Git: the NoSQL Database
bkeepers
PRO
430
65k
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 / ϑϩϯτΤϯυ͘͘ձ • ൃදܗࣜͷձΛଟ͘ͷਓʹἤ͍ͬͯΔ͕ɺͳ͔ͳ͔Ұॹʹͬͯ͘Εͳ͍ • ͓ࣄʹ͍ͭͯ • ࡢ·ͰελʔτΞοϓͷ্ཱͪ͛ͱ͔ॾʑͬͯͨ • ·ͨϑϦʔϥϯεʹཱͪฦͬͨͷͰ͓ख͍ग़དྷͦ͏ͳͱ͜Ζ͋Εͥͻʂ