3.

Scratch (スクラッチ) チュートリアル完全ガイド(ブロック / スプライト / 共有)

編集
この記事の要点
  • Scratch は MIT メディアラボが開発した 子ども向けビジュアルプログラミング(無料 / ブラウザ実行)
  • scratch.mit.edu でアカウント作成不要で即試せる。作品の保存・共有にはアカウント必要
  • 中心概念: スプライト(キャラ)/ コスチューム(見た目)/ 背景(ステージ)/ ブロック(命令)
  • ブロックは 動き / 見た目 / 音 / イベント / 制御 / 調べる / 演算 / 変数 / ブロック定義(拡張) の 9 系統
  • 最初の作品例: 猫を右に動かす → 旗を押したら歩く → クリックで「ニャー」と鳴く → ループで歩き続ける

Scratch とは

Scratch(スクラッチ)は MIT メディアラボの Lifelong Kindergarten グループが開発した、8〜16 歳向けのビジュアルプログラミング環境です(より低年齢向けには Scratch Jr もあり)。コードを文字で書く代わりに、パズルのようなブロックをドラッグして組み合わせることでプログラムを作ります。世界中で 1 億人以上のユーザが登録し、教育現場でも広く採用されています。

項目内容
開発元MIT メディアラボ Lifelong Kindergarten
初版2007 年(Scratch 1.0)
現行Scratch 3.0(2019 年〜、HTML5 ベース)
動作環境ブラウザ(PC / Chromebook / iPad)+ オフラインエディタ
料金完全無料・OSS
言語70+ 言語に翻訳(日本語対応)
主な対象年齢8〜16 歳(Scratch Jr は 5〜7 歳)

始め方: アカウント作成と画面構成

  1. ブラウザで https://scratch.mit.edu/ を開く
  2. 右上の「作る」をクリックすると即エディタが開く(ログインなしで OK)
  3. 保存・共有したい場合は「Scratch に参加しよう」でアカウント作成(メール必要)

エディタの 4 つのエリア:

エリア役割
ブロックパレット(左)使えるブロックの一覧(カテゴリ別タブ)
スクリプトエリア(中央)ブロックを並べてプログラムを組む場所
ステージ(右上)実行結果が表示される画面(緑の旗で実行)
スプライトリスト(右下)キャラクター(スプライト)と背景の一覧

中心概念

概念説明
スプライト動かせるキャラ。初期はネコ。複数配置可能
コスチューム1 つのスプライトが持つ複数の絵。切替えで「歩く」アニメ等を表現
背景ステージの絵。シーン切替えに使う
ブロック命令を表すパズルピース
スクリプトブロックを連結した「プログラム」
変数 / リスト値を保存する箱
メッセージスプライト間で連絡する仕組み(broadcast)

ブロックの 9 カテゴリ

カテゴリ代表ブロック
動き10 歩動かす / x 座標を 0 にする / 〜度回す
見た目こんにちは と 言う / 大きさを 100% にする / コスチュームを変える
ピンクニャーの音を鳴らす / 音量を 100% にする
イベント緑の旗が押されたとき / スプライトがクリックされたとき
制御オレンジ10 回繰り返す / ずっと / もし〜なら / 〜まで待つ
調べる水色マウスのポインターに触れた / x 座標
演算+ / × / 乱数 / 等しい / かつ / 文字列結合
変数濃いオレンジスコア を 1 ずつ変える
ブロック定義独自ブロック(関数)を作る

拡張機能として ペン / 音楽 / ビデオセンサー / 音声合成 / 翻訳 / micro:bit / LEGO WeDo 等も追加可能(左下の「拡張機能を追加」ボタン)。

最初の作品: ネコを動かす

定番のステップを 1 つずつ:

ステップ 1: 旗を押したら右に進む
  ┌─────────────────────────┐
  │ 緑の旗が押されたとき    │ (イベント)
  ├─────────────────────────┤
  │ 10 歩動かす             │ (動き)
  └─────────────────────────┘
  → 緑の旗をクリック。ネコが少しだけ右に動く。

ステップ 2: ずっと歩く
  ┌─────────────────────────┐
  │ 緑の旗が押されたとき    │
  ├─────────────────────────┤
  │ ずっと                  │ (制御 = ループ)
  │   10 歩動かす           │
  │   1 秒待つ              │
  └─────────────────────────┘
  → ネコが 1 秒ごとに歩く。

ステップ 3: 端に着いたら向きを変える
  ┌─────────────────────────────────┐
  │ 緑の旗が押されたとき            │
  ├─────────────────────────────────┤
  │ ずっと                          │
  │   10 歩動かす                   │
  │   もし 端に触れた なら          │ (制御 + 調べる)
  │     180 度回す                  │
  │   コスチュームを次にする        │ (見た目)
  │   0.1 秒待つ                    │
  └─────────────────────────────────┘
  → 行ったり来たり、コスチューム切替えで歩いて見える。

