#020 リスト操作11種類を全部使う作り方｜追加・削除・検索・置き換え・挿入を完全体験 はじめてのスクラッチ

さぁ、スクラッチでナニ作る！？

動画で見てみよう

ok-scratch

チャンネル登録して応援よろしく！チャンネル登録する

チュートリアルの元になった作品

スクラッチでプレイする ターボワープでプレイする

はじめてのスクラッチ #020

by ok-scratch

プレイしておこう

今回のスクラッチを作る参考作品です。リストブロック11種類を一本のストーリーでぜんぶ使い切るって発想がマジでキレッキレ。追加・削除・検索・置き換え・挿入と、操作のたびに宇宙船クルーが画面に登場するから、各ブロックの使いどころが文脈ごとにガッチリ頭に入ってくる。バラバラに覚えるんじゃなくて、一つのストーリーで全部体感できる設計がイカす。どうやって作ってるか、見ていこう。参考資料：スクラッチプログラミング事例大全集

今回の目標

スターター作品をリミックスしよう

このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード

#1リストの初期化

ok-scratch

前回までに覚えたスクラッチの基本を活かして、今回は「リスト」を使ったデータ管理に挑戦するよ。宇宙船のクルー名簿を作って、メンバーの追加や検索をやっていこう。

準備

スプライト「キャプテン」を開く

キャプテン

スプライトについて
乗員名簿をリストで管理し、点呼・検索・入退隊などの指示をメッセージで行う艦長スプライト
どんな役割か
リストを使って乗員名簿を管理するよ。追加・削除・検索・置き換えをひとつひとつ覚えながら、他のスプライトに指示を出す司令塔を作ろう！

リスト「■乗員名簿」の追加

全スプライトから参照できる乗員の名前リスト。追加・削除・検索・置き換えの操作対象

実装

イベント が押されたときで開始したら、まずリスト( )のすべてを削除するで「■乗員名簿」リストを空っぽにするんだ。前のデータが残っていると困るから、最初に全消しするのがリスト初期化の定番パターン。リストをステージに表示してから、最初のクルー「アライ」を追加するよ。

ok-scratch

スクラッチの「リスト」って、スマホの連絡先リストと同じ発想なんだ。名前を追加したり、番号で呼び出したり、名前で検索したり。今回の作品ではスクラッチにあるリスト関連ブロック全11種類を使い倒すよ。ここをマスターすればリストは怖いものなしっしょ。

#2リストにデータを追加する

リスト( ) を ( ) に追加するでサトウ、スズキ、タナカの3人を続けて名簿に追加するよ。リストに要素を足すたびに、下にどんどん積み重なっていく感じだね。

全員追加したら、リスト( ) の長さで名簿の人数を数えて「現在4名が在籍中」と表示する。そのあと調べる( ) と聞いて待つでユーザーに番号を入力してもらうんだ。

ここから名簿を使ったやりとりが始まるよ。リストは追加した順に番号がつくから、あとから入れた要素ほど大きい番号になる。この仕組みを頭に入れておこう。

#3リスト内の番号で呼び出す

ユーザーが入力した番号をもとに、名簿からクルーの名前を取り出すよ。リスト( ) の ( ) 番目を使うと、リストの○番目に入っている中身を取得できるんだ。

「答え」の値をそのまま番号として渡して、名簿のその位置にいるクルーの名前を引き出しているよ。リストは1番目から始まるから、「2」と入力すれば2番目のサトウが返ってくるんだ。

#4アビーの待機設定

ok-scratch

キャプテンの名簿操作ができたから、次はメッセージに反応するクルーキャラを作っていくよ。まずはアビーからスタート。

準備

メッセージ「乗員呼び出し」を追加

指定番号の乗員を呼び出したときに送信するメッセージ

実装

イベント が押されたときで座標(-300, -300)の画面外に飛ばして見た目隠すで隠すんだ。呼ばれるまでは見えない場所で待機させておく設定だよ。

アビーの登場

キャプテンが「乗員呼び出し」メッセージを送ったら、アビーが画面に登場するよ。イベント( ) を受け取ったときでメッセージを受け取って、表示してから動き( ) 秒でx座標を ( ) に、y座標を ( ) に変えるで1秒かけて定位置へ滑り込む。

キャプテン側が「メッセージを送って待つ」を使っているのがミソ。アビーの移動アニメーションが終わるまでキャプテンのスクリプトが一時停止するから、セリフと登場のタイミングがきれいに噛み合うんだ。

ok-scratch

この作品では7種類のメッセージを使って、キャプテンとクルーキャラを連携させているよ。「メッセージを送って待つ」と「メッセージを受け取ったとき」のコンビは、スプライト同士の会話みたいなもの。映画の監督が「はい、○○さん登場！」って指示を出すのと同じで、キャプテンが司令塔になって全体の流れをコントロールしているんだ。

