p5.js × JavaScript基礎 単元サンプル

p5.js で JavaScript の基礎を体験できる全15単元のサンプル集です。学びたい単元を選び、ブラウザで直接実行しながらコードを編集してください。

01

setup() / draw()

p5.js スケッチの基本構造と最小のアニメーション。

ソースコードを見る
02

変数と代入

let / const の使い分けと変数操作の基礎を確認。

ソースコードを見る
03

データ型とテンプレート文字列

Number / String / Boolean と文字列の組み立て。

ソースコードを見る
04

演算子

算術・比較・論理演算を可視化しながら学習。

ソースコードを見る
05

条件分岐

if / else による条件分岐と状態管理の導入。

ソースコードを見る
06

繰り返し

for / while ループでパターンや配列処理を作成。

ソースコードを見る
07

関数

引数・戻り値を使った関数設計と再利用。

ソースコードを見る
08

配列

push / shift とループを組み合わせたデータ処理。

ソースコードを見る
09

オブジェクト

連想配列的なオブジェクトで複合データを扱う。

ソースコードを見る
10

イベント

マウス・キーボードイベントを使ったインタラクション。

ソースコードを見る
11

乱数とノイズ

random / noise を応用した自然なパターン生成。

ソースコードを見る
12

p5.dom

スライダーなどの UI 要素を組み合わせた操作。

ソースコードを見る
13

画像の取り扱い

loadImage / image で画像を読み込み自由に描画。

ソースコードを見る
14

状態をもつアニメーション

状態変数を使いアニメーションの振る舞いを制御。

ソースコードを見る
15

モジュール化

util.js を分割し ES モジュールで機能を整理。