試行錯誤プログラマの
メモランダム

トライ&エラーと対策方法の技術まとめ

【p5.js】Reactとp5.jsでキャンバスが2つできてしまう解決法

p5.js および Reactで実装している際に「なぜかキャンバスが2つできてしまう!」 って問題に出くわした時の対応についてです。

もちろん、実装時にはcreateCanvasを複数回呼び出すような記述はしていません。。。

原因

原因としてはデバッグ用の機能であるReactのStrictModeによる影響であることが判明しました。

App最上位の方で <React.StrictMode> のタグを使用している箇所があるのではないでしょうか。

StrictMode とは、componentWillMountなど非推奨の処理を発見しやすくするための機能です

StrictModeではあえて、「コンポーネントを生成⇛破棄⇛再生成」といったことを行いライフサイクルに問題ないかを確認しやすくしてくれます。

StrictModeはDEV環境のみ有効なので、buildなどしてしまえば勝手にOFFになります。なので、p5のキャンバスが2つできてしまう問題も、実はDEV環境のみで発生する問題でした。

対応方法

上記に書いた通りDEV環境だけなのでまあ問題はないんですが、取れる解決策を書いておきます。

React.StrictMode のタグを消す

シンプルですね。

一通りプロジェクト全体の確認が終わったら <React.StrictMode> のタグは消してしまって問題ありません。

Kiyama
Kiyama

簡単に解決できるので、基本的にこちらの方法がいいと思います

p5オブジェクト生成時、useEffectのアンマウント処理にremoveを記載

こちらは結構気をつけることがあります。

react-p5などラッパーライブラリを使用している場合、この対応はできない。

単純に、react-p5などではp5オブジェクト生成もライブラリでやってくれてるので、こちらでカスタムができない ってことになります。

普通にp5.js単体で使ってる場合、こちらも解決策の一つになります。実際の実装例に関しては、こちらのリンク先にあるのでどうぞ。


p5.jsをコンポーネント設計のReactで使うと、ちょっと癖がありますよね。

ただ上手く使えば、CSSなどで頑張るより複雑で面白いアニメーションを使えるので、是非慣れておきたいですね!

Kiyama
Kiyama

他にもp5.jsの記事を書いていくので、また来てくださいね