【初心者向け】Reactで生成したDOM要素を削除するには？

Reactは仮想DOMを生成できるのは良いのですが、「生成したDOMをReactの機能で削除したい」という風に頭を悩ませている方もいるのではないでしょうか。そこで今回は、Reactで生成したDOM要素の削除方法について解説していきます。

Reactの機能でDOMを削除することはできない

タイトル詐欺のようでアレですが、

そもそもReactにはDOMを削除できるような関数などは存在していません（今後追加される可能性はありますが）。

Reactはあくまでも仮想DOM要素を生成・追加し、それらをコンポーネントのstateで操作できるのが強みなので、DOM削除をわざわざサポートする必要があるか、と言われると何とも言えないところ。

ただ、componentWillUnmount()という関数が用意されているところを見ると、一応DOM削除にも対応した関数が開発される可能性はあるかもしれません。

公式リファレンス

jQueryを使ってDOMを削除する

仮想DOMやらコンポーネントやら色々言ってますが、要はDOM要素を追加しているだけなので、DOM操作の手法を応用すれば簡単に生成したDOM要素を削除できます。

標準のJavaScriptを用いて削除することも可能ですが、コードを簡略化するためにもjQueryと組み合わせてDOMを削除してみましょう。

<div id="container">
    <!-- DOM要素を追加 -->
</div>

<p id="unmount-msg" style="color: red; font-size: 20px">
    <!-- ここに「削除完了」を表示 -->
</p>

<button type="button">削除</button>

class Box extends React.Component{
    // 削除後に実行されてほしい処理
    componentWillUnmount(){
        $("#unmount-msg").text("削除完了");
    }

    // 描画
    render(){
        return(
            <div id="box" style={{width: "150px", height: "150px", background: "black"}}></div>
        );
    }
}

$(()=>{
    // DOM要素を追加
    ReactDOM.render(
        <Box />,
        $("#container")[0]
    );

    // clickイベント
    $(document).on("click", "button", ()=>{
        // buttonが押されれば追加されたDOM要素を削除
        $("#box").remove();
    });
});

上記のコードを実行した結果が、以下のGIFです。

jQueryのclickイベントと連動して、Reactで追加したDOM要素が消えています。

コンポーネントごと消える点は注意

気づいた方もいると思いますが、実は上記のコードでは関数componentWillUnmount()を実装しています。

この部分ですね。

// 削除後に実行されてほしい処理
componentWillUnmount(){
    $("#unmount-msg").text("削除完了");
}

HTMLに事前に設置しておいたunmount-msgというIDの要素に削除完了と表示させたいところですが、追加したDOM要素が消えてもこの関数は実行されません。

これは、DOMを削除したことでコンポーネントが消えており（正確には管理している仮想DOMが無理やり消されている）、componentWillUnmountという関数など諸々全て対応しなくなってしまったのが要因です。

要素を削除することはできましたが、Reactを扱うという視点で言うと少々力業のような形になってしまいます。

ReactでDOM要素を削除する方法も無くはない

冒頭で「Reactで要素を削除する方法はない」と言い切ってしまいましたが、DOM要素を削除するような物理的な方法でなく、仮想DOMの一部を非表示にするという方法であれば、疑似的にDOM要素の削除処理をReactで実装することもできます。

最も手っ取り早いのが、三項演算子などを用いてDOM要素の表示・非表示を切り替える方法です。

三項演算子とは、以下のような記法で処理を条件分岐させる手法を指します。

条件式 ? trueだった場合の処理 : falseだった場合の処理;

/* ▼ 下記のif文と同じ */
if(条件式){
    // trueだった場合の処理;
}else{
    // falseだった場合の処理;
}

基本的にはif文と用途が似ていますが、if文と違い、return文の中で値の条件分岐にも応用できるのが強みです。

三項演算子について、
詳しくはMDNの公式リファレンスで確認してください。

この三項演算子を使って要素の表示・非表示を行うため、前述したBoxというクラスの中身を以下のコードに置き換えてみます。

class Box extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            mounted: true,
            buttonText: "削除"
        }
    }

    // ボタンのクリックイベント
    clickButton = ()=>{
        // stateの中にある真理値mountedによって、stateの値を更新
        this.state.mounted ? this.setState({mounted: false, buttonText: "再表示"}) : this.setState({mounted: true, buttonText: "削除"});
    }

    // 描画
    render(){
        return(
            <div>
                // this.state.mountedの値によって表示と非表示を切り替える
                { this.state.mounted ? <div id="box" style={{width: "150px", height: "150px", background: "black"}}></div> : "" }
                <button type="button" onClick={this.clickButton}>{this.state.buttonText}</button>
            </div>
        );
    }
}

// 元々あったclickイベントの記述は削除してください。

stateの説明については省きますが、上記のコードを実装すると、jQuery等で要素を削除せずとも、以下のような形でDOM要素を表示（生成）したり、非表示（削除）したりすることが可能です。

jQueryで無理やり削除する場合と違い、削除した要素を簡単に再表示できるのが良いですね。

まとめ

JavaScriptやjQueryを扱うことで、Reactで生成したDOMも削除することが可能です。Reactによるコンポーネントの管理を徹底していれば、三項演算子等を用いて要素の生成・削除機能を再現することもできます。

上級者を目指すなら、三項演算子を効果的に活用できるよう、Reactをしっかりと活用していくのがおすすめです。