p5.js環境選定

1 どんな構成にするか？

Webエディタでお手軽に開発も良いが、大きめのプロジェクトを作りたい場合はVSCodeで開発したいよね！ということで、環境構築についての忘備録。

どんな構成にするか？

p5.jsの開発環境をネットで探すと様々な構築方法が出てくる。

🙅テキストエディタ＋ブラウザ

環境構築とか大げさなこと言ってるけど、結局HTMLとJSファイルだけなんだからブラウザとテキストエディタで良いじゃん！という話もありますが、

Chromeを含む一般的なブラウザでは、セキュリティの都合で、通常のファイルシステムから別ファイルを読み込めません。…中略…仕方ないので、以前はjsファイルを編集するたびに、FTPでサーバに上げてチェックするという非効率なこともやっておりました。
p5.jsのスケッチがはかどるVisual Studio Codeの拡張機能4選＋α

ということらしいので却下

🥉Webエディタ

ページを開けばすぐ使えるのは良いが、個人的な音声ファイルとか画像ファイルをアップするのには、気が引けるので、今回は却下。

🥈VSCode:TypeScript + p5.js + Parce

VS Code & TypeScriptとp5.jsで始めるモダンなクリエイティブコーディング入門

Processing.py も VSCodeで開発する環境を作っていたのと、JavaScriptの後継を言われるTypeScriptを勉強もしたかったので、最有力候補だったけど、保留することに。

理由は

node.jsやParcelのインストールが必要になり、面倒なこと
教室の子供たちに用意する環境（Webエディタ=JavaScript）と言語が違ってしまうこと

ちなみに

Parcel（パーセル）はTypeScriptなどを使うためのコンパイラ環境などの構築を簡単にするためのモジュールバンドラ＋ローカルサーバーである。同様のバンドラで有名なwebpackなどは、設定ファイルの記述が必要で学習が大変。

ウェブ開発ではSass、TypeScriptなどの言語のコンパイルや、出力ファイルの最適化、ローカルサーバーの起動などさまざまな作業が求められます。現在は、それらの作業を自動化するwebpackやGulp.jsがよく使われています。

webpackにはwebpack.config.js、Gulp.jsにはgulpfile.jsという設定ファイルがそれぞれ必要で、両ツールともその使用方法を覚える学習コストがあります。

Parcelパーセルというツールを使うと、webpackやGulp.jsのような独自の設定ファイルを使うことなく、各種言語のコンパイルやバンドルができるようになります。バンドルとは、複数のファイルを1つにまとめることを指します。Parcelとは、設定ファイルが不要で高速なウェブアプリケーションのバンドルツール。次のようなことが可能です。
Parcel入門 – Sassの導入方法

詳しい環境構築方法はこちら

判明している問題点は（chatGPTより。未検証）

型の不一致 p5.jsはJavaScriptで書かれており、型の明示性が低いため、TypeScriptでコーディングすると型の不一致が生じる可能性があります。そのため、型の定義については、正確な知識が必要になります。
p5.jsの関数の使用方法 p5.jsには、非同期関数が含まれているため、コールバック関数を使用することが必要になる場合があります。また、p5.jsの関数の使用方法について、TypeScriptで書かれたドキュメントが限られている場合があります。
インストールと環境の設定 TypeScriptでp5.jsをコーディングする場合、p5.jsとTypeScriptの両方をインストールし、環境の設定を行う必要があります。これらの手順を正確に実行しなければ、問題が生じる可能性があります。
パフォーマンスの問題 TypeScriptは静的型付けを行うことにより、コンパイル時にエラーを見つけることができますが、その分、パフォーマンスが低下する可能性があります。特に、p5.jsのようなグラフィックスやアニメーションを扱う場合は、パフォーマンスに影響が出ることがあります。
p5.jsのグローバル変数 p5.jsにはグローバル変数が多数含まれています。これらの変数は、TypeScriptでは型のエラーを引き起こす可能性があります。これを解決するためには、p5.jsの関数内で使用される変数を明示的に宣言し、グローバル変数を避けることが必要です。
クラスの使用 TypeScriptでは、クラスを使用することができますが、p5.jsにはクラスを使用する関数が含まれているため、衝突する可能性があります。これを解決するためには、p5.jsの関数を使用する場合はクラスを避け、代わりに関数を使用することが必要です。
モジュールの使用 TypeScriptでは、モジュールを使用してコードを整理することができます。しかし、p5.jsはグローバル名前空間に多数の関数を公開するため、TypeScriptのモジュールと衝突する可能性があります。これを解決するためには、p5.jsの関数を使用する場合はモジュールを避け、グローバル名前空間でコードを書くことが必要です。

🥇VSCode:JavaScript + p5.js + Live Preview

p5.js プログラミング環境の構築

TypeScriptが良かったけど、シンプルにJavaScriptで構築することに。プレビュー用プラグインは昔からのLive Serverと、マイクロソフト謹製のLive Previewがある。ローカルサーバーを自動的に起動して、そこにプレビュー表示をしてくれる便利なプラグイン。今回はMicrosoft謹製のLive Previewを採用。両プラグインの違いはVS Codeのライブプレビュー拡張機能 Live Previewが超便利を参考に。