アビーの返事

ok-scratch

アビーが登場すると同時に「はい！」と返事もさせたい。同じ「乗員呼び出し」メッセージに対して、もう1つ返事用のスクリプトを追加するよ。

準備

メッセージ「乗員発見」を追加

名簿検索で乗員が見つかったときに送信するメッセージ

実装

1つのメッセージに複数のスクリプトを紐づけると、全部が同時に動き出すから、移動しながらセリフを言う自然な演出になるんだ。

#5リスト内の値で検索する

準備

スプライト「アビー（乗員）」を開く

実装

番号指定の次は、名前で検索できるようにしよう。まずイベント( ) を送って待つで「乗員呼び出し」メッセージを送って、あとで作るクルーキャラに合図を出すんだ。

続いて検索したい名前を入力してもらって、リスト( ) に ( ) が含まれるで「■乗員名簿」にその名前があるか調べるよ。このブロックは「ある」か「ない」の2択を返すから、もし〜でなければブロックで処理を分けるしくみだよ。

#6検索成功時の処理

名前が見つかった場合の処理を書くよ。リスト( )中の( )の場所は、指定した名前がリストの何番目にあるかを教えてくれるブロックなんだ。

「答え」の名前と位置番号をつなげて「○○は△番目に在籍中だ。」と表示するよ。さっきのリスト( ) の ( ) 番目は「番号→名前」だったけど、こっちのリスト( )中の( )の場所は「名前→番号」で逆引きみたいな関係だね。

見つかった場合はイベント( ) を送って待つで「乗員発見」メッセージを送って、他のスプライトに知らせるよ。

#7検索失敗時の処理

ok-scratch

見つからなかった場合は「艦内に確認できない」と表示して終わり。

検索結果に応じてメッセージを送る・送らないを切り替えるのがポイント。この分岐が、あとで作るクルーキャラの登場タイミングを制御するんだ。

#8アモンの待機設定

ok-scratch

続けて、アモンの待機設定も作っておこう。検索で乗員が見つかったときに登場するキャラなんだ。

準備

メッセージ「点呼終了」を追加

すべての点呼処理が完了したときに送信するメッセージ

実装

旗クリックで画面外に配置して隠すのはもう慣れたはず。パッと作っちゃおう。

アモンの登場

ok-scratch

「乗員発見」メッセージを受け取ったら、アモンが(-100, -55)の位置に滑り込んで登場するよ。

準備

スプライト「キャプテン」を開く

メッセージ「ヨシダ任命」を追加

副長をヨシダに交代したときに送信するメッセージ

実装

名前検索が成功したときだけキャプテンからメッセージが送られるから、検索に失敗するとアモンは出てこない。条件分岐とメッセージの組み合わせで登場を制御しているんだ。

アモンの返事

ok-scratch

アモンも「乗員発見」メッセージで「はい！」と返事するスクリプトを追加しよう。

準備

メッセージ「カトウ着任」を追加

カトウを2番目に緊急配属したときに送信するメッセージ

メッセージ「乗員退役」を追加

指定した乗員が名簿から退役したときに送信するメッセージ

実装

これでクルーキャラ全員分の登場・返事のスクリプトが揃ったよ。

#9リストの値を置換する

ok-scratch

ここからはキャプテンに戻って新しいリスト操作を追加しよう。「置き換え」と「挿入」の2つを一気にやるんだ。

準備

スプライト「アニナ（カトウ）」を開く

実装

リスト( ) の ( ) 番目を ( ) で置き換えるで名簿の1番目を「ヨシダ」に書き換えるんだ。元の「アライ」は消えて同じ位置にヨシダが入るけど、書き換えだからリストの長さは変わらないよ。そのあと「ヨシダ任命」メッセー���を送信するんだ。

#10ヨシダの待機設定

ok-scratch

次はヨシダの番だよ。副長に任命されたときに登場するキャラを作ろう。

旗クリックで画面外(-300, -300)に配置して隠す初期設定は、もう何度もやったからサクッとね。

ヨシダの任命登場

ok-scratch

「ヨシダ任命」メッセージを受け取ったら、チャンプが(180, -111)の位置に滑り込んで登場するよ。画面の右側に現れるんだ。

クルーごとに移動先の座標が違うから、メッセージが届くたびにキャラクターが画面上のバラバラな位置に集まってきて、にぎやかになっていくよ。

ヨシダのあいさつ

ok-scratch

チャンプも任命メッセージに反応して「うぇーい」と挨拶するよ。移動しながらセリフが出る仕組みはもうおなじみだよね。

