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
99
モーダルウィンドウを作るときは 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
49
コンテナクエリはコンテナ技術の話ではなく CSS の話です / 20240920-niigata-5min-tech
girigiribauer
1
49
公共交通のオープンデータ事始め / 20240823-niigata-5min-tech
girigiribauer
0
53
私と Vim / 20240426-niigata-5min-tech
girigiribauer
2
140
がんばらない勉強会の続け方 / 20240426-niigata-5min-tech-omake
girigiribauer
1
520
初めての chrome extension で Plasmo 使ってみた / 20240329-niigata-5min-tech
girigiribauer
0
77
時間配分を常に意識するために、通知する仕組みを作った話 / 20220527-peacock-meets-up-01
girigiribauer
0
210
コードフォーマッタを導入して プロジェクト内に平穏をもたらす話 / 20191025-v-okinawa
girigiribauer
0
160
TypeScript を活用してサービス構築頑張ってみた話 / 20190906_v-sendai_girigiribauer
girigiribauer
1
280
Other Decks in Programming
See All in Programming
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
740
外部システム連携先が10を超えるシステムでのアーキテクチャ設計・実装事例
kiwasaki
1
260
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
230
Realtime API 入門
riofujimon
0
130
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
490
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
120
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.4k
JaSST 24 九州:ワークショップ(は除く)実践!マインドマップを活用したソフトウェアテスト+活用事例
satohiroyuki
0
310
CSC509 Lecture 08
javiergs
PRO
0
110
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
420
C++でシェーダを書く
fadis
6
3.8k
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
410
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Teambox: Starting and Learning
jrom
133
8.8k
Practical Orchestrator
shlominoach
186
10k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
520
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Code Reviewing Like a Champion
maltzj
520
39k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
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 / ϑϩϯτΤϯυ͘͘ձ • ൃදܗࣜͷձΛଟ͘ͷਓʹἤ͍ͬͯΔ͕ɺͳ͔ͳ͔Ұॹʹͬͯ͘Εͳ͍ • ͓ࣄʹ͍ͭͯ • ࡢ·ͰελʔτΞοϓͷ্ཱͪ͛ͱ͔ॾʑͬͯͨ • ·ͨϑϦʔϥϯεʹཱͪฦͬͨͷͰ͓ख͍ग़དྷͦ͏ͳͱ͜Ζ͋Εͥͻʂ