1.Visual Studio Codeのインストール
Visual Studio CodeはMicrosoft社が提供する開発者向けテキストエディタ。汎用的にテキストエディタとしても使用できますが、開発に便利な機能や拡張機能が豊富であるため、p5jsのコーディングにも最適です。拡張機能によってはローカルでサーバーレスな開発も可能となります。

3.サンプルファイルの入手
全ての拡張機能が追加できたら、下記のサンプルファイルをダウンロードして展開します。(展開とは圧縮されたファイルを元に戻すことです)

macOSの場合はダブルクリックで解凍

Windowsの場合はファイルを選択した状態で「すべて展開」を選択
4.サンプルファイルを開く
展開したフォルダ「01_helloworld」をVisual Studio Codeで開きます。ファイル単体ではなくフォルダを開くというのがポイントですので注意してください。

macOS:ファイル>開く

macOSの場合、フォルダをアプリアイコンにドロップでも開けます。

Windowsの場合:ファイル>Open Folder…
5.実行テスト
右のリストの手順に従って実行テストを行ってください。拡張機能「Live Server」の機能をONにし、入力されたソースコードをリアルタイムで確認することができるようになります。ソースコードを変更して保存するとブラウザの画面も反映されます。
- Visual Studio Codeのエクスプローラーパネルでmain.jsを選択
- ウィンドウ下部にある「Go Live」をクリック
- Webブラウザ(Chrome)が起動し、実行結果が表示される
