React Portalを用いてDeleteモーダルを作成しよう!

React

今回のゴール

Image from Gyazo
とんぺい
とんぺい

師匠こんにちは!

CRUDアプリの続きを勉強しにきたブゥ!

師匠
師匠

やぁ、とんぺいくん。

前回は、Itemを編集する機能を実装したね。今回は、Itemを削除する機能を実装しよう。

とんぺい
とんぺい

了解だブゥ。

今回は、どんなディレクトリ構成になるんだブゥ?

ディレクトリ構成

師匠
師匠

今回のディレクトリ構成はこの様になるよ。

修正が必要なファイルや、追加するファイルを事前に確認しておこう。

とんぺい
とんぺい

了解しました!

実装準備は万端だブゥ!

師匠
師匠

では、今回のKey Pointの説明に進もう。

今回のKey point

師匠
師匠

今回はReact Portalを用いて、Deleteモーダルを作成しようと考えているのだが、とんぺいくんはReact Portalについて何か知っていることはあるかい?

とんぺい
とんぺい

React Portal….

初めて聞いた言葉だブゥ!!

説明をお願いします!

師匠
師匠

React Portalを使うことで、子コンポーネントを親要素のDOM階層の外にレンダリングすることが可能になるんだよ。モーダルを作成する際に利用することで、ルート要素の直下にモーダルを置かなくても、子要素の中で通常のコンポーネントと同様に扱うことができるんだ。

とんぺい
とんぺい

ほぅほぅ。

React Portalを使うことで、親要素の下にモーダルを作成しなくても良くなるといったことはわかったブゥ。

でも、なんで親要素の下にモーダルがあったら駄目なんだブゥ?

師匠
師匠

良い質問だ。では、図解を交えてその理由を説明していこう。

まず、モーダルを表示する場合には、下図のようにモーダルがページの一番前面に出てくる必要があるね。

とんぺい
とんぺい

うんうん。

色んなサービスではモーダルを表示させるときはこんな感じになっているブゥね!

師匠
師匠

どの画面を前面に出すかはz-indexというcssプロパティで記述することができるのは知っているよね。このようなDOMの階層とz-indexの指定があれば今回の様に、モーダル画面が前面に出てくるようになるよ。

とんぺい
とんぺい

z-indexは聞いたことがあるブゥ!

z-indexが大きいほうが、画面の前面に出てくるんだブゥね!

師匠
師匠

しかし、DOMの階層が以下のように変わってしまうと、モーダルのz-indexを大きくしても、モーダルが画面の前面に出て来ないんだ。

とんぺい
とんぺい

これは、z-indexが同じ階層のDOM同士でしか比較されないからだブゥね!だから、モーダルのz-indexがサイドバーより大きくても、サイドバーが画面の前面に出てきてしまうブゥ!

師匠
師匠

その通り。この様に、モーダルを他のコンポーネントの下に配置した際に、コードの管理が甘いと、モーダルが正しく前面に出てこないといったバグが発生してしまうよ。

とんぺい
とんぺい

なるほど、なるほど。

それを回避するための、React Portalということだブゥね!

師匠
師匠

そうだね。React Portalを使う場合と、使わない場合のDOMの構成の違いを下図に示すので、確認しておこう。

とんぺい
とんぺい

なるほど!

# rootとは別に# modalを作成して、そこにモーダルを配置することで、どんなに複雑なDOMの階層になっても、React Portalを使えばモーダルが画面の前面に表示されるってことだブゥね!

師匠
師匠

うむ。では、React Portalを使う意味が理解できたところで、早速実装に進んでいこう。

実装しよう

actions/index.js

師匠
師匠

まずは、DBからItemを削除するためのAction creatorを作成しよう。

削除が完了した際に、TOPページに自動的に遷移できるようにhistoryを記述することを忘れないように。

components/Modal.js

師匠
師匠

今日のメインとなるReact Portalを使って、モーダルを作成しよう。

ReactDOM.createPortal(,)を使用することで、React Portalを作成できるよ。

public/index.html

師匠
師匠

そして、rootとは別にid=modalとしたdivを用意することで、上図に示した通りのDOMの階層を作り、その下にモーダルを配置することができるよ。

conponents/items/ItemDelete.js

師匠
師匠

次に、削除モーダルの中身を記述していこう。先程作成したモーダルコンポーネントに、必要な文言と、Action creatorをもたせたボタンを渡してあげることで、ユーザがItemの削除処理を行えるようになるよ、

components/items/ItemList.js

師匠
師匠

ここでは、前回のItem編集機能を実装したときと同じ様に、Item削除モーダルを表示するページヘ遷移させるために、LinkコンポーネントでDeleteを囲もう。

components/App.js

師匠
師匠

最後に、RouteのpathにどのItemが削除されるのかを識別するためのidを追加できるようにしよう。

pathに変数を追加するときはを使用するんだったね。

まとめ

とんぺい
とんぺい

うん。無事に今回のゴールに示した動作を実現することができたブゥ!

師匠
師匠

それはよかった。

これで、基本的なCRUDアプリケーションの作成は終了だよ。

最終的なコードをGithubにも載せておくので、確認しておくように。

とんぺい
とんぺい

色々と新しいことを習ったから、家に帰ったら、もう一回自分でこのアプリを作成して見るブゥ!

師匠
師匠

うん。それがいいね。

このCRUDアプリには、Reactを用いてアプリケーションを作成する上での基礎が詰まっているので、まずはこのアプリケーションを理解できるようになろう。

とんぺい
とんぺい

承知しました!

今日も本当にありがとうございましただブゥ!

また次回もよろしくおねがいします。

師匠
師匠

勉強したくなったら、またいつでもおいで。

次回は、ReactのHooksについて学んでいこう。

コメント

タイトルとURLをコピーしました