Cursor or Visual Studioc Code(VSCode）で、p5.jsをコーディングする開発環境の作り方。
p5.jsは、"p5.js Web Editor"でコーディングするのが定番ですが、VSCodeでコーディングした方が断然便利ですので、こちらで進めてみます。今回は、JavaScriptを使ったとてもVanila（デフォルト、プレーン）な環境をつくります。
拡張機能
p5.jsをコーディングするのに便利な機能拡張をインストールします
定番 の拡張機能
- Live Server
- HTMLとJSを自動的にリロード（ホットリロード）してくれて、更新を確認しやすくなります
- Prettier - Code formatter
- コードを自動的に整形。きれいなコードを保てます
for p5.js
いくつかp5.js向けの機能拡張がありますが、ここではこちらの3点を紹介します。どちらかをインストール。
- p5.vscode
- DL数が一番多い。TypeScript使用時、オートコンプリート機能が使える。サードパーティーのライブラリを選択してインストールすることも可能。
- P5 Snippets and Tools
- スニペットが充実している。また、TypeScript使用時、オートコンプリート機能が使える。 - p5js Snippets
- 主にスニペットのみ。
新規作成（テンプレート）
CDNのp5.jsライブラリを利用する
CDNからライブラリをロードするため、オンラインの必要があります。
ディレクトリ構造
シンプルなファイル構成です
├── index.html
└── sketch.js
sketch.jsにスケッチのコードを記述します
index.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
<script src="sketch.js"></script>
<title>P5.js Project</title>
</head>
<body>
<main>
</main>
</body>
</html>
sketch.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}
p5.jsライブラリをローカルで利用する
テンプレートから
機能拡張を使って、テンプレートから新規作成できます。
コマンドパレット（command + shift + P)を開いて、p5.vscodeの場合はCreate p5.js Projectを選択。
ディレクトリ構造
次のようなディレクトリとファイルが生成されます
.
├── index.html
├── jsconfig.json
├── libraries
│ ├── p5.min.js
│ └── p5.sound.min.js
├── sketch.js
└── style.css
sketch.jsにスケッチのコードを記述します
index.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
<script src="sketch.js"></script>
<title>P5.js Project</title>
</head>
<body>
<main>
</main>
</body>
</html>
sketch.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}
プレビュー
インストールしたLive Serverを使うと、sketch.jsやindex.htmlの更新（上書き保存）結果を自動的にリロード（ホットリロード）しながら確認することができます。
ウィンドウ右下が赤枠の様な表示だった場合は、サーバーが起動していないので、起動します。
赤枠をクリックするとサーバーの起動が始まります。
このようにGo Liveと表示されたらサーバー起動が成功です。
次に、エディタのExplorer（ウィンドウ左端にあるファイルの一覧）から、確認したいindex.htmlを選択し、右クリックして、Open with Live Serverを選択します。
ブラウザの新規タブもしくは新規ウィンドウに、選択したファイルが表示されます。エディタに戻って、編集して上書き保存すると、自動的にブラウザも更新されます。
コーディング時は、エディタとブラウザを左右に並べて表示すると、更新内容を確認しながらコーディングができて便利です。