Scratchのブロック→JavaScript & p5.js の対応一覧

2025-03-26

Scratchをある程度できるようになった子どもが、ステップアップでテキストプログラミングに進むとき、何かオススメか？

何をしたいかにもよりますが、楽しみながらプログラミングスキルを伸ばしたい場合、個人的には JavaScript & p5js が良いと思います。

そのときの助けになるよう、Scratchのブロックを、JavaScript & p5js ではどう書くか？をまとめました。

イベント

[ ] キーが押されたとき

制御

もし<条件>なら

if (条件) { 
  // 処理
}

もし<条件>なら、でなければ

if (条件) {
  // 処理
} else {
  // 別の処理
}

ずっと

function draw() { 
  /* 繰り返し処理 */ 
}

(回数)回繰り返す

for (let i = 0; i < 回数; i++) {
  // 処理
}

<条件>まで繰り返す

while (!条件) {
  // 処理
}

<条件>まで待つ

–

(秒数)秒待つ

–

すべて止める

noLoop(); //描画を停止
// または 
exit(); //プログラム終了

このスクリプトを止める

return; //関数内で処理を停止

このクローンを削除する

–

調べる

[スペースキー]が押されたとき

  if (keyIsPressed && key === ' ') {
    //処理
  }

マウスが押された

  if (mouseIsPressed) {
    //処理
  }

マウスのX座標、マウスのY座標

mouseX;
mouseY;

演算

(値a) + (値b)、など

scratchと同じです。

o + b
a - b
a * b
a / b

(値a) < (値b)、など

a < b
a === b  // a = b
a > b
// scratchには無かった「以上」「以下」もあります
a <= b
a >= b

“りんご"と"バナナ"

"りんご" + "バナナ"

“りんご"の１番めの文字

jsは、0から数え始めます。

"りんご".charAt(0)

“りんご"の長さ

"りんご".length

“りんご"に"り"が含まれる

"りんご".includes("り");

「(値)を四捨五入」

Math.round(値);

「(値a)を(値b)で割った余り」


a % b;

(値)の絶対値


Math.abs(値);

変数

–

ブロック定義

–

ペン(拡張機能)

–

programmingp5.js,Scratch