この記事について
この記事は、生成AIを活用した自動生成フローで作成しています。架空のデータとブラウザの操作を使って、p5.jsの用途、仕組み、失敗時の観察ポイントを学びます。実在のサービスや個人情報へのアクセスは行いません。
検証ステータス： 2026-10-30までの既存審査で、公式資料と保存済みDaily Codeの固定ソースを照合し、Node.js構文検査の結果を記録しています。ブラウザ実操作、描画、CDN応答は未検証です。画面の説明はコードからの期待値であり実測と区別します。
| 項目 | 内容 |
|---|---|
| 対象 | Chrome/Edge/Firefox等の現代的なブラウザ（実機互換性は未確認） |
| 使用ライブラリ | p5.js（教材内バージョン: 1.11.13） |
| 費用 | デモのソース自体に有料APIは不要。通信料金や利用条件は環境に依存 |
| データ | ページ内の架空データ。認証情報・位置情報・企業データ不要 |
| 学習操作 | クリックで魚を増やし、水族館の動きを見る |
なぜこの技術を試すのか
地図や漫画のような「画面を開くと何かが動く」教材は、コードと結果の距離が短いのが魅力です。p5.jsは、図形を描くことを入口にして変数・座標・繰り返し・イベントを学べるライブラリです。難しいゲームエンジンを使わず、HTMLと短いJavaScriptだけで画面上の魚を動かしてみます。魚は写真ではなく楕円と三角形の組み合わせで、最初は2匹。ボタンで増やしたり空にしたりすると、配列と画面の関係が見えるようになります。
動くサンプルを作るときは、見た目が動いたという事実だけで終わらず、「どの入力がどの変数を変え、どの処理が描画を更新したか」を区別する必要があります。今回の教材では、その変化を画面に明示します。実際のサービスへ取り込むときには、認証や保存の処理を別途設計してください。
まず試す：ライブデモと期待する結果
ライブデモを開くと濃い青の背景に二匹の魚が現れる想定です。追加ボタンを押した回数と、画面下部に出る匹数を比べてください。次に空にするボタンを押すと背景だけが残ります。このとき「魚が0匹」と表示されることが重要です。見えないだけなのか、実際に管理配列が空になったのかを区別できます。Canvas要素は画像ですが、魚の匹数のような状態はテキストとして出すとアクセシビリティにも有利です。
操作の前に確認すること：公開デモが開けない場合
公開デモは公開・動作未確認です。開けない場合は、固定コミットのHTML本体とJavaScript本体をそれぞれGitHubのRaw表示から取得し、index.htmlとapp.jsの名前で同じ新規フォルダへ保存します。READMEのあるweb/フォルダには実行用HTMLがないため、READMEだけでは動きません。
Python 3が使えるPCで、この2ファイルがあるフォルダを開きます。Windowsではフォルダのアドレス欄へ
powershellと入力すると、そのフォルダでPowerShellを開けます。Windowsなら
py -3 -m http.server 8000 --bind 127.0.0.1、Linux/macOSならpython3 -m http.server 8000 --bind 127.0.0.1を実行します。Pythonがない場合は別のローカルHTTPサーバーを利用してください。管理者権限は不要です。同じPCのブラウザで
http://127.0.0.1:8000/を開き、開発者ツールのConsoleとNetworkを確認します。初期の文字はREADY: JavaScriptを読み込み中、draw()まで進むとRUNNING: 魚 2匹になる設計です。RUNNINGだけではcanvasの実描画成功を証明できません。青い背景と2匹の魚の表示・移動を目視してください。魚を追加ボタンを1回押すと3匹、空にするを押すと0匹へ変わる設計です。上限は30匹です。数が変わらない場合はボタンのid（add/reset）とConsoleのエラーを確認します。終了時はサーバーを起動したターミナルでCtrl+Cを押します。
file://での直接表示は環境差があるため、HTTP配信を推奨します。HTMLはp5@1.11.13を第三者CDNから読み込むため、インターネット接続と組織の通信許可が必要です。魚の入力値を外部サーバーへ送信する処理はありませんが、CDN取得の通信自体は発生します。
仕組みの全体図
flowchart LR
A["入力やクリック"] --> B["イベントを受ける"]
B --> C["p5.js のAPI"]
C --> D["状態と描画を更新"]
D --> E["見た目と文字で確認"]
この図は学習用の概念図で、ブラウザ内部の実装やネットワーク通信の詳細を表したものではありません。ライブラリが何でも「操作がどの変数へ届くか」を追いかけることは共通です。
どう動いているのか：APIを読み解く
setupは原則最初の準備を一度だけ実行し、drawは描画を繰り返します。魚を表すオブジェクトはx、y、vという位置と速度の値を持ちます。drawでxをvだけ増減させ、次のフレームで別の場所へ描画すると「泳いでいる」ように見えます。translateやscaleを使うと、魚の部品を個別に計算しなくても、図形全体の表示位置や向きを変えられます。pushとpopで変換状態を保存・復元しないと、次の魚まで座標の変換が影響して思わぬ位置に現れます。
最小コードの読み方
function setup() { createCanvas(640, 350); }
function draw() { background(19, 62, 98); ellipse(80, 80, 53, 25); }
上記はAPIの要点を取り出した抜粋です。コピーして単独実行する完成ファイルではありません。動かすためのHTMLと実装一式はDaily Code側のREADME／デモファイルで確認してください。どの関数がHTML要素を選び、どの行が数値を更新するかを追い、既知の架空値で試します。
一条件だけ変更して比較する
実際のapp.jsの冒頭にはconst fish=[{x:50,y:80,v:1},{x:220,y:160,v:-1.5}];があります。まず1匹目のv:1だけをv:2に変更し、ブラウザを再読み込みして、1匹目の移動が速くなるか比較してください。魚の大きさと2匹目の速度は変更しません。実際のコードはdraw()ごとにf.x+=f.vと加算するため、これは1フレーム当たりの移動量であり、端末のフレームレートが変わっても同じ秒間速度になる保証はありません。
元のコードには、v<0の魚をscale(-1,1)で左右反転させる処理と、push() / pop()で変換を魚ごとに閉じる処理がすでにあります。追加で反転処理を書き足す必要はありません。比較後はv:1へ戻して再読み込みしてください。
比較の手順は、最初の値を記録し、一か所だけ変更して、結果が想定の部分に現れたかを確認することです。入力を一度にいくつも変更すると、何が影響したか分からなくなります。変更前へ戻す操作まで含めて検証してください。
失敗したときにどこを見るか
同じフレームで魚を何千匹も描き始めるとパフォーマンスが落ちます。サンプルは魚の上限を設けます。ブラウザのタブが背面にある間は描画が制限されることがあり、実時間の厳密なシミュレーターにはそのまま使えません。画面のサイズを変更する場合はcanvasの寸法と魚の折返し境界を連動させてください。p5.jsには大きなAPI変更があるため、この教材の使用版は1.x系へ固定し、後から2.x系へ更新するときは互換性を確認します。
| 観察した状態 | 切り分ける点 | 対応の例 |
|---|---|---|
| 画面が初期状態から変わらない | スクリプト取得・初期化・イベント登録 | Console / Network / scriptタグを確認 |
| 表示が変わるが意味が合わない | 入力値・配列・単位・更新対象 | 値を固定して一条件ずつ確認 |
| ボタンを押せない | セレクターとDOM生成順序 | idが一致するかHTMLを確認 |
| 一部の端末だけ動かない | ブラウザ機能、権限、CDN、性能 | 端末とバージョン、再現操作を記録 |
ブラウザ内でのエラーと公開Webサーバーの障害は別です。前者は開発者ツールのエラー内容、後者はHTTPレスポンスやアセットの配信条件から調べます。未知の失敗を成功と表現しないことが、技術メモの信頼性を高めます。
業務・学習への応用
展示、学習教材、イベント会場の動く案内、データに反応するイラストなどへ発展させられます。より実務寄りなら、クリックによる追加を運用イベントに置き換えることもできます。ただし、実際の運用データを公開ブラウザへ載せると情報漏えいにつながることがあります。まずは架空データだけで画面と状態の設計を固めてください。
導入前に決めること
読者へ公開するとき、表示したデータがどこから来るか、誰が変更できるか、画面へ残る情報の種類、ライブラリ更新時の確認項目を決めます。今回のデモにはログインもサーバー保存もありません。そこで運用機能を追加する前に、まず「想定どおり表示される最小部分」と「実務上の信頼性・権限・バックアップが必要な部分」を区別することを勧めます。第三者CDNは外部通信のため、企業ネットワークで許されるか事前確認が必要です。
別方式と比較する
| 方式 | 向く場面 | 注意点 |
|---|---|---|
| p5.js | クリックで魚を増やし、水族館の動きを見るなど目的に合う場面 | 依存ライブラリの更新・利用条件の管理が必要 |
| ブラウザ標準API | 小さな機能を自前で作る | 仕様や互換性を自分で確認する |
| 静的画像・表 | 操作を必要としない説明 | 状態の変化をその場で体験できない |
ライブラリは必要なときに選ぶ道具です。何を達成したいかと学習コストを合わせて比較します。「ライブラリを入れること」を目的にしない方が、小規模なページでは保守しやすくなります。
GitHubサンプル
ブログ本文は背景や考え方、Daily Codeは実行・改造するためのコード、という役割を分けています。外部サービスへ投稿・保存するAPIは含めません。
公式情報・一次情報
資料確認範囲： 2026-10-30にp5.js公式のsetup・draw・pushと固定コミットの実装を再確認。CDNの実応答や実ブラウザ描画は確認していません。
検証範囲の補足
Daily Codeの固定コミットと既存のNode.js構文検査結果を参照できます。ただし実ブラウザの画面表示、ライブラリCDNの応答、全端末での動作は未確認です。実際の動作は読者の環境でConsoleとNetworkを利用して確かめてください。
