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
タスクにもストック型・フロー型があるということに Todoist を使い始めて気づいた話 / 20250725-niigata-5min-tech
girigiribauer
0
18
Bluesky のフィードを作ろう / 20250620-niigata-5min-tech
girigiribauer
0
36
『Bluesky 公式アカウント移行まとめ』のアップデートをした話 / 20241018-niigata-5min-tech
girigiribauer
0
96
コンテナクエリはコンテナ技術の話ではなく CSS の話です / 20240920-niigata-5min-tech
girigiribauer
1
77
公共交通のオープンデータ事始め / 20240823-niigata-5min-tech
girigiribauer
0
94
私と 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
Other Decks in Programming
See All in Programming
階層化自動テストで開発に機動力を
ickx
1
420
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.2k
Porting a visionOS App to Android XR
akkeylab
0
910
型で語るカタ
irof
0
810
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
6k
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
450
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
990
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
250
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
290
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
27
8.1k
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
470
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Being A Developer After 40
akosma
90
590k
The World Runs on Bad Software
bkeepers
PRO
70
11k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
BBQ
matthewcrist
89
9.7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
What's in a price? How to price your products and services
michaelherold
246
12k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
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 / ϑϩϯτΤϯυ͘͘ձ • ൃදܗࣜͷձΛଟ͘ͷਓʹἤ͍ͬͯΔ͕ɺͳ͔ͳ͔Ұॹʹͬͯ͘Εͳ͍ • ͓ࣄʹ͍ͭͯ • ࡢ·ͰελʔτΞοϓͷ্ཱͪ͛ͱ͔ॾʑͬͯͨ • ·ͨϑϦʔϥϯεʹཱͪฦͬͨͷͰ͓ख͍ग़དྷͦ͏ͳͱ͜Ζ͋Εͥͻʂ