モーダルウィンドウを作るときは createPortal を選択肢に加えよう、という話 / 20200201-react-nagoya-learning

今日もエモい話はしません！

1. モーダルウィンドウを作るときは createPortal を選択肢に加えよう、 という話 2020/02/01 React Nagoya Learning #5 @girigiribauer
2. タイトルの通りです • ஌͍ͬͯΔਓʹͱͬͯ͸ɺࠓ೔ͷൃද͸ඞཁ ͳ͍͔΋͠Ε·ͤΜ͕ɺ஌Βͳ͍ํ΋͍Δͱ ࢥ͏ͷͰ͜ͷ··ଓ͚·͢ɻ ʢΞ΢τϓοτେࣄʣ
3. 空いていたので飛び入り参加
 しました！
4. 空いていたので飛び入り参加
 しました！ • ݟ͔͚ͨͷ͕೔෇ճͬͨࠓ೔ͩͬͨͷͰɺ ٸ͍Ͱࢿྉ༻ҙ͠·ͨ͠ɾɾɾʂ • ʢͰ΋ͪΌΜͱ৸·ͨ͠ʣ
5. 本編
6. 要望：
 「商品リストを表示したい！」 • ྫͱͯ͠ҎԼͷΑ͏ͳ HTML ʢͨͩ͠ࡶʣ
7. 要望：
 「商品リストを表示したい！」 • ͪͳΈʹ͜͏͍͏΍ͭͰ͢ʢৄ͘͠͸આ໌͠·ͤΜʣ
8. まずは普通にコンポーネント化 • ঎඼ͷϦετͷΞΠςϜͳͷͰɺ `GoodsListItem` ͱͰ΋͓͖ͯ͠·͢ • ঎඼໊Λ `title` ͱ͓͖ͯ͠·͢ • ίϯϙʔωϯτ1͚ͭͩදࣔͯ͠Έ·͢ • ʢ໘౗ͳͷͰϦετ͸ `App.tsx` Λྲྀ༻ͪ͠Ό͍ ·͢ʣ
9. scaffolding • `npx create-react-app sample-goodslistitem --template typescript` • ҎԼ `App.tsx` ͔Β `GoodsListItem` ΛݺͿͱ ͜Ζ·ͰΛ࡞Γ·͢
10. 雑に react-app-env.d.ts で
 型定義
11. 雑に App.tsx をいじる
12. 雑に GoodsListItem.tsx を
 作る
13. タイトルを表示するだけの
 商品リストができた！
14. タイトルを表示するだけの
 商品リストができた！ • λΠτϧ͚ͩදࣔͰ͖ͨʂ • ଞཁૉ΋ಉ༷ʹܕఆٛͯ͠ड͚౉͠ʢཁૉΛ ૿΍͚ͩ͢Ͱ֓Ͷ༧૝Ͱ͖ΔͷͰলུʣ • `title` ͷଞʹ `price`, `description`, `sellingPoints` ͋ͨΓΛ࡞͓͖ͬͯ·͢
16. 要望:「商品詳細の部分を
 モーダルウィンドウにしたい！」 • HTML Ͱ͸ `class="detail"` ͷ෦෼ • ίϯϙʔωϯτͰ͸ `sellingPoints` ͋ͨΓͷ෦ ෼ • ࣮ࡍʹ͸΋ͬͱͨ͘͞ΜͷཁૉΛදࣔͨ͠ Γɺ HTML ΋൥ࡶͩͬͨΓ͢Δ
17. ここで実装中に問題が起きる • CSS ͚ͩͰؤுΓ͖Εͳ͍έʔε͕ग़ͯ͘Δ • DOM ͷॏͳΓॱ΍ `z-index` ͷ݉Ͷ߹͍ͳͲ ͷؔ܎্ɺϞʔμϧ΢Οϯυ΢ͷίϯςϯπ ͸ `body` ͷด͡λάͷ௚લʹ࣋ͬͯ͘Δඞཁ ͕ग़͖ͯͨ
18. でもコンポーネントが
 間違ってるわけじゃない • ݟͨ໨΍ৼΔ෣͍͕มΘ͖͚ͬͯͨͩͰɺߏ଄ʹ มԽ͕ى͖ͯΔΘ͚Ͱ͸ͳ͍ • Ϟʔμϧʹݟ͍ͤͨɺϞʔυΛ੾Γସ͑ͯݟͤͨ ͍ɺͭ·Γݟͨ໨΍ৼΔ෣͍ͷ࿩ • ݟͨ໨΍ৼΔ෣͍͸ CSS / JavaScript ͷ࿩ • ߏ଄͸ HTML ͷ࿩
