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上で両立して使えます。
