上忍教材 No1:
大きな複雑なプログラムを作る方法(解説)
この資料は、学習を始める前の準備としてやった2つの課題の解説をしています。解説で、プログラムを作る時の、いろいろな設計方法と、大きな複雑なプログラムを作る時のポイントについて考えていきます。
この資料のプログラムは「⾼校自動販売機」のスタジオに入っています(Scratchの中で検索してみてください)。

自動販売機って、どこにでもあって便利だよね

2つの課題を、またやってみていな
い人は、こちらに課題があります。
http://beyondbb.jp/CDmama/materials/JouninNo.1_Module_Kadai20191
0.pdf

Go Ota, 2019 CoderDojo市川真間

1課題1の解説: 簡単な自動販売機
簡単な自動販売機の動作〇旗を押したら(始め)・お⾦の表示は0・飲み物ボタンは〇100円をクリックしたら・お⾦の表示は100・飲み物ボタンは〇をクリックしたら・飲み物のスプライトを取り出し口に表示する。
・お⾦の表示を0にする。

「簡単自販機ベース」の名前で、スプライトが用意されています。これをリミックスして作ってみましょう。
https://scratch.mit.edu/projects/335186683/※ Scratch内で、「簡単自販機ベース」で検索できます。

2

一番簡単な自動販売機とフローチャート
簡単な仕組みの自動販売機
・100円玉を1枚だけ入れられる・商品は1つだけ・飲み物ボタンだけ

100円

開始
No

Yes

⾦額0000

⾦額を100円にする
No

まず、始めの一番簡単な自動販売機について考えてみましょう。お⾦を入れることと製品のボタンを押すことしかできません。
このプログラムの動作を、プログ
ラムの設計図であるフローチャートで表すと右の図のようになります。

お⾦が投入される

飲み物ボタンが押される
YesNo

お⾦が100円入っている
Yes

飲み物缶を出す3

フローチャートの書き方
プログラムの開始と終わり(開始)

処理の流れの表記(アルゴリズム)
分岐型
逐次型(直線型)
処理1
処理2(終了)No条件

条件

Yes

Yes

Yesの処理Yesの処理

No

Noの処理

処理3

プログラムや人間の判断などのアルゴリズムは基
本的に、逐次型、分岐型、ループ型の組み合わせで表現できますね。

ループ型(繰返し型)
ループの処理ループの処理

No

終了条件

Yes

No

終了条件

ループの処理Yes

無限ループ

後判断ループ前判断ループ4

簡単自販機テキスト

簡単自販機の動作とプログ
ラムを確認するため、まず文字(テキスト)で動作するもので確認してみましょう。
https://scratch.mit.edu/projects/1
42638853/※ Scratch内で、「簡単自販機テキスト」で検索できます。

5

課題1の解答サンプル(缶のコード)プログラムには、いろいろな方法があります。こ
こでは一つのサンプルを示します。
横になったカンにメインのプログラムがあります。

https://scratch.mit.edu/projects/335186400/※ Scratch内で、「簡単自販機サンプル01」で検索できます。

6

課題1の解答サンプル(お⾦と商品ボタンのコード)
お⾦

商品ボタン

