JavaScriptで何ができるんだろう？ その5

「JavaScriptで何ができるの？」シリーズ第5弾は「描画」です。JavaScriptにそんな機能があること自体知らなかったので、何ができるんだろうかと気になります。Canvasもよくわかっていないので、こちらも詳細を聞いていきたいと思います😅

これまでの振り返り
描画：Canvasで図形やグラフを描いてみよう！
まとめ

これまでの振り返り

【済】インタラクション：メニュー開閉、タブ切り替え、モーダル表示
【済】入力チェック：必須チェック、文字数・メール形式の検証
【済】動的表示：時計、カウントダウン、スライドショー
【済】データ操作：計算、条件分岐、繰り返し処理
【済】保存：ブラウザにメモ（localStorage）
【済】通信：サーバーやAPIからデータ取得
描画：Canvasで図形・グラフ

描画：Canvasで図形やグラフを描いてみよう！

あるく

これまでJavaScriptで文字やデータを扱ってきたけど、“絵”も描けるって本当？

AI先生

はい、本当です。Canvas（キャンバス）という仕組みを使うと、ブラウザの中に図形やグラフを描けるんですよ。

ミナ

え、キャンバスって…お絵かきできるってこと!?　ちょっと楽しそう！

Canvasとは？

AI先生

Canvasは、HTMLの中で“絵を描くための場所”を作るタグです。英語の意味どおり、“キャンバス（絵を描く布）”のようなものです。

<canvas id="myCanvas" width="300" height="200"></canvas>

あるく

ほうほう。・・・ってタグだけだと、まだよくわからないなぁ

ミナ

これだけだと、ちょっとイメージわかないね

AI先生

たしかにタグだけだと何も見えませんね。Canvasは“場所”を作るだけなので、実際に絵を描くには、JavaScriptで命令を書く必要があります。たとえば円や四角を描くコードを加えると、初めて形が見えてくるんですよ。

図形を描いてみよう（四角・円）

💻 例：四角形を描く

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Canvasで四角を描くデモ</title>
  <style>
    body {
      text-align: center;
      font-family: sans-serif;
      margin-top: 30px;
    }
    canvas {
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <h2>Canvasで四角を描いてみよう</h2>

  <!-- キャンバス領域 -->
  <canvas id="myCanvas" width="300" height="200"></canvas>

  <script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // 四角を塗る
    ctx.fillStyle = "skyblue";
    ctx.fillRect(50, 50, 100, 80);
  </script>
</body>
</html>

あるく

なるほど。こういう風に表示されるんだ。いわゆる一つのシンプルな四角形という奴だね。

ミナ

他にもいろいろな絵がかけるのかなぁ。四角以外にも見てみたいなー。

AI先生

もちろん描けますよ。円や線、文字、グラフのような図形もCanvasで作れます。JavaScriptで描き方を指定すれば、まるでデジタルお絵描きのように自由に表現できるんです。

💻 例：円を描く

ctx.beginPath();
ctx.arc(200, 100, 40, 0, Math.PI * 2);
ctx.fillStyle = "salmon";
ctx.fill();

※四角の下にコードを追加します

あるく

四角に加えて◯も追加されているね

AI先生

arc()は円を描く関数です。x座標・y座標・半径を指定します。

ミナ

へぇー、けっこう細かく設定できるんだね。ほかにはどういうのができるのかな？　もしかして棒グラフとかも作れちゃう？

AI先生

もちろん。Canvasは図形を組み合わせて“グラフやゲーム画面”を作るのにも使われています。

📊 グラフも描ける！

💻 例：簡単な棒グラフ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Canvasで棒グラフを描くデモ</title>
  <style>
    body {
      text-align: center;
      font-family: sans-serif;
      margin-top: 30px;
    }
    canvas {
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <h2>Canvasで棒グラフを描いてみよう</h2>

  <!-- グラフ描画領域 -->
  <canvas id="graph" width="300" height="200"></canvas>

  <script>
    const ctx2 = document.getElementById("graph").getContext("2d");
    const data = [50, 120, 80, 150];
    const colors = ["#6cf", "#9f9", "#fc9", "#f99"];

    // 背景を塗る
    ctx2.fillStyle = "#fefefe";
    ctx2.fillRect(0, 0, 300, 200);

    // データを棒グラフとして描画
    data.forEach((value, i) => {
      ctx2.fillStyle = colors[i];
      ctx2.fillRect(i * 70 + 20, 200 - value, 40, value);
    });

    // 軸線を追加（見やすさアップ）
    ctx2.strokeStyle = "#666";
    ctx2.beginPath();
    ctx2.moveTo(20, 200);
    ctx2.lineTo(280, 200);
    ctx2.stroke();

  </script>
</body>
</html>

🗣️ 出力イメージ↓

あるく

なるほど〜。今までの応用でグラフも作れるんだね

AI先生

はい、JavaScriptで値を変えれば“動くグラフ”も作れるんですよ。

ミナ

動くってことは…ひょっとしてアニメーションも!?

AI先生

そう、Canvasの世界ではそれも可能です✨　棒グラフが 下からスッと伸びていくアニメーション に見えるバージョンもありますよ！
Canvasのアニメーションの基本である requestAnimationFrame() を使っています👇

💻 棒グラフのアニメーション

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Canvasでアニメーション棒グラフ</title>
  <style>
    body {
      text-align: center;
      font-family: sans-serif;
      margin-top: 30px;
    }
    canvas {
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <h2>Canvasで棒グラフをアニメーション表示</h2>

  <canvas id="graph" width="300" height="200"></canvas>

  <script>
    const ctx = document.getElementById("graph").getContext("2d");
    const data = [50, 120, 80, 150];
    const colors = ["#6cf", "#9f9", "#fc9", "#f99"];
    const width = 40;
    const spacing = 70;
    let progress = 0; // アニメーション進行度（0〜1）

    function drawBars() {
      ctx.clearRect(0, 0, 300, 200); // 画面をクリア

      // 横軸ライン
      ctx.strokeStyle = "#666";
      ctx.beginPath();
      ctx.moveTo(20, 200);
      ctx.lineTo(280, 200);
      ctx.stroke();

      // 棒グラフを描く
      data.forEach((value, i) => {
        const currentHeight = value * progress; // 現在の高さ
        ctx.fillStyle = colors[i];
        ctx.fillRect(i * spacing + 20, 200 - currentHeight, width, currentHeight);
      });

      // 徐々に伸ばす
      if (progress < 1) {
        progress += 0.02; // 伸びるスピード
        requestAnimationFrame(drawBars);
      }
    }

    drawBars(); // 開始
  </script>
</body>
</html>

あるく

おぉ〜！　動いた！　一気に“アプリ感”が出たね！

ミナ

ほんと、静止画の棒グラフとは別物！　動いているとわかりやすいし、見ていても楽しいね😆

AI先生

はい、アニメーションは視覚的にわかりやすいので、データの変化を見せるときにもよく使われますね。

まとめ

あるく

今回JavaScriptで図やグラフまで作れるとは思ってなかったよ。

ミナ

どちらかというと計算とか、そっちのほうのイメージだったもんね

AI先生

そうですね。JavaScriptは“動き”や“処理”のイメージが強いですが、Canvasを使えば“見た目を作る”こともできます。まさにプログラムとデザインの橋渡しをする言語なんですよ。

プログラムとデザインの橋渡しをする言語「JavaScript」。改めてその意味がわかったような気がします😄　今回で「JavaScriptは何ができるんだろう？」シリーズはいったん終了となりますが、HTML/CSSの学びと併行して、引き続きJavaScriptの学習も進めていきたいと思います。
ではでは👋