TurboWarpでJavaScriptを使う方法（Scratch拡張）

2026-10-03

Scratchのブロックだけではできないことを、JavaScriptで足せたら――。TurboWarp（ターボワープ）なら、JavaScriptで自分だけのブロック（カスタム拡張機能）を作って、Scratchのプロジェクトで使うことができます。

結論：TurboWarpの「拡張機能を追加」→ いちばん下の「Custom Extension」から、JavaScriptのファイルやコードを読み込むとブロックが増えます。
書き方は、getInfo() でブロックの形を決めて、Scratch.extensions.register() で登録するのが基本です。作った拡張機能は公式のScratchでは動かないので、TurboWarpの中で使います。

この記事では、TurboWarpの説明書（公式ドキュメント）にそって、いちばん小さな拡張機能の作り方と読み込み方、入力つきのブロック、注意点を紹介します。TurboWarpそのものについてはターボワープとは？で説明しています。

TurboWarpのカスタム拡張機能とは

Scratchの左側にある「拡張機能を追加」ボタン（ブロック2つと＋のマーク）からは、ペンや音楽などの拡張機能を追加できます。TurboWarpでは、ここに自分で書いたJavaScriptの拡張機能も読み込めます。

何ができるようになる？

Scratchにないブロックを自分で作れる
ブロックの見た目（命令・値を返す・はい/いいえ）を選べる
作った拡張機能を、TurboWarp Packagerで作品ごとHTMLファイルなどにまとめられる

ほかの人が作った拡張機能もある

自分で書かなくても、TurboWarp Extension Gallery（extensions.turbowarp.org）に、いろいろな人が作った拡張機能がまとめられています。まずはここから使ってみて、慣れてきたら自分で作るのもおすすめです。

いちばん小さな拡張機能を作る

TurboWarpの説明書の「Hello, world!」と同じ形の、いちばん小さな例です。押すと「World!」という値を返すブロックが1つ増えます。

コードを書く

メモ帳などのテキストエディターに次のコードを書き、hello-world.js という名前で保存します。

class HelloWorld {
  getInfo() {
    return {
      id: 'helloworld',
      name: 'It works!',
      blocks: [
        {
          opcode: 'hello',
          blockType: Scratch.BlockType.REPORTER,
          text: 'Hello!'
        }
      ]
    };
  }
  hello() {
    return 'World!';
  }
}
Scratch.extensions.register(new HelloWorld());

コードの意味

getInfo()：拡張機能の名前と、どんなブロックがあるかを返す
id：拡張機能を見分けるための名前（例：helloworld）。ほかと重ならないものにする
blockType：ブロックの形。REPORTER は値を返す丸いブロック
opcode：ブロックが使われたときに動く関数の名前。ここでは hello()
Scratch.extensions.register()：作った拡張機能をTurboWarpに登録する

TurboWarpで読み込む

TurboWarpのエディターを開く
左下の「拡張機能を追加」ボタン（ブロック2つと＋のマーク）を押す
Scratchの拡張機能のいちばん下までスクロールし、「Custom Extension」を選ぶ
保存したファイルを選ぶ（URLやコードを貼りつける方法もある）
「Run extension without sandbox」にはチェックを入れないで読み込む

少しすると、左側のブロックの一覧に「It works!」という拡張機能が出てきます。「Hello!」ブロックをクリックして「World!」と出れば成功です。

Scratch CatがAPIを使ってTurboWarpにワープするアニメーション風のイラスト

入力つきのブロックを作る

ブロックに数字や文字を入れられるようにするには、text の中に [名前] を書き、arguments で種類を決めます。次は、2つの数のうち大きいほうを返すブロックの例です。

class BiggerNumber {
  getInfo() {
    return {
      id: 'biggernumber',
      name: 'Bigger Number',
      blocks: [
        {
          opcode: 'bigger',
          blockType: Scratch.BlockType.REPORTER,
          text: '[A] と [B] の大きいほう',
          arguments: {
            A: { type: Scratch.ArgumentType.NUMBER, defaultValue: 3 },
            B: { type: Scratch.ArgumentType.NUMBER, defaultValue: 5 }
          }
        }
      ]
    };
  }
  bigger(args) {
    return Math.max(Number(args.A), Number(args.B));
  }
}
Scratch.extensions.register(new BiggerNumber());

入力の値は、関数の args に入って届きます。入力の種類には、文字（STRING）、数（NUMBER）、はい/いいえ（BOOLEAN）のほか、色（COLOR）や角度（ANGLE）などがあります。

ブロックの形の種類

Scratch.BlockType.COMMAND：「10歩動かす」のような、命令のブロック
Scratch.BlockType.REPORTER：値を返す丸いブロック
Scratch.BlockType.BOOLEAN：「はい/いいえ」を返す六角形のブロック

JavaScriptの拡張機能を使うときの注意点

公式のScratchでは動かない

カスタム拡張機能を使ったプロジェクトは、Scratchの公式サイトでは動きません。作品を人に見てもらいたいときは、TurboWarpで遊んでもらうか、TurboWarp PackagerでHTMLファイルなどにまとめて配ります。

「サンドボックスなし」は慎重に

拡張機能には、ふつうの（サンドボックスの中で動く）ものと、「サンドボックスなし」で動くものがあります。サンドボックスなしの拡張機能は、Scratchの中のしくみにまで手が届く強い拡張機能です。TurboWarpの説明書でも、最初の練習ではチェックを入れないように書かれています。よく知らない人が作ったコードを、サンドボックスなしで読み込まないようにしましょう。