こんにちは、lisです！
PCローカル上のp5.js開発環境開発についてご紹介します！
PCでの開発環境
VSCodeを使用して開発しています。
- VSCode
- SyncTrayzor(SyncThings)
VSCode拡張: Live Server
Live Serverのステキポイント
- インストール→実行だけで簡単にプレビュー！
- ホットリロードしてくれるのでガシガシコーディングできる！
- 開発者ツールも開けるので、ログやエラーも簡単に見れる！
公式がアナウンスしている方法だと、node.jsのnpmパッケージ「http-server」や「browser-sync」でサーバを起動してブラウザでプレビューできます。
しかし！Live Serverを使用すれば、拡張のインストールと実行をするだけで簡単にプレビューできちゃいます！
たったこれだけ
- コマンドパレット*1を開く
- 「> Live Preview: Start Server」を選択
あとはガシガシコーディングです！
開発者ツールは、プレビュー画面のメニューから「Open Devtool Panel」で開けます。
Chromeの開発者ツールと同じなので、触ったことある人はすぐに分かると思います。
とりあえず「Consoleタブ」を開いていれば、ログやエラーはチェックできます！
プレビューを終了したいときは、起動時同様コマンドパレットから「> Live Preview: Stop Server」で終了できます。
VSCode拡張: p5js Snippets
p5js Snippetsはまだ入れたばかりですが、提示されるスニペットを使えばコーディングが少し楽できそうです。
ただ結構汎用性高くスニペットが作られているので
- 「2DだからZ座標のとこいらんなぁ」
- 「この文字列反応するのか(邪魔)」
とか思うときもあります。
リファレンスを見る回数を減らせているのも確かなので、どちらをとるかですね。
ぼくはひとまず使い続ける方針で進めています。
SyncTrayzorで同期
SyncTrayzorは、Syncthingsという同期ツールのWindows版です。
「スマホと同期して、外出時とかに続きをコーディングしたりテストしたりできないかな……」
と調べた結果、このツールを使っています。
スマホではTermux上で、Syncthingsをインストールして同期しています。
あとがき
p5.js用PCローカル環境構築でした！
こちらのサイトで作品をアップしているのでよろしければ御覧くださいまし。
*1:F1またはCtrl+Shift+P
