Visual Studio Code（VSCode）の環境設定

このセクションでは、p5.js を使ってプログラミングを始めるために必要な VSCode の設定について説明します。VSCode は既にインストールされている前提で進めます。

1. プラグインのインストール

VSCode で p5.js を効果的に使用するために、以下のプラグインをインストールします。プラグインは VSCode の拡張機能マーケットプレイスからインストールできます。

プラグインのインストール方法は以下の画像を参照してください。

Code Runner プラグインを使用するためには、Node.js をインストールする必要があります。以下の手順に従って Node.js をインストールしてください。

Node.js の公式サイトにアクセスし、インストーラーをダウンロードします。
ダウンロードフォルダに移動し、node-v20.14.0-arm64.msiという名前のファイルをダブルクリックして、インストーラーを起動します。指示に従ってインストールを進めましょう。
インストールが完了したら、VSCode を再起動します。

VSCode のユーザー設定を調整して、より快適にコーディングができるようにします。以下の設定を User Settings.json に追加します。

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 4,
    "prettier.tabWidth": 4
}

まず、p5.js のプロジェクト用にフォルダを作成します。以下の手順に従って、フォルダを作成してください。

フォルダ構造は次のようになります：

|- students
  |- p5js

p5jsフォルダを vscode で開きます。vscode を開いた状態で、Ctrl + Kを押してからCtrl + Oを押し、p5jsフォルダを選択して開きます。

これまでの手順をすべて済ませて、現在 VSCode でp5jsフォルダを開いている前提で進めます。これから説明する「p5.js プロジェクトの作成」と「p5.js のライブプレビューを表示」は、今後プロジェクトを作成するたびに実行する手順なので、しっかりと覚えておきましょう。

Ctrl + Shift + Pでコマンドパレットを開きます。
Create a standard p5.js projectと入力します（実際はcreateくらいまで入力すると、候補にコマンドが出現します）。Enter キーでコマンドを選択します。
Do you want to create a new directory?にはYesを選択します。
次の入力フォームには01_first_sketchとし、新規フォルダ名を設定します。
最後のDo you want to use a local or a hosted version?ではHostedを選択し、p5.js の新規プロジェクトの作成を完了させます。

これで01_first_sketchというフォルダが追加されます。VSCode の左のフォルダパネルに01.firstSketchという名前のフォルダが表示されていることを確認しましょう。

01_first_sketchフォルダをクリックし、中身のsketch.jsをクリックしてコードを開きます。

次に、先ほど同様Ctrl + Shift + Pを入力して開いたコマンドパレットに、今度はOpen live p5 panelと入力し、Enter キーを押してコマンドを選択します。すると右パネルに p5.js のライブビューが表示されます。

試しに、sketch.jsのコードのbackground(220)と書かれた行を、background(255, 0, 0)に変更してみましょう。右パネルの表示が赤くなったら成功です！

おめでとうございます！これで、ゲームやアニメーション、インタラクティブなアートなど、あなたが思い描くものを形にするためのツールはすべて揃いました。次の章からは、p5.js の基本的な機能を学んでいきましょう！