ステップ 4: クリックしたらニャー
  ┌─────────────────────────┐
  │ このスプライトが        │
  │   クリックされたとき    │ (イベント)
  ├─────────────────────────┤
  │ ニャーの音を鳴らす      │ (音)
  │ ニャー と 2 秒言う      │ (見た目)
  └─────────────────────────┘

変数とスコア

ゲームの基本「スコア」を作るには:

  1. 左下「変数」カテゴリ → 「変数を作る」
  2. 名前を「スコア」にして OK
  3. 「スコア を 0 にする」を旗の下に置く
  4. イベント時に「スコア を 1 ずつ変える」を呼ぶ
  5. ステージにチェックを入れるとスコアが常時表示される

メッセージ(broadcast)でスプライト間通信

[ネコのスクリプト]
旗が押されたとき
  10 回繰り返す
    10 歩動かす
  「ゴール」を送る           ← メッセージ送信

[宝箱のスクリプト]
「ゴール」を受け取ったとき   ← メッセージ受信
  コスチュームを「開く」にする
  「クリア!」 と 2 秒言う

共有とリミックス

Scratch の特徴は強力なコミュニティ機能:

  • 共有: 完成した作品を世界中に公開できる
  • リミックス: 他人の作品を改造して新作にできる(GitHub の fork 相当)
  • 中を見る: 公開作品はすべて中身(ブロック)を見られる → 学習の宝庫
  • スタジオ: 作品をテーマ別にまとめるグループ機能
  • コメント: 他のユーザにフィードバック

Scratch Jr との違い

項目ScratchScratch Jr
対象年齢8〜16 歳5〜7 歳
動作環境ブラウザ + PC アプリiPad / Android / Chromebook アプリのみ
ブロック表示日本語テキスト付き絵文字のみ(読み書きできなくても使える)
変数ありなし
関数定義ありなし
共有機能オンライン公開可ローカル保存のみ

他のビジュアルプログラミング環境との比較

環境特徴主な対象
Scratch2D ゲーム / アニメに強い初学者全般
Scratch Jr幼児向け超シンプル5〜7 歳
MakeCode (micro:bit)マイコン制御 + JS / Python 切替え可中学生・電子工作
MakeCode Arcadeレトロゲーム特化中高生
Code.org (Hour of Code)1 時間で完結する教材授業導入
BlocklyGoogle 製のフレームワーク(Scratch の元になる)カスタム教材開発
Snap!Scratch 上位互換、関数を第一級に高校〜大学
Viscuit (ビスケット)絵だけで動くプログラミング幼児

教育現場での活用例

  • 小学校プログラミング教育(2020 年〜): 算数の正多角形描画、理科のセンサー実験などで採用
  • STEAM 教育: 物理シミュレーション、図形ゲーム、楽器制作
  • 言語教育: 多言語ストーリー作成、翻訳拡張機能
  • Scratch Day: 世界中で開催される年次イベント
  • Scratch Conference: 教員 / 研究者向けの国際会議

つまずきポイントとコツ

つまずき対処
旗を押しても動かない「緑の旗が押されたとき」を一番上に付けたか確認
ブロックがくっつかない形状の合うブロック同士しか連結しない(六角は条件、ひし形は数値)
ずっとループから抜けられない「もし〜なら」+「すべて止める」でループ終了
スプライト同士の通信「メッセージを送る/受け取る」を使う
動きが速すぎる「〜秒待つ」を挟む
変数が画面に出ない変数カテゴリで該当変数のチェックボックス ON

FAQ

Q: オフラインで使える?
A: Scratch Desktop(公式オフラインエディタ)を scratch.mit.edu/download から無料ダウンロード。Windows / macOS / ChromeOS / Android 対応。

Q: Scratch で作った作品を JavaScript や Python に変換できる?
A: 公式機能はないが、サードパーティで sb3-to-js や TurboWarp(Scratch 互換高速エンジン)が JavaScript 化を提供。学習目的に有用。

Q: 中学・高校以降の次のステップは?
A: Python(特に Pygame / Turtle)JavaScript(p5.js)micro:bit MakeCodeUnity(C#)へのステップアップが定番。Scratch で身に付けた「逐次・反復・分岐・イベント」の概念がそのまま通用します。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. Scratchのはじめかた
  2. 言語(げんご)の変え方
  3. チュートリアル
  4. スプライト
  5. スクリプト
  6. 背景(はいけい)の変え方
  7. アカウントの作り方
  8. 作品の公開方法

最近更新/作成されたページ