p5.js および Reactで実装している際に「なぜかキャンバスが2つできてしまう!」 って問題に出くわした時の対応についてです。
もちろん、実装時にはcreateCanvasを複数回呼び出すような記述はしていません。。。
原因としてはデバッグ用の機能であるReactのStrictModeによる影響であることが判明しました。
App最上位の方で <React.StrictMode>
のタグを使用している箇所があるのではないでしょうか。
StrictMode とは、componentWillMountなど非推奨の処理を発見しやすくするための機能です
StrictModeではあえて、「コンポーネントを生成⇛破棄⇛再生成」といったことを行いライフサイクルに問題ないかを確認しやすくしてくれます。
StrictModeはDEV環境のみ有効なので、buildなどしてしまえば勝手にOFFになります。なので、p5のキャンバスが2つできてしまう問題も、実はDEV環境のみで発生する問題でした。
上記に書いた通りDEV環境だけなのでまあ問題はないんですが、取れる解決策を書いておきます。
シンプルですね。
一通りプロジェクト全体の確認が終わったら <React.StrictMode> のタグは消してしまって問題ありません。
簡単に解決できるので、基本的にこちらの方法がいいと思います
こちらは結構気をつけることがあります。
react-p5などラッパーライブラリを使用している場合、この対応はできない。
単純に、react-p5などではp5オブジェクト生成もライブラリでやってくれてるので、こちらでカスタムができない ってことになります。
普通にp5.js単体で使ってる場合、こちらも解決策の一つになります。実際の実装例に関しては、こちらのリンク先にあるのでどうぞ。
p5.jsをコンポーネント設計のReactで使うと、ちょっと癖がありますよね。
ただ上手く使えば、CSSなどで頑張るより複雑で面白いアニメーションを使えるので、是非慣れておきたいですね!
他にもp5.jsの記事を書いていくので、また来てくださいね