Canvasで花火を打ち上げる：クリックと粒子数で動きが変わるJavaScript入門

この記事について
この記事は、生成AIを活用した自動生成フローで作成しています。
Canvas APIとrequestAnimationFrameの公式資料を確認し、架空の花火をクリックで操作できる教材を用意しました。音・位置情報・個人情報は使いません。

検証ステータス：🧪 JavaScript構文確認済み・ブラウザ実表示未確認
2026年10月31日、保存したJavaScriptをV8で構文確認しました。GitHub Pagesへの反映、描画・クリック操作、端末ごとの挙動は未実測です。

まず試す：夜空に花火を打ち上げよう

🔷 操作してみよう
🎆 Canvas花火のライブデモを開く（公開反映・ブラウザ動作は未確認）
📘 ソースコードと詳しいREADME

操作は3つだけ。
1. 「花火を打つ」を押すか、夜空の好きな位置をクリック。
2. 「粒子数」を24個から48個へ変更してもう一度押す。
3. 「一時停止」「再開」「消去」を試す。

花火が広がると、下の状態欄に「花火 1 回目・粒子 24 個」のように回数と粒子数が出ます。粒子数を変えると、点の数が変わるはずです。これはコードから予測した結果であり、実ブラウザで確認した結果ではありません。

🟦 目で見えない場合も確認できる
描画と別に状態欄へ回数・粒子数を表示します。動きを減らすOS設定が有効なら、花火は静止表示になります。

なぜ点が広がるのか

CanvasはHTML内に用意する描画領域です。クリック位置を中心に、角度を少しずつ変えた点を配置します。それぞれの点は横方向の速度 vx と縦方向の速度 vy を持ち、次のフレームで座標が変わります。

flowchart LR
    A["クリック・ボタン"] --> B["粒子を生成"]
    B --> C["座標を更新"]
    C --> D["Canvasに描画"]
    D --> E["状態を文字で表示"]

大事なコードはこの4行

p.x += p.vx;
p.y += p.vy;
p.vy += 0.045; // 下向きに曲がる変化（教材用）
p.life = Math.max(0, p.life - 0.012);

p.x と p.y は粒子の位置です。vx と vy は1フレームごとの移動量で、life は透明度に使います。上の4行は仕組みの抜粋であり、単独で実行できる完成コードではありません。

ブラウザが描画のタイミングを知らせる requestAnimationFrame() を使い、粒子が残っている間だけ次の描画を予約します。停止時は cancelAnimationFrame() で予約を取り消します。

1か所変えて予想を比べる

🧪 実験：落ちる速さを変える
Daily CodeのJavaScript本体を開き、p.vy += 0.045 を p.vy += 0.09 に変更してみてください。下へ曲がる速度が増すと予想できます。

元の 0.045 に戻せば比較できます。これは現実の重力加速度の単位ではありません。

自分のPCで動かす

ライブデモが開けない場合は、固定コミットのHTMLとJavaScriptを同じフォルダに保存します。

HTMLをブラウザで開くか、必要ならそのフォルダで python3 -m http.server 8000 --bind 127.0.0.1 を起動し、同じPCの http://127.0.0.1:8000/ を開きます。終了はターミナルで Ctrl+C です。管理者権限、APIキー、追加のライブラリは必要ありません。

うまく動かないとき

⚠️ 安全とアクセシビリティ
音や高速点滅を使わず、停止ボタンを用意しています。OSの prefers-reduced-motion が有効なら静止画を表示します。Canvasだけに重要な情報を閉じ込めず、状態を文字でも示します。端末ごとのアクセシビリティ検証は未実施です。

仕事で使うなら

研修の達成演出やイベントの案内など、操作した結果を直感的に見せる小さなUIへ応用できます。ただし、業務で重要な数値や警告は動きだけで伝えないでください。Canvasは描画を担当するだけで、データの保存、認証、アクセス制御を提供するものではありません。

ほかの方法と比べる

花火の計算を、画面の動きから分けて読む

Canvasの花火は一枚の画像を動かしているのではありません。短い間隔で前の描画を消し、粒子の新しい位置と色を描き直すことで動いて見えます。クリック位置から粒子が広がらない場合は、最初にボタンやクリックのイベントが届いているか、次に粒子を生成する処理が実行されたか、最後にCanvasへ描画されているかを別々に確認します。状態欄に回数や粒子数が表示されるからといって、描画の成功まで証明できるわけではありません。初心者は「データの更新」と「画面に見える変化」を分けて考えると、エラーを発見しやすくなります。

クリックした場所から放射状に広がる表現では、角度を変えて横方向と縦方向の速度を決めます。花火を中央で打つと上下左右に点が広がりますが、画面の端で打つと点の一部は画面の外へ出ます。点が少なく見えるのは生成失敗ではなく、表示範囲を超えたからかもしれません。粒子数の表示と実際に目で追える粒子数が違う場合は、まずクリック位置を中央に固定して再実行してください。同じ操作条件で比べることが、原因の切り分けに役立ちます。