19. 問題の本質はこのあたり • ߏ଄ͱͯ͠͸ͦͷ··͕ྑ͍ ʢϦετ͕ϦετΞΠςϜΛ͍࣋ͬͯΔʣ • Ͱ΋ HTML Λม͑͟ΔΛಘͳ͍ • ίϯϙʔωϯτͷ֎ଆʹίϯϙʔωϯτͷ ཁૉΛ࣋ͬͯ͘Δඞཁ͕͋Δ
20. さてどうしよう？
21. 解決案:
 モーダルウィンドウ用のコンポーネ ントを作り、データを渡す • `body` ͷด͡λάͷखલʹ༧ΊϞʔμϧ΢Ο ϯυ΢දࣔ༻ίϯϙʔωϯτΛ࡞Δ • ϦετΞΠςϜͷԿΒ͔ͷ action ʹΑΓɺ Ϟʔμϧ΢Οϯυ΢දࣔ༻ίϯϙʔωϯτʹ ඞཁͳσʔλΛ౉͢
22. 確かに一定解決するが・・・ • ෳࡶʹͳΓ΍͍͢ • ݟͨ໨΍ৼΔ෣͍Λม͔͚͑ͨͬͨͩͳͷ ʹɺػೳ͕૿͍͑ͯΔײɾɾɾ
23. 奥様、createPortal ですよ！
24. 奥様、createPortal ですよ！ • React v16.0 Ͱೖͬͨϙʔλϧͱ͍͏ػೳ • `ReactDOM.createPortal(child, container)` • ୈ1Ҿ਺ͷදࣔཁૉΛɺୈ2Ҿ਺ͷ৔ॴʹදࣔ͢Δɺͱ͍͏ ·͞ʹઌͷ໰୊Λղܾ͢ΔͨΊͷ࢓૊Έ • Vue.js ʹ΋ `PortalVue` ͱ͍͏αʔυύʔςΟ੡ͷ ϓϥάΠϯ͕͋Δ
25. 解決案: createPortal を使う • `createPortal` Λ࢖ͬͯϞʔμϧ΢Οϯυ΢ʹ ͍ͨ͠෦෼ͷΈΛίϯϙʔωϯτͷ֎ଆʹग़ ͢ • ෼͔Γ΍͢͞ͷͨΊʹίϯϙʔωϯτΛ ෼ׂ͢Δ
26. react-app-env.d.ts で
 雑に型定義
27. App.tsx に追記する (1)
28. App.tsx に追記する (2)
29. GoodsListItem.tsx を
 書き直す (1)
30. GoodsListItem.tsx を
 書き直す (2)
31. 表示してどーん
32. 表示してどーん
33. 表示してどーん • ϦετΞΠςϜ `ul > li` ͕Ұ௨Γඳը͞Εͨޙʹ `<div class=“details” />` ͕ඳը͞Ε͍ͯΔ • createPortal Ͱ෼ׂͨ͠෦෼͚͕ͩ `body` ͷด͡λάͷ௚લʹग़ྗ͞ΕͯΔ • ελΠϧ͋ͯͯɺදࣔ੾Γସ͑ͱ͔ೖΕͨΒɺ ޙ͸Կͱ͔ͳΓͦ͏ʢͳͷͰུʣ
35. リストとリストアイテムの
 関係性はそのままですっきり！ • Ϟʔμϧ΢Οϯυ΢දࣔ༻ͷίϯϙʔωϯτ Λ࡞Δํ๏ΑΓ΋͖ͬ͢Γͯ͠Δ • ΋ͪΖΜϞʔμϧ΢Οϯυ΢Ҏ֎ʹ΋ɺҰ࣌ తʹίϯϙʔωϯτ֎ʹཁૉΛग़͍ͨ͠ͱ͖ ʹ࢖͑Δ • ޙ͸΍ͬͯΈͯͶʂ
36. まとめ • createPortal ͸͍͍ͧ • ެࣜυΩϡϝϯτΛಡ΋͏ʂ • ݸਓϒϩάΛͨ·ʹॻ͘ͱ͖ɺ࠷ޙͷ·ͱΊ ͕͍ͭ΋ʮެࣜυΩϡϝϯτΛಡ΋͏ʯʹͳ Δ
37. Refs • https://reactjs.org/docs/portals.html • https://reactjs.org/blog/2017/09/26/react- v16.0.html
38. 時間が余ったら自己紹介 • @girigiribauer ͹͏͋ʔ͞Μͱݺ͹ΕΔ͜ͱ͕ଟ͍Ͱ͢ • TwentyFour ޷͖Ͱɺ DVD ϘοΫε΋͋Δ͠ϝοηϯδϟʔόοά ΋3୅΄Ͳ࢖͍௵ͨ͠ • ๻ͷ·ΘΓͰ೔ຊ൛ TwentyFour ͷ࿩୊͸ې۟ • ษڧձʹ͍ͭͯ • Nagoya Frontend User Group / ϑϩϯτΤϯυ΋͘΋͘ձ • ൃදܗࣜͷձΛଟ͘ͷਓʹἤ͍ͬͯΔ͕ɺͳ͔ͳ͔Ұॹʹ΍ͬͯ͘Εͳ͍໰୊ • ͓࢓ࣄʹ͍ͭͯ • ࡢ೥·ͰελʔτΞοϓͷ্ཱͪ͛ͱ͔ॾʑ΍ͬͯͨ • ·ͨϑϦʔϥϯεʹཱͪฦͬͨͷͰ͓ख఻͍ग़དྷͦ͏ͳͱ͜Ζ͋Ε͹ͥͻʂ