レッスン1：X座標を「○」にする動きを作ってみよう

このページでやること

Scratch には「X座標を ○ にする」というブロックがあります。このブロックは、ステージの中でスプライトの横の位置を「ここ！」と数字で指定するためのものです。

このレッスンでは、JavaScript で同じ考え方の setSpriteX(数字) という関数を作って、ステージの中でスプライトの横の位置を決められるようにします。まだ上下には動かしません。横の位置だけに集中して練習しましょう。

この黒いわくの中が「ステージ」。スプライトの横の位置を変えてみよう。

Scratch ではどう見える？

Scratch の「動き」ブロックをひらいてみると、「x座標を 0 にする」「x座標を 100 にする」といったブロックがあります。

クリックで拡大

このブロックの特徴：

0 … まんなか：ステージの横方向の中央に移動
プラスの数 … 右側：ステージの右側に移動
マイナスの数 … 左側：ステージの左側に移動

ブロックの白い四角のところ（○の場所）に入れる数字を変えるだけで、スプライトのスタート位置をカンタンに変えられます。

JavaScript では、こんなふうに考えるよ

JavaScript では、同じことをするために変数と関数を使います。

Scratch ブロック

「X座標を ○ にする」

↓

数字で横の位置を指定

Scratch では、ブロックに数字を入れるだけで横の位置が変わります。

JavaScript

// 変数で「いまの X座標」を覚えておく
let spriteX = 0;

// 関数で X座標 を変える
setSpriteX(100); // 右に移動
setSpriteX(-100); // 左に移動

JavaScript では、spriteX という変数と setSpriteX() という関数で同じことをします。

ステージからはみ出さない仕組み

ステージからはみ出さないようにするために、最小値・最大値を設定しています。

1

MIN_X = -200

これより左には行けない（左のはし）

2

MAX_X = 200

これより右には行けない（右のはし）

ポイント： たとえば setSpriteX(9999); のような大きい数を入れても、スプライトはステージの右はしで止まってくれます！

完成した JavaScript コード

このレッスンでは「X座標の移動」に注目して見てみましょう。
HTML や CSS の詳しい説明はレッスン0で学んだので、ここでは JavaScript の移動部分だけを解説します。

lesson1.html（JavaScript 部分）

コード解説

JavaScript コード解説

// --- スプライトの状態 ---ここからが「動かすための準備」のエリアです。今回はX座標の動きに注目します。
let spriteX = 0;     // 横方向のオフセット。0 がステージの中央X座標（横の位置）を覚えておく変数です。0 はステージの真ん中。プラスで右、マイナスで左へ動きます。
let spriteY = 0;     // 縦方向のオフセット（今回は 0 のまま）Y座標（縦の位置）の変数。今回は触りませんが、次のレッスンで使います。
let spriteAngle = 0; // 回転角度回転の角度。今回は 0 のままですが、同じ場所で管理しています。
let spriteScale = 1; // 拡大縮小率大きさの倍率。今回は 1（等倍）のままです。
 （空行）
function updateSpriteTransform() {スプライトの見た目（位置・回転・大きさ）を、変数の値から作り直す関数です。
  const sprite = document.querySelector(".sprite");画面の中からスプライト画像（class="sprite"）を見つけます。
  if (!sprite) return;もし見つからなかったら、何もせず終わります（エラー防止）。
 （空行）
  sprite.style.transform =CSS の transform に命令をまとめて入れます。ここで「実際に動いた見た目」になります。
    `translate(-50%, -50%) translate(${spriteX}px, ${spriteY}px) ` +最初の translate(-50%, -50%) は「画像の中心を基準にする」ため。次の translate(...) が「X座標・Y座標で動かす」部分です。
    `rotate(${spriteAngle}deg) scale(${spriteScale})`;回転（rotate）と拡大縮小（scale）。今回はX移動が目的なので値は変えませんが、仕組みはここで反映されます。
}updateSpriteTransform の終わり。
 （空行）
// --- X座標を「○」にする関数 ---ここからがレッスン1の新しい関数です！Scratch の「X座標を○にする」と同じ役わりです。
function setSpriteX(targetX) {Scratch の「X座標を ○ にする」ブロックの ○ の部分が targetX です。数字を入れると、そのX座標に移動します。
  const MIN_X = -200;左に動ける限界（今回は -200）。ステージの外に出すぎないための安全ラインです。
  const MAX_X = 200;右に動ける限界（今回は 200）。
 （空行）
  if (targetX < MIN_X) {もし targetX が小さすぎたら…
    spriteX = MIN_X;左はし（MIN_X）にそろえます。
  } else if (targetX > MAX_X) {もし targetX が大きすぎたら…
    spriteX = MAX_X;右はし（MAX_X）にそろえます。
  } else {範囲内なら…
    spriteX = targetX;そのまま spriteX に入れてOKです。
  }条件分岐の終わり。
 （空行）
  updateSpriteTransform();X座標を変えただけでは画面は変わりません。最後にこの関数を呼んで、見た目を更新します。
}setSpriteX の終わり。
 （空行）
// ページ表示時に 1 回だけ呼び出す（スタート位置）ページが表示されたときに、最初の位置を決めます。
setSpriteX(0);最初の位置を決めます。0 は中央。ここを 150 や -150 に変えると、スタート位置が変わります。

HTML・CSS の部分について

HTML と CSS（ステージや見た目の設定）は、レッスン0 とほぼ同じです。詳しい説明はレッスン0を見てね。下の「解説なしのコード全文」で、HTML・CSS を含めた全体を確認できます。