セリフの中身をキャラごとに変えるだけで、それぞれの個性が出せるのが面白いところ。

#11リストにデータを挿入する

準備

スプライト「チャンプ（ヨシダ）」を開く

実装

リスト( ) の ( ) 番目に ( ) を挿入するで2番目の位置に「カトウ」を割り込ませるよ。挿入は既存の要素を後ろにずらして間に入る仕組みだけど、置き換えとの使い分けに気をつけないとカトウの位置にいたクルーが上書きされて消えてしまう。置き換えと違ってリストが1つ長くなるのがポイントだね。

カトウの着任をセリフで伝えたら「カトウ着任」メッセージを送信するよ。

#12カトウの待機設定

ok-scratch

キャプテンがカトウを配属するシーンができたから、今度はそれに反応するカトウ役を作るよ。

アビーと同じパターンで、旗クリック時に画面外(-300, -300)に配置して隠しておくんだ。呼ばれるまで待機するのはクルーキャラ共通の仕組みだね。

カトウの着任登場

「カトウ着任」メッセージを受け取ったら、アニナが画面に登場するよ。表示して(-87, -85)の定位置まで動き( ) 秒でx座標を ( ) に、y座標を ( ) に変えるで1秒かけて滑り込むんだ。

アビーと同じ仕組みだけど、反応するメッセージと移動先の座標が違う。メッセージを使い分けるだけで、どのタイミングで誰が出てくるか自在にコントロールできるんだよ。

カトウのあいさつ

ok-scratch

着任と同時にカトウが「よろしく」と挨拶するスクリプトを作ろう。同じ「カトウ着任」メッセージに2つのスクリプトが反応して、移動と挨拶が並行で走るしくみ。

構造はアビーのときと全く同じ。メッセージ名とセリフを差し替えるだけで、別のイベントに反応するキャラが作れるんだ。

#13リストからデータを消す

準備

スプライト「ベン（発見された乗員）」を開く

実装

調べる( ) と聞いて待つでユーザーに退役する乗員の番号を聞くんだ。

入力された番号のクルーをリスト( ) の ( ) 番目を削除するで名簿から消すよ。削除すると後ろの要素が前に詰まって、リストが1つ短くなる。「乗員退役」メッセージを送って、お別れのセリフで区切りをつけるよ。

追加と挿入はリストを長くして、削除は短くする。置き換えだけはリストの長さが変わらない。この違いを頭に入れておくと、要素番号のずれに気づきやすくなるんだ。

#14ベンの待機設定

ok-scratch

次はベンを作っていくよ。退役メッセージに反応するキャラだね。

旗クリックで画面外に飛ばして隠す。もう何回もやったパターンだから、サクッといこう。

ベンの応答登場

ok-scratch

「乗員退役」メッセージを受け取ったら、ベンが(130, -55)の位置に滑り込んで登場するよ。

ここまで来ると気づくかもしれないけど、クルーキャラは全員同じ4つのスクリプト構成で動いている。反応するメッセージと座標を差し替えるだけで、まったく違うタイミングに登場させられるんだ。

ベンの返事

ok-scratch

「乗員退役」メッセージでベンが「はい！」と返事するスクリプトを追加するよ。登場と同時にセリフが出るいつものパターンだね。

同じメッセージで移動と返事の2つのスクリプトが並行して走る仕組みも変わらないよ。

#15リストの途中にデータを挿入する

準備

スプライト「キャプテン」を開く

メッセージ「乗員入隊」を追加

新規入隊者が名簿に追加されたときに送信するメッセージ

実装

ベンの設定が終わったから、次はキャプテンに戻って新規入隊の処理を追加しよう。調べる( ) と聞いて待つでユーザーに新しいクルーの名前を入力してもらうんだ。

入力された名前をそのままリスト( ) を ( ) に追加するで「■乗員名簿」に追加するよ。ユーザーが自由に名前を決められるから、「答え」変数がリストの値になるのがポイントだね。

歓迎のセリフを言ったら「乗員入隊」メッセージを送信して、新しいクルーキャラを登場させるんだ。最初に名簿を作ったときと同じリスト( ) を ( ) に追加するを、今度はユーザー入力で使っている形だよ。

#16ルミの待機設定

ok-scratch

キャプテンの入隊処理ができたから、次はそれに反応するベン2を作るよ。新規入隊メッセージが届いたら登場するキャラだね。

おなじみの旗クリック初期化で、画面外(-300, -300)に配置して隠しておこう。

ルミの登場

ok-scratch

「乗員入隊」メッセージを受け取ったら、ベン2が(58, -90)の位置に滑り込んで登場するよ。

準備

スプライト「ベン2（退役乗員）」を開く

