p5.jsの開発環境の選択肢としては、OpenProcessingなどのweb上のエディタを使うか、自前で用意するかどちらかになると思います。自前で用意する場合、p5-managerという便利なライブラリがあり、基本的にはこのp5-managerを使って開発環境を整えれば、自分のエディタ上で開発できる上に、watch機能もあるのでソースを編集したらすぐにホットリロードされてかなり便利です。

Webサイトに組み込んでいきたい

このp5-managerの環境でもwebサイトを作れると思いますが、cssやes6でクラスを使って開発していくには物足りません。そこで、webpackとes6で開発できる環境を整えるために良さそうなのがこちらのGitHubにありました。クローンして使ってみたところ、問題なく使えたので、しばらくこれを使って開発していて、いざGitHubにアップしてみたら、GitHub上で以下の警告を受けました。

セキュリティの致命的な脆弱性が見つかったという警告ですが、どこが問題だったかというと、webpackのバージョンが古すぎるのが原因だそうです。

webpack4に対応した環境を試してみる

webpackについては概念程度の知識しかなかったので、これを機に勉強がてら最新バージョンのwebpack4に対応した環境を試してみました。構築の際に参考にしたサイトは本家のドキュメントです。そのほか、webpackについては様々な方の記事を参考にしました。

脆弱性のあったのリポジトリのwebpack.config.jsの構成を見ながら何が必要かを洗い出していくと、構成的には以下のような構成で、オプションにある項目をwebpackのドキュメントから参照してconfigファイルを作りました。

オプション	自分なりの解釈
entry	変換対象のjsファイル
output	変換したデータの出力先。webpackコマンドで出力される。
module	jsモジュール以外の処理やそのほかの依存依存関係を含む処理。ここではstyle-loaderなどのモジュールを使ってscssの処理をすぐに適用するように設定
devServer	開発用の設定。ポート番号と、watchするディレクトリの指定。
plugins	js以外のファイルの変換などを行う設定 assetsのデータのコピーとhtmlの書き出し。htmlはbundle.jsが読み込まれた状態で出力される。

エラーに悩まされる

webpackのサイトの設定通りにconfigに書いていっても、エラーに遭遇してなかなか開発環境が整えられませんでした。とくに、pluginsの設定で

Tapable.plugin is deprecated. Use new API on `.hooks` instead

こういうエラーが出たり

compilation.mainTemplate.applyPluginsWaterfall is not a function
    at /var/www/myproject/node_modules/html-webpack-plugin/lib/compiler.js:81:

こういうエラーが出たりで、なぜ本家と同じ設定なのにできないのだ。。。と意気消沈してましたが、html-webpack-pluginとcopy-webpack-pluginのバージョンを最新にしたらあっさり解消されました。脆弱性があったリポジトリのnpmパッケージそのまま使っていたのがアダになりました。。。

なんとか完成

まだまだ理解に苦しむところもありますが、なんとかwebpack4で開発できる環境が整えられました。これでp5.jsを使ってアニメーションを作っていけます。

GitHubに置いておくので良ければどうぞ。
p5.jsだけでなく、そのままCanvasのアニメーションを扱うコードも入っていますので、p5.jsとcanvasのcontextを使ったアニメーションも同じcanvas上で両立して使えます。