この記事では、これからp5.jsでクリエイティブコーディングを始めたい方に向けて、事前に知っておくとよいJavaScriptの前提知識をお伝えします。p5.jsは初心者にもやさしいライブラリですが、スムーズに楽しむためには最低限のJavaScriptの基礎を知っておくと安心です。ぜひ参考にしてください。
まず押さえておきたいJavaScriptの基礎
変数とデータ型
- 変数の宣言（let, const, var）
- データ型（数値、文字列、配列、オブジェクトなど）
p5.jsでも、図形の位置や色、動きなどを変数で管理します。基本的な変数の使い方は必須です。
制御構文
- 条件分岐（if文、switch文）
- 繰り返し処理（for文、while文）
たとえば「マウスが押されたら色を変える」といった処理に使います。
関数の定義と呼び出し
- functionによる関数の作り方
- アロー関数（=>）の基本
p5.jsではsetup()やdraw()など、特別な関数を使います。自分で関数を作る場面も多いので、関数の基本はしっかり押さえたいところです。
配列やオブジェクトの基本操作
- 配列の作成、要素の追加・取得
- オブジェクトのプロパティへのアクセス
複数の図形やデータをまとめて扱いたいときに便利です。
基本的なエラーの読み方
- コンソールのエラーメッセージの意味を理解する
- 簡単なデバッグができる
エラーが出ても慌てず、どこが間違っているか探せるようになると上達が早いです。
HTMLとJavaScriptの連携
- HTMLファイルにJavaScriptファイルを読み込む方法
p5.jsはブラウザ上で動かすので、HTMLとJavaScriptの関係も知っておくと安心です。
p5.js特有のポイント
setup()とdraw()という関数が自動的に呼び出されるcreateCanvas()やellipse()など、p5.js独自の関数をJavaScriptの文法で使う- p5.jsはJavaScriptのライブラリであるため、JavaScriptの文法をそのまま使える
まとめ：まずはJavaScriptの入門レベルを身につける
p5.jsは、難しい知識がなくても始められるのが魅力です。しかし、変数・関数・制御構文・配列・オブジェクトなどの基礎が分かっていると、より自由に作品を作れるようになります。
「JavaScriptの入門書やチュートリアルを一通りやったことがある」くらいの知識があれば、p5.jsの世界にすぐ飛び込めます。ぜひ、基本を押さえてからp5.jsでクリエイティブコーディングを楽しんでください。
