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

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

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

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

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を選択します。

ブラウザの新規タブもしくは新規ウィンドウに、選択したファイルが表示されます。エディタに戻って、編集して上書き保存すると、自動的にブラウザも更新されます。

コーディング時は、エディタとブラウザを左右に並べて表示すると、更新内容を確認しながらコーディングができて便利です。