実装

登場メッセージも座標も違うけど、スクリプトの骨組みはこれまでのクルーキャラと全く同じ。パターンの再利用って楽だよね。

ルミの返事

ok-scratch

ベン2も「乗員入隊」メッセージに反応して「はい！」と返事するスクリプトを追加しよう。

移動と返事が同時に走って、登場しながらセリフが出る。おなじみのコンビネーションだね。

#17最終点呼と解散

リスト( ) の長さで最終的な名簿の人数を確認して「最終人員、○名。」と報告するよ。追加・削除・挿入を繰り返したから、最初の人数とは変わっているはずだね。

「以上、点呼おわり。解散！！」の宣言で、キャプテンのメインストーリーはここまでだよ。リストの全操作を一通り体験したことになるんだ。

#18点呼の終了

全クルーの設定が終わったから、キャプテンに戻ってエンディングを作るよ。リストリスト ( ) を隠すで「■乗員名簿」をステージから非表示にするんだ。

そのあとイベント( ) を送って待つで「点呼終了」メッセージを送るよ。この1つのメッセージで全クルーが一斉に退場して、ロケットが動き出す。最後にキャプテンが「あれ？ロケットは行っちゃダメ…」とつぶやいて、ストーリーのオチになるんだ。

アモンの退場

ok-scratch

「点呼終了」メッセージでアモンも画面外に退場させるよ。全クルー最後の退場処理だね。

準備

スプライト「アモン（新入隊員）」を開く

実装

クルーキャラ全6体のスクリプトが完成。いよいよエンディングの仕上げに入ろう。

アビーの退場

ok-scratch

アビーも同じ仕組みで退場する。

これでアビーの「待機→登場→返事→退場」が完成。この4つのスクリプトのセットがクルーキャラの基本パターンだから、ここからは同じ構造を別のキャラに展開していくよ。

ヨシダの退場

ok-scratch

ヨシダもやろう。

カトウの退場

ok-scratch

カトウも退場するよ。

ベンの退場

ok-scratch

もう慣れたね。

準備

スプライト「キャプテン」を開く

実装

ルミの退場

ok-scratch

「点呼終了」メッセージでベン2も画面外に退場させるよ。全クルー共通の退場処理。

準備

スプライト「ロケット」を開く

実装

#19ロケットの打ち上げ

ok-scratch

クルーが退場したら、今度はロケットの出番。「点呼終了」メッセージを受け取ったら、ロケットが打ち上がる演出を作るよ。

制御( ) 回繰り返すを10回回して、毎回Y座標を20ずつ上げつつ、サイズを10ずつ縮めてコスチュームも切り替えるよ。上昇・縮小・見た目の変化を同時に動かすのがコツで、ロケットが空に飛んでいって遠ざかるリアルな演出になるんだ。

0.05秒のウェイトを入れてアニメーションのスピードを調整しているのもポイントだね。

#20打ち上げ完了

ループが終わったら見た目隠すでロケットを非表示にするよ。飛び去って見えなくなった状態を表現するんだ。

アニメーションの最後に隠すことで、画面上に中途半端な状態で残らないようにしているよ。

#21ロケットの初期設定

ok-scratch

打ち上げの動きを先に作ったから、次は旗クリック時の初期状態を設定するよ。ゲーム開始時にロケットが元通りになっていないと、2回目以降の実行で見た目がおかしくなっちゃうからね。

見た目画像効果をなくすで画像効果をリセットして、サイズを100%に戻す。コスチュームを待機状態のrocketship-eに切り替えるよ。

初期化処理をちゃんと書いておくと、旗をクリックするたびに毎回同じ状態からスタートできるんだ。アニメーションを使うスプライトでは特に大事な考え方だよ。

#22ロケットの表示

ロケットの位置を座標(0, 0)の画面中央にセットして、見た目表示するで表示するよ。これで打ち上げ前の待機状態が完成。

旗をクリックするたびに初期化→ストーリー進行→打ち上げが一連の流れで動くんだ。次回もスクラッチの新しいテクニックを使って作品を作っていくよ。

まとめ

リストブロック11種類、全部使い切ったね！追加・削除・検索・置き換え・挿入と、操作は多いけど、ひとつのストーリーで全部体験するとグッと覚えやすくなるはず。メッセージを使ってスプライトを連携させるしくみも、今回でバッチリ身についたんじゃないかな。次のスクラッチも楽しみにしてて！それにしてもロケットが飛び立ってしまったあと、どうなったんだろうｗ（自分の好みのストーリーをアニメにする練習にもなったと思う！なにか思いついたら作ってみよう。人には見られたくないなら共有しなければ自分しか見れないから、好き勝手に作っちゃおうぜ！）