記事の抜粋コードは位置に速度を足す簡単な計算です。横方向の速度と縦方向の速度はそれぞれ独立しており、下向きの変化を加えると、やがて粒子の軌跡は下へ曲がります。教材用の0.045という値は、現実の重力加速度ではありません。これを0.09へ変更すると下向きの速度が増えるはずですが、すべての点が同じ場所に落ちることを保証するものではありません。発射位置や最初の速度、寿命が違えば、見える範囲も変わります。比較では変更する値を一つに絞ってください。

フレームごとに位置を進める計算では、画面の更新回数が動きの速さへ影響する場合があります。requestAnimationFrameはブラウザが次の描画機会を知らせるAPIで、固定の秒数で呼び出される保証ではありません。高リフレッシュレート画面と負荷の高い端末で見た目が違うときには、ブラウザの動作だけでなく、プログラムが経過時間をどう扱うか調べる必要があります。この教材は簡略化した表現なので、実時間の再現性が必要な業務アニメーションなら時間差に基づく移動方式も検討してください。

粒子の寿命は点が見えなくなるまでの変化を表しています。透明度を下げれば、座標がまだ画面の中にあっても粒子は薄くなります。見えなくなったときに、寿命が尽きたのか、画面外に出たのかを区別すると理解が深まります。連続して打った際に古い粒子が配列へ残り続ける設計では、見えない点も更新対象になって端末の負荷が増えます。消去ボタンや粒子の寿命管理の処理を確認し、少ない粒子数の条件と多い条件を交互に比べるとよいでしょう。

Canvasの背景をどのように消すかでも、軌跡の印象が変わります。前の絵を完全に消す方法では粒子の現在位置がはっきり見えます。薄い色で背景を塗り重ねる方法なら残像のように見せられますが、色が濁ることもあります。ここで調べたいのは粒子の移動量ではなく描画の仕組みです。見た目を変更したときには、位置更新の計算が変わったのか、画面の塗り方が変わっただけなのかを確認してください。二つを同時に変えると、どの処理が原因なのか分からなくなります。

画面に表示されたCanvasの幅と、内部の描画用ピクセルの幅は同じとは限りません。スマートフォン用に表示を縮小していると、クリックした座標をCanvas内部の座標へ換算する必要があります。たとえば表示幅が内部幅の半分なら、表示上の左端から100pxという位置を内部の100pxと同じに扱うことはできません。画面の端で花火がずれて見えるときは、速度の式を変更する前にクリック座標の変換を調べます。高解像度画面で粒子が粗く見える場合も、内部描画サイズが影響することがあります。

実験を比較するときの記録方法

最初の実験は24個で花火を一回打ち、次に同じ場所から48個で打つものです。予想される違いは点の密度であり、一個の粒子の速さが必ず変わるわけではありません。数を増やして動きが遅くなったように感じた場合も、端末の負荷によるものか、粒子の移動式が変わったものかを切り分けます。状態欄の回数と粒子数、消去ボタンの反応、見える粒子の広がり方を同時に観察すると比較が具体的になります。点の数を増やし続ければよいと考えず、見やすさと滑らかさの両方を確認してください。

次の実験は粒子数を24に戻し、下向きの変化だけを0.045から0.09へ変更するものです。速度と発射位置が前回と同じなら、軌跡がより早く下へ曲がることを予想できます。ただし操作前の粒子が画面に残っていれば、どちらの条件の点なのか分からなくなります。比較前に消去して初期状態へ戻すと、考察しやすくなります。値を元に戻したとき、見た目も元に近づくかを確認してください。異なる場合はキャッシュや古いファイルを読み込んでいないかも調べます。

動きを減らす設定が有効な場合、花火を静止表示にする設計は正常なアクセシビリティ対応です。動かないことだけで故障と判断しないでください。点の動きが見えなくても、状態欄の文字で回数や粒子数が伝わることが大切です。画面読上げやキーボード操作で状態が正しく伝わるかは、この時点の実機試験では未確認です。業務向けの画面に取り入れる場合は、視覚効果が操作結果を伝える唯一の手段にならないようにします。

花火はイベント告知や学習教材の完成演出へ応用できますが、重要な操作の結果は文章でも伝える必要があります。エラー画面に派手な演出を加えると、解決方法の説明が読みにくくなる場合があります。点が多ければ便利になるわけではないことを意識し、短い演出と分かりやすい状態表示を組み合わせるのが適切です。Canvasが担当するのは描画であり、データの保存やアクセス権限の管理ではありません。この点を分けて考えると、視覚効果を安全に応用できます。

GitHubサンプル

📘 完全版と再利用方法
Daily-Code-Samples：Canvas花火教材
ライブデモ（公開動作は未確認）

READMEには操作、コードの仕組み、1か所変更、失敗時の確認方法をまとめました。記事は最小例、GitHubは完全版という役割分担です。

公式資料・確認日

• MDN：Canvas API

• MDN：requestAnimationFrame

• MDN：prefers-reduced-motion

公式資料確認日：2026年10月31日（JST）。実ブラウザでの描画成功やGitHub Pages公開成功は未確認です。