解説なしのコード全文を表示

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>レッスン1：X座標を「○」にする</title>
    <style>
      /* 全体のリセット＆基本スタイル */
      *, *::before, *::after {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        min-height: 100vh;
        background: #ffffff;
        font-family: system-ui, -apple-system, sans-serif;
        display: flex;
        justify-content: center;
      }

      /* コンテンツ本体 */
      .page {
        width: min(1100px, 100% - 32px);
        padding: 24px 16px 32px;
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      /* タイトル部 */
      .page-title {
        font-size: 1.4rem;
        font-weight: 700;
        margin: 0;
      }

      .page-subtitle {
        font-size: 0.95rem;
        color: #555;
        margin: 4px 0 0;
      }

      /* ステージ周り */
      .stage-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }

      .stage-label {
        font-size: 0.9rem;
        color: #666;
      }

      /* スプライトが動く枠（ステージ） */
      .stage {
        width: 80%;
        max-width: 960px;
        height: 432px;
        border: 4px solid #000;
        background-color: #f7f7f7;
        position: relative;
        overflow: hidden;
        margin: 0 auto;
      }

      /* SVGスプライト */
      .sprite {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 96px;
        height: 96px;
        transform: translate(-50%, -50%);
        pointer-events: none;
      }

      /* スマホ向け調整 */
      @media (max-width: 600px) {
        .stage {
          width: 90%;
          height: 300px;
        }
        .sprite {
          width: 72px;
          height: 72px;
        }
      }
    </style>
  </head>
  <body>
    <main class="page">
      <header>
        <h1 class="page-title">レッスン1：X座標を「○」にする</h1>
        <p class="page-subtitle">
          スプライトの横の位置を、数字で指定してみよう。
        </p>
      </header>

      <section class="stage-section">
        <div class="stage-label">スプライトが動くステージ</div>
        <div class="stage">
          <img class="sprite" src="./images/chara00.svg" alt="主人公スプライト" />
        </div>
      </section>
    </main>

    <script>
      // --- スプライトの状態 ---
      let spriteX = 0;     // 横方向のオフセット。0 がステージの中央
      let spriteY = 0;     // 縦方向のオフセット（今回は 0 のまま）
      let spriteAngle = 0; // 回転角度
      let spriteScale = 1; // 拡大縮小率

      function updateSpriteTransform() {
        const sprite = document.querySelector(".sprite");
        if (!sprite) return;

        sprite.style.transform =
          `translate(-50%, -50%) translate(${spriteX}px, ${spriteY}px) ` +
          `rotate(${spriteAngle}deg) scale(${spriteScale})`;
      }

      // --- X座標を「○」にする関数 ---
      // Scratch の「X座標を ○ にする」ブロックのイメージ。
      // 0 ならステージの中央、プラスで右、マイナスで左。
      function setSpriteX(targetX) {
        const MIN_X = -200;
        const MAX_X = 200;

        if (targetX < MIN_X) {
          spriteX = MIN_X;
        } else if (targetX > MAX_X) {
          spriteX = MAX_X;
        } else {
          spriteX = targetX;
        }

        updateSpriteTransform();
      }

      // ページ表示時に 1 回だけ呼び出す（スタート位置）
      setSpriteX(0);
    </script>
  </body>
</html>

このページのコードを使ってみよう（ざっくり手順）

lesson0.html を作ったフォルダの中に、 lesson1.html に相当するファイル（またはページ）を用意します。
このページにのっている lesson1 のコードを、そのファイルに反映します。
./images/chara00.svg の部分は、自分の用意したスプライト画像のファイル名に変えてもOKです。
ページを開いて、ステージの中にスプライトが表示されていることを確認します。

ここまでできたら、次のステップとして setSpriteX(0); の数字を変えてみる実験をしてみましょう。

ためしてみよう（すこし遊ぶ）

次のように数字を変えて、スプライトの動きを確かめてみましょう。

// 中央（0）
setSpriteX(0);

// 右に寄せる
setSpriteX(150);

// 左に寄せる
setSpriteX(-150);

// すごく大きな数字（ステージの右はしで止まるはず）
setSpriteX(9999);

+

プラスの数

右へ移動します

-

マイナスの数

左へ移動します

!

大きすぎる数

ステージからはみ出さない！

今回の注目ポイント

このプログラムで特に押さえておきたい 3 つのポイントを紹介します。

1

spriteX 変数

ステージの中央を 0 としたときの、横方向のずれを覚えておく変数です。

2

setSpriteX(targetX)

「X座標を targetX にする」関数。Scratch のブロックと同じ役わりです。

3

MIN_X / MAX_X

ステージからはみ出さないように、範囲を -200 〜 200 に制限しています。

さいごに（まとめ）

このレッスンで学んだこと

• Scratch の「X座標を ○ にする」ブロックのはたらき
• JavaScript の setSpriteX(○) という関数
• ステージからはみ出さないようにするための最小値・最大値

これで、「横の位置を数字でコントロールする」という考え方が Scratch と JavaScript の両方でつながりました。次のレッスンでは、この setSpriteX を使いながら、 Y座標やくり返しと組み合わせた動きにもチャレンジしていきます。

完成版を見てみよう

JavaScript 版の完成したプロジェクトを確認できます。

Scratch 版を見る

Scratch 公式サイトでプロジェクトを開く

JavaScript 版を見る

動作デモをブラウザで確認する

やってみよう（発展編）

学んだコードを改造して、さらに面白い見た目に挑戦してみましょう！

スタート位置を変えてみよう

setSpriteX(0); の 0 を 100 や -100 に変えて、スタート位置を変えてみよう。

範囲を変えてみよう

MIN_X = -200 と MAX_X = 200 の数字を変えて、動ける範囲を広げたり狭くしたりしてみよう。