---
title: Scratchでお買い物！自動販売機をプログラミング@praxiSpace
tags: 
author: [praxiSpace](https://image.docswell.com/user/praxi_S_pace)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/LELM5P8Q7R.jpg?width=480
description: praxiSpaceのイベントでの投影資料です。 Scratch経験者向けのイベントです。フローチャートを使った設計と、変数、配列、分岐、繰り返しといったプログラミングの基本を学びます。  ▍対象者 10～13歳前後のScratch経験者  ▍ゴール 自動販売機を題材に、プログラムの設計と開発の基本を身につける。  ▍作る機能 ・商品を登録する ・お金を投入する ・おつりを返す ・商品を買う ・商品を見る
published: May 02, 25
canonical: https://image.docswell.com/s/praxi_S_pace/Z6V278-scratch-vendingmachine
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/LELM5P8Q7R.jpg)

Scratchでお買い物！
自動販売機をプログラミング
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)


# Page. 2

![Page Image](https://bcdn.docswell.com/page/4JMY34XKJW.jpg)

イベントの進め方
プログラムの流れを整理して、自動はんばい機のプログラムを作ります。
2つのレベルのプログラムを作ります。
レベル1
レベル2
1つの商品を買い物できる
3つの商品から買い物できる
商品名
コーラ
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
商品名リスト
1
コーラ
2
水
3
お茶
2


# Page. 3

![Page Image](https://bcdn.docswell.com/page/PJR9QWN679.jpg)

自動はんばい機に必要なプログラムとは？
自動はんばい機で買い物をするのに必要なプログラムを考えよう！
(例) お金を入れる
1.
自動はんばい機の使い方を
思い出すと考えやすいです。
2.
3.
4.
5.
6.
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
3


# Page. 4

![Page Image](https://bcdn.docswell.com/page/PEXQ5PNDJX.jpg)

作るプログラム
5つのプログラムを作ります。
A. 商品を登録する
商品名とねだんを登録する
B. お金を入れる
入れたお金を自動はんばい機に入れる
C. おつりを返す
自動はんばい機にある入れたお金を返す
D. 商品を買う
入れたお金と商品のねだんをくらべて
買い物をする
E. 商品を見る
商品名とねだんを言う
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
4


# Page. 5

![Page Image](https://bcdn.docswell.com/page/3EK96DNDED.jpg)

プログラムの流れを整理する道具
フローチャート（流れ図）を使うとプログラムの流れを整理できます。
(例) お出かけじゅんびのフローチャート
家を出る
フローチャートの良い点
●
●
晴れている
はい
何も持たない
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
いいえ
プログラムに必要なものを整理できる
プログラムの流れが分かる
○ 他の人も分かりやすい
○ エラーを見つけやすい
かさを持つ
5


# Page. 6

![Page Image](https://bcdn.docswell.com/page/L73W6RVP75.jpg)

フローチャートの部品
開始や動きのほかに、くり返しや分岐を組み合わせて使います。
開始
動き
分岐
くり返し
フローチャート
の部品
Scratchの
ブロックの例
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
6


# Page. 7

![Page Image](https://bcdn.docswell.com/page/87DKVY83JG.jpg)

レベル1（1つの商品）
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
●
A. 商品を登録する
●
変数
●
B. お金を入れる
●
C. おつりを返す
●
「もし～なら」ブロック
●
D. 商品を買う
●
E. 商品を見る
7


# Page. 8

![Page Image](https://bcdn.docswell.com/page/VJPKV68PE8.jpg)

A. 商品を登録する
1. フローチャート
商品を登録するフローチャートをたしかめよう！
旗 をおす
商品名
ねだん
コーラ
130
商品名をコーラにする
ねだんを130にする
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
8


# Page. 9

![Page Image](https://bcdn.docswell.com/page/2EVVZ3NVEQ.jpg)

A. 商品を登録する
2. プログラミング
商品を登録するプログラムを作ろう！
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
9


# Page. 10

![Page Image](https://bcdn.docswell.com/page/57GL43K1EL.jpg)

変数
変数は、あたい（数や文字）に名前を付けるものです。
中身をよび出して、何度でも使えます。
変数にあたいを追加する
変数の中身をよび出す
商品名
商品名
水
水
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
10


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4EQYG5NNJP.jpg)

B. お金を入れる
1. フローチャート
自動はんばい機にお金を入れるフローチャートをたしかめよう！
投入口をおす
入れたお金
お金を入力する
1000
入力したお金のぶん、
入れたお金をふやす
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
11


# Page. 12

![Page Image](https://bcdn.docswell.com/page/KJ4W59G371.jpg)

B. お金を入れる
2. プログラミング
自動はんばい機にお金を入れるプログラムを作ろう！
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
12


# Page. 13

![Page Image](https://bcdn.docswell.com/page/LE1YWKDZ7G.jpg)

C. おつりを返す
1. フローチャート〔問題〕
残った入れたお金を返すフローチャートを考えよう！
おつりレバーをおす
入れたお金
入れたお金を(1)にする
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
(1)
13


# Page. 14

![Page Image](https://bcdn.docswell.com/page/GEWG6DY6J2.jpg)

C. おつりを返す
1. フローチャート〔作成例〕
おつりを返したので、自動はんばい機に入れたお金は0になります。
おつりレバーをおす
入れたお金
入れたお金を_0_にする
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
0
14


# Page. 15

![Page Image](https://bcdn.docswell.com/page/47ZLYGXRJ3.jpg)

C. おつりを返す
2. プログラミング
おつりを返すプログラムを作ろう！
おつりレバー
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
15


# Page. 16

![Page Image](https://bcdn.docswell.com/page/YJ6WDY41JV.jpg)

「もし～なら」ブロック
場合によって動きを変えられます。
入れたお金＞_0_
いいえ
はい
こんにちは！
と言う
うーん...
と考える
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
16


# Page. 17

![Page Image](https://bcdn.docswell.com/page/GJ5M3GQLJ4.jpg)

D. 商品を買う
1. フローチャート〔問題〕
商品を買うフローチャートを考えよう！
ボタン1をおす
(1)≧(2)
はい
ありがとう
と言う
いいえ
入れたお金
ねだん
1000
130
お金が足りないよ
と言う
入れたお金から
ねだんを引く
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
17


# Page. 18

![Page Image](https://bcdn.docswell.com/page/9E29ZYP37R.jpg)

D. 商品を買う
1. フローチャート〔作成例〕
入れたお金がねだん以上なら買い物できます。
ボタン1をおす
入れたお金≧ねだん
はい
ありがとう
と言う
いいえ
入れたお金
ねだん
1000
130
お金が足りないよ
と言う
入れたお金から
ねだんを引く
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
18


# Page. 19

![Page Image](https://bcdn.docswell.com/page/D7Y4RG58EM.jpg)

D. 商品を買う
2. プログラミング
商品を買うプログラムを作ろう！
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
19


# Page. 20

![Page Image](https://bcdn.docswell.com/page/VENYDGN9J8.jpg)

E. 商品を見る
1. フローチャート
商品を見るフローチャートをたしかめよう！
ロボットをおす
商品名とねだんを言う
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
商品名
ねだん
コーラ
130
20


# Page. 21

![Page Image](https://bcdn.docswell.com/page/Y79PGWR3E3.jpg)

E. 商品を見る
2. プログラミング
商品を見るプログラムを作ろう！
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
21


# Page. 22

![Page Image](https://bcdn.docswell.com/page/G78DVNWL7D.jpg)

レベル2（3つの商品）
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
●
リスト
●
A. 商品を登録する
●
B. お金を入れる
●
C. おつりを返す
●
D. 商品を買う
●
「〇回繰り返す」ブロック
●
E. 商品を見る
22


# Page. 23

![Page Image](https://bcdn.docswell.com/page/L7LM5PNQJR.jpg)

リスト
いくつかのあたいをまとめられます。
「商品名1」「商品名2」のように、商品の数だけ変数を作らずにすみます。
リストのあたいを追加する
リストの中身をよび出す
商品名リスト
商品名リスト
1
コーラ
1
コーラ
2
水
2
水
3
お茶
3
お茶
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
23


# Page. 24

![Page Image](https://bcdn.docswell.com/page/4EMY34QKEW.jpg)

A. 商品を登録する
1. フローチャート
商品を登録するフローチャートをたしかめよう！
旗 をおす
商品名リストを空にする
ねだんリストを空にする
商品名リストの 1 番目をコーラにする
ねだんリストの 1 番目を130にする
商品とねだんの
リストを空にする
商品名リスト
ねだんリスト
1
1
コーラ
2
2
3
3
130
商品とねだんの
リストの1番目を
登録する
：
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
24


# Page. 25

![Page Image](https://bcdn.docswell.com/page/PER9QW86J9.jpg)

A. 商品を登録する
2. プログラミング
商品を登録するプログラムをたしかめよう！
商品とねだんの
リストを空にする
商品とねだんの
リストの1番目を
登録する
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
25


# Page. 26

![Page Image](https://bcdn.docswell.com/page/P7XQ5P8DEX.jpg)

B. お金を入れる
／
C. おつりを返す
レベル1と同じなので、変えなくてよいです。
お金を入れる
おつりを返す
おつりレバー
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
26


# Page. 27

![Page Image](https://bcdn.docswell.com/page/37K96DKD7D.jpg)

D. 商品を買う
1. フローチャート〔問題〕
1番目の商品を買うフローチャートを考えよう！
ボタン1をおす
入れたお金
1000
入れたお金≧(1)
はい
ありがとうと言う
いいえ
お金が足りないよと言う
ねだんリスト
1
130
2
100
3
150
入れたお金から
(2)を引く
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
27


# Page. 28

![Page Image](https://bcdn.docswell.com/page/LJ3W6RZPJ5.jpg)

D. 商品を買う
1. フローチャート〔作成例〕
リストからあたいをよび出すときは、番号を指定します。
ボタン1をおす
入れたお金
入れたお金≧
ねだんリストの 1 番目
はい
ありがとうと言う
1000
いいえ
お金が足りないよと言う
ねだんリスト
1
130
2
100
3
150
入れたお金から
ねだんリストの 1 番目を引く
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
28


# Page. 29

![Page Image](https://bcdn.docswell.com/page/8JDKVYR3EG.jpg)

D. 商品を買う
2. プログラミング
1番目の商品を買うプログラムを変えよう！
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
29


# Page. 30

![Page Image](https://bcdn.docswell.com/page/VEPKV6WP78.jpg)

「○回繰り返す（くりかえす）」ブロック
回数を指定してくり返せます。
No を_1_にする
くり返しの中身
_3_回くり返す
1
No と言う
No を_1_ふやす
2
3
4
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
30


# Page. 31

![Page Image](https://bcdn.docswell.com/page/27VVZ38V7Q.jpg)

E. 商品を見る
1. フローチャート〔問題〕
すべての商品を見るフローチャートを考えよう！
ロボットをおす
No を_1_にする
No
1
リストの長さ分くり返す
商品名リスト
ねだんリスト
1
コーラ
1
130
2
水
2
100
3
お茶
3
150
商品名リストの(1)番目と
ねだんリストの(2)番目を言う
(3)を_1_ふやす
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
31


# Page. 32

![Page Image](https://bcdn.docswell.com/page/5JGL43517L.jpg)

E. 商品を見る
1. フローチャート〔作成例〕
番号をふやしながら、リストの中身を見ていきます。
ロボットをおす
No を_1_にする
No
1
リストの長さ分くり返す
商品名リスト
ねだんリスト
1
コーラ
1
130
2
水
2
100
3
お茶
3
150
商品名リストの No 番目と
ねだんリストの No 番目を言う
No を_1_ふやす
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
32


# Page. 33

![Page Image](https://bcdn.docswell.com/page/47QYG5ZNEP.jpg)

E. 商品を見る
2. プログラミング
商品を見るプログラムを変えよう！
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
33


# Page. 34

![Page Image](https://bcdn.docswell.com/page/KE4W5933J1.jpg)

おわりに
●
●
●
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
まとめ
ふり返り
ご案内
34


# Page. 35

![Page Image](https://bcdn.docswell.com/page/L71YWK1ZJG.jpg)

まとめ
フローチャートから、5つのプログラムを作りました。
レベル1
プログラム
プログラムの動き
変数
A. 商品を登録する
商品名とねだんを登録する
✓
B. お金を入れる
入れたお金を自動はんばい機に入れる
✓
C. おつりを返す
自動はんばい機にある入れたお金を返す
D. 商品を買う
入れたお金と商品のねだんをくらべて
買い物をする
✓
E. 商品を見る
商品名とねだんを言う
✓
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
もし～
なら
レベル2
リスト
○回
くり返す
✓
✓
✓
✓
✓
35


# Page. 36

![Page Image](https://bcdn.docswell.com/page/G7WG6D86E2.jpg)

ふり返り
学んだことをふり返りましょう（1分）
(例)
● どんなところが、面白かった？
● どんなところが、むずかしかった？
● 学んだことを、今後どうしていきたい？
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
36


# Page. 37

![Page Image](https://bcdn.docswell.com/page/4JZLYG8RE3.jpg)

作成したプログラムの保存
Scratchアカウントがあれば、作成したプログラムを保存できます。
アカウントを新規作成する
［Scratchにさんかしよう］を選択します。
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
37


# Page. 38

![Page Image](https://bcdn.docswell.com/page/YE6WDYP1EV.jpg)

praxiSpaceのご紹介
学校教育・受験勉強から少し離れた役に立つ学びを提供しています。
（イベントの例）
区分
小学生
低学年
中学年
高学年
中学生～
イベントの一覧や中身を
知りたい方は、公開資料
をご覧ください。
プログラミ
ングとIT
考える力、
伝える力
https://www.docswell.com/c/
a9b43222-f5bd-441b-864b
-c6f35cd1d950
(注) 画像は過去のイベントです。
対象学年の区分は目安です。実際にはより広い学年を対象としています。
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
38


# Page. 39

![Page Image](https://bcdn.docswell.com/page/GE5M3GKLE4.jpg)

本資料の権利と留意事項
［使用画像の出典］
一部の画像は以下のサイトよりダウンロードして利用しています。
●
Loose Drawing
https://loosedrawing.com/
［本資料のライセンス］
●
●
本資料は、株式会社まなび梯（以下「当社」）より、クリエイティブ・コモンズ・ライセンス（CC-BY 4.0）のもとに
提供されています。
本資料の一部の画像には、他の条件でライセンスされている第三者のコンテンツが含まれて
います。
［留意事項］
●
●
●
●
本資料に掲載されている会社名、製品名などの固有名詞は、各団体の商標または登録商標です。
本資料に掲載されている製品名などには、必ずしも商標表示（™、®）を付記しておりません。
本資料の内容について正確な記述につとめましたが、当社は本資料の内容に対して何らかの保証をするものではあり
ません。
本資料で得られた情報の使用から生じるいかなる損害についても、当社は責任を負わないものとします。
株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)
39


# Page. 40

![Page Image](https://bcdn.docswell.com/page/9729ZYW3JR.jpg)

株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)