7課題2: 本格的な自動販売機の解説
次のスライドで仕様を示した本格的な自動販売機はかなり難しいので。
まず、飲み物が1種類だけの本格的な自販機をつくりながら、いろいろな設計方法やプログラムを⾒ていきます。
設計方法としては、次の3つの紹介します。
・フローチャート
(前のスライドで紹介済み)
・複合設計
・UML
(シーケンス図とオブジェクト図8課題2: 本格的な自動販売機(1)
本格的な自動販売機を作ります。
次のようなものが入ったプログラ
ムが用意されています。これをリミックスして作ってみましょう。
・全部のスプライト
・基本的な変数
・初めに商品A〜Cの数を入⼒する部分。
・100円と10円が効果投入口まで動くプログラム

難しいプログラムですが、出来るところまでつくってみましょう。
https://scratch.mit.edu/projects/332530818/※ Scratch内で、「自販機ベース」で検索できます。

9課題2: 本格的な自動販売機(2)自動販売機の動作〇旗を押したら(始め)・質問に答えて、商品A,B,Cの数を入⼒(作成済です)〇お⾦の動作・100円玉、10円玉をクリックしたら投入口まで移動(作成済です)
・お⾦が投入口までいったら、対応する⾦額が[お⾦]として増えて表示〇購入ボタンA/B/Cの動作・対応する在庫[商品A/B/Cの数]があって、[お⾦]があったらonにする。
(お⾦が入るたびにチェックしてonにします)・上記以外はoff
・購入ボタンがonの時、対応する商品を取り出し口に表示する。
〇売り切れボタンの動作・対応する在庫[商品A/B/Cの数]あるときoff, ない時on〇返却ボタン・押すと、[⾦額]を0にする。
例えば、商品Aの数が1で⾦額が300の時、購入ボタンAがonの時、それを押すと、商品Aが表示され、その後、売り切れボタンAがoffになり、お10⾦があっても購入ボタンはoffにする。

1種類自動販売機(その1)100円
売り切れ⾦額0000

簡単な仕組みの自動販売機
・100円玉を1枚だけ入れられる・商品は1つだけ・商品切れランプは有り
・お⾦返却ボタンは無し

もう少し複雑な自動販売機を考えてみましょう。売切れランプを追加します。
フローチャートも少し複雑になりますね。ポイントは、開始直後と「飲み物缶を出す」の後の二か所に、商品の確認をして売切れランプの処理が入ることにあります。
初めに品物が無い場合もあります
から

開始
Yes

商品がある
No

売切れランプOn
No

お⾦が投入される

Yes

⾦額を100円にする
No

飲み物ボタンが押される

No

お⾦が100円入っている

Yes
Yes

飲み物缶を出す
No

商品がある
No

売切れランプOn

11ちょっとだけ複雑な1種類自動販売機

120円

返却

売り切れ

⾦額0000

ちょっとだけ複雑な1種類自動販売機
・100円玉を1枚だけ入れられる・商品は1つだけ・商品切れランプは有り
・お⾦返却ボタンは有り

もう少し複雑な自動販売機を考えてみましょう。お⾦返
却ボタンを追加します。
だいぶ、課題2にちかくものになります。
自動販売機といっても、いろいろな方法でプログラミングできます。そのいくつかを、その設計図といっしょに⾒ていきましょう。
12

単純なフローチャートをもとにしたプログラム

開始
Yes

商品がある

No

売切れランプOn
No

お⾦が投入される
Yes
⾦額をxxx円にする

返却ボタンの追加では、お⾦が現在投入されたとか、⾦額表示を0円にするなどの処理も必要ですね。
このぐらいになるとフローチャートもごちゃごちゃして判りにくくなりますね。

No

返却ボタンが押された
Yes
お⾦が投入されている
Yes
お⾦を返却する

No⾦額を0円にする。
NoNo

No

飲み物ボタンが押される
Yes
お⾦が100円入っている
Yes
飲み物缶を出す商品がある
No
売切れランプOn

13

フローチャートをもとにした1種類自販機サンプル01

フローチャートをもとにしたプログラムです。
これもかなりぐちゃぐちゃしてきましたね。

https://scratch.mit.edu/projects/142682702/※ Scratch内で、「 1種類自販機サンプル01 」で検索できます。

14

サブルーチンですっきりさせたフローチャート
メインルーチンサブルーチン1

サブルーチン2

開始

売切れランプの処理

返却ボタンの処理

売切れランプの処理
No

お⾦が投入される
Yes
⾦額をxxx円にする
返却ボタンの処理

NoNo

飲み物ボタンが押される
Yes
お⾦が100円
入っているYes
飲み物缶を出す
売切れランプの処理

Yes

商品がある
No
売切れランプOn
戻る
サブルーチンの終わりは「戻る」No

返却ボタンが押された
Yes

お⾦が投入されている
Yes
お⾦を返却する

No

⾦額を0円にする。
戻る

フローチャートが複雑になってきたら、サブルーチンを使いましょう。これは、を使って、フローチャートを分けることができます。サブルーチンに対して、大元のものをメインルーチンと呼びます。
人間は沢山の情報をいっぺんに扱うことができません。そこでチャンクという個別の情報の塊にして扱います。

15

メインルーチンでもっとすっきりしたフローチャート
メインルーチン開始
売切れランプの処理

お⾦投入の処理
返却ボタンの処理

No

サブルーチン4

サブルーチン3

飲み物ボタンの処理

お⾦投入の処理

飲み物ボタンが押される
Yes
お⾦が100円入っている
Yes
飲み物缶を出すNoNo

お⾦が投入される
Yes

⾦額をxxx円にする
戻る

売切れランプの処理
飲み物ボタンの処理
戻る

サブルーチンをもっと作るとメインルーチンがもっとすっきりします。こうすると、この時点の自動販売機のプログ
ラムは1つのメインルーチンと4つのサブルーチンから構成されます。

売り切れランプの処理と、返却ボタンの処理は、前のスライドのサブルーチン1と2と同じになります。

別の設計方法: 構造化設計
上のモジュールが下のモジュールを利用している

自動販売機

3つの処理がループになっていることを表す①
売切れランプの処理をする。

お⾦投入後の処理をする。

返却ボタンの処理をする。
つり銭切れの処理をする。

飲み物ボタンの処理する。
①①につながって、「売切れランプ…」を利用

フローチャートはコンピュータのプログラムを設計する一つの手法ですが、あまり大きなプログラムには向いていません。現在では多くの設計手法がありますが、構造化設計は古いものですが、手軽に利用できます、また現在の設計手法の考え方のベースになっています。
フローチャートは処理の流れを中⼼に考えますが、構造化設計はモジュール(サブルーチン)の構造や関係を中⼼に表現します。
この構造を考えると上図のようにシンプルなものになります。
参考図書:ソフトウェアの複合/構造化設計,G.J. マイヤーズ(1978)

17

複合/構造化設計の書き方

ループ(繰り返し)

メイン
この矢印でくくります。

処理/機能A

処理/機能B

処理/機能C

処理/機能E

処理/機能F①
処理/機能D

処理/機能H

処理/機能I

基本的なやりかた
プログラムの内容を、どんどん処理や機能で分解していく。分解していって、その処理や機能(モジュール)のプログラムの内容がたいだい想像できたら、分解は終了。

処理/機能D①
分岐
この四角で条件で呼び出しすることを示します。

Scratchで新しいプログラムを作る時も、どんな構造(どんなモジュールから構成されるか)設計してつくるといいかもしれません。

18

モジュール化した1種類自販機サンプル02(1)モジュール(サブルーチン)使ったプログラムです。随分すっきりしたように⾒えます。

https://scratch.mit.edu/projects/142809844/※ Scratch内で、「 1種類自販機サンプル02 」で検索でき

19

モジュール化した1種類自販機サンプル02(2)20現在お勧めのUMLで設計してみよう

UMLは(統一モデリング言語: Unified Modeling Language）は、現在のシステム/ソフトウェア開発で主流になっている、オブジェクト指向分析や設計のための、設計のしかたです。全部で、13種類の設計の図式が決められていて、これらのいくつかを使って、分析・設計していきます。

ソフトウェア/システムの設計ですること〇振舞いプログラムがどんな機能を持って、どう動くかの設計です。特に人間の使うプログラムの場合は、どんな操作をしたら、どう動くかを設計します。フローチャートでもどのような動きをするかを、ある程度表すことができます。
〇構造プログラムの中⾝がどのような処理や機能が組み合わさっているかを設計します。先に示した複合/構造化設計もこの構造やモジュールを簡易的にひょうげんするものです。UMLでは、モジュールをオブジェクトという単位として設計していきます。
〇相互作用
振舞いの一種ですが、プログラムの中のモジュールやオブジェクトの動作に注目して設計していきます。

振舞いをアクティビティ図で設計してみる
自動販売機を使う時の状態をフローチャートをアクティビティ図として書いてみました。
お⾦を入れる

商品購入可能

飲み物ボタンを押す

飲み物
商品無

飲み物
商品有

飲み物缶を出す

飲み物ランプ変更
売切れランプ変更

左のフローチャートは、プ
ログラムのすべてを正しく表してはいませんが、人からみたプログラムの使い方を大まかに表しています。

相互作用をシーケンス図で設計してみるプログラムの内部の動作を設計してみましょう。ここでは、UMLのシーケンス図を使って、それぞれの機能や処理がどのように連携して動くか設計しています。
入金販売ボタンレジスタ処理
(ネコ)

返金ボタン

販売ボタン
表示

商品
出し売切れ
表示

返金口

金額変更
表示変更

入金

ボタン選択

金額変更
表示変更

返却

商品
出し表示
変更

金額変更
表示変更

はメッセージのやりとり

23

構造をオブジェクト(クラス)図で設計してみる
入金

缶飲料制御
(ネコ)

-入金処理()
返却-返却処理()- 投入金額変数- 在庫数変数+商品名変数+お金変数+金額変更処理(お金)+商品出し処理(商品名)

売切れ表示+売り切れボタン変更処理(商品名、在庫数)
販売ボタン-ボタン選択処理+販売ボタン変更処理( 商
品名、投入金額, 在庫数)

商品出し
+商品出し処理(商品名)
現在多くのプログラムがオブジェクト指向をもとに開発されています。オブジェクトは個々のプログラムがある役割を持って、それが協働して動くことにより大きな仕事をするものです。ここでは、Scratchのスクリプトごとに機能をオブジェクト図類似したもので表現してみました。

24

オブジェクト(クラス)図の書き方
オブジェクト図でプログラムの構造を書き方です。(UMLでは、クラス図と、オブジェクト図に二種類あるますが、ここでは、Scratchで設計しやすいように、オブジェクト図にクラス図の要素をいれたもので説明します。)
オブジェクト名(クラス名)/
Scratchでのスプライト
属性(変数)- 変数(そのスプライトだけが値を変更できる。他のスプライトは値を見れる)+変数(いろいろなスプライトが値を変更できる。)
操作(モジュール/処理)-モジュール/処理(そのスプライトの内部で拡張ブロックやメッセージで使用する)+モジュール/処理(他のスプライトからメッセージなどで呼び出しできる)

缶飲料制御
(ネコ)
- 投入金額変数- 在庫数変数+商品名変数+お金変数+金額変更処理(お金)+商品出し処理(商品名)-変数 を使用することで、変数の値を変更している場所が明かになり、プログラムを正しく動かすことができるようになります。
25

シーケンスを主にした1種類自販機サンプル03(1)シーケンス図とオブジェクト図をもとにしたプログラムです。やりとりの部分をできるだけScratchのメッセージを使って作っています。もともと、Scratchのスプライトは独⽴したオブジェクトなので、ランプの状態変化などはメッセージを使うとすっきりします。

1種類自販機サンプル02の場合常にお⾦を監視して変更する必要がある。

1種類自販機サンプル03の場合メッセージを使っているので、すっきりして確実。

https://scratch.mit.edu/projects/142911635/※ Scratch内で、「 1種類自販機サンプル03 」で検索できます。

26

シーケンスを主にした1種類自販機サンプル03(2)
ネコのスプライトのコードが中⼼になっています。

27

シーケンスを主にした1種類自販機サンプル03(3)28大きな複雑なプログラムを作る方法(まとめ)Scratchでの方法ですが。
〇モジュール化
Scratchは、もともとスクリプトでプログラが機能ごと分けられていますが、さらにスクリプトの中を適切な機能の⼩さなモジュールで作ります。簡単に設計する場合は複合/構造化
設計つかうといいでしょう。しっかり設計するとはきUMLの各図を使います。
〇オブジェクト化/変数のスコープ
特に変数を利用できるスコープ(どのスプライトが変数の内容を変更できるか)を考えます。変数の変更を一つのスプライトに限定するとプログラムの動作がわかりやすくなります。
さらに、スクリプト間の動作の引き渡しについては、スコープ図などで、どのようなメッセージを使うか明確にすると良いでしょう。

課題2の解答例: 自販機サンプル01
拡張ブロックを使って複合/構造化設計に近い形でプログラムを作成したものです。
繰り返し(ループ)処理で、各状態を確認しながら動作します。
下記のプログラムの中⾝を確認してください。

https://scratch.mit.edu/projects/332540159/※ Scratch内で、「 自販機サンプル0130」で検索できます。

課題2の解答例: 自販機サンプル02

メッセージを使って割り込み処理を⾏い、シーケンス図に近い形でプログラムを作成したものです。
各スクリプトがメッセージのやりとりで動作します。

https://scratch.mit.edu/projects/3327
53941/※ Scratch内で、「 自販機サンプル02 」
31で検索できます。

自動販売機さん、いつもご苦労様です何気ない自動販売機でも、いろいろなプログラムの作り方がありますね。

32