【ノンビン塾：第5回】フローチャートから処理を起こそう！
※「ノンビンとは？」となった方へ
前回はいよいよ
シーケンス図とフローチャートの
集大成みを感じました。
今までは、「シーケンス図だけ」「フローチャートだけ」
書くことがメインでした。
それを、第4回ではコラボして実践しました🐒
宿題の提出
ナナは喉が渇きました。
どいなかだから、周りにコンビニがありません。
道を歩いていると、自動販売機がありました。（救世主！）
飲み物買おうとおもったら、130円または160円のものしか売ってない。
お金が入って飲み物が出てくるまでの動き（自動販売機）を
フローチャートとシーケンス図で書いてください。
※投入されるお金は小銭のみとします
(-`ω-)「宿題の内容を説明してみて！」
( -᷄ω-᷅ )「ジュースを買っておつりを出す前提です」
( -᷄ω-᷅ )「お金を入れたとき、自販機はモノホンかどうかをチェックします」
( -᷄ω-᷅ )「モノホンだったら、（お金をカウントする前に）小銭をおなかに蓄えられるかをチェックします」
( -᷄ω-᷅ )「あとは、自販機の中に入っているお金の数でボタンを光らせるかどうかを決めて終了です！」
( -᷄ω-᷅ )「次はボタンを押してジュースを出すところです」
( -᷄ω-᷅ )「ボタンが押されたら、まずジュースがあるかを確認します」
( -᷄ω-᷅ )「ジュースがあったら、出します」
( -᷄ω-᷅ )「ジュース出したあとにも、同じように確認します」
( -᷄ω-᷅ )「ジュースがなかったら、売り切れランプを光らせます」
( -᷄ω-᷅ )「最後におつりを出して終了です！」
(-`ω-)「ちゃんと考えてきたね！」
全体の説明が終わったら、ノンビンが処理について
色々と質問をしてくれます。
(-`ω-)「処理１の お金を食べれるか のところが気になる」
( -᷄ω-᷅ )「自販機に入ったお金を貯めておく場所にはきっと限度があるので、お金をカウントする前に確認するようにしました」
(-`ω-)「そうだよね！でも、ナナが入れたお金が10円玉なのか100円玉なのか分からない状態だよね？」
(-`ω-)「貯めておくことができるかどうか判定することって、できるのかな？」
( -᷄ω-᷅ )「確かに！10円玉の棚を見てからカウントしていると思いました」
(-`ω-)「じゃあ、次の質問ね」
(-`ω-)「ジュース出したあとに売り切れ表示にするかやってるじゃん？」
( -᷄ω-᷅ )「はい」
(-`ω-)「これって、なんでナナがお金を入れるときに売り切れ表示にしないの？」
この質問は、実際にわたしが宿題を作っているときに
悩んでいたところでした。
( -᷄ω-᷅ )「んんと」
( -᷄ω-᷅ )「ナナが自販機の前に立ったとき、既に売り切れてるジュースはランプがついています」
( -᷄ω-᷅ )「それは、前の人がそのジュースを買って、売り切れにさせたからです」
( -᷄ω-᷅ )「ナナはお金を入れるとき、売り切れランプがついているものは買う選択肢にいれません」
( -᷄ω-᷅ )「なので、処理に書きませんでした」
(-`ω-)「そっかそっかー！！いいじゃん、考えられてるじゃん！」
( -᷄ω-᷅ )「今回は自信をもって宿題出せました！」
前回の宿題では、自分でも「トンチンカンだなぁ…」
と思いながら提出してしまったので、
今回の宿題は芯が通ったものにしようと
時間をかけて書き込んでいきました。
ただ、今回の宿題は塾の期間が空いたこともあり
ある日突然思いついて書き足したりすることが多かったです。
(-`ω-)「思いついたときにケーススタディしたほうが良いよ！」
思いつくときは、きっかけが絶対にあるはず。
とノンビンは言いました。
自販機の処理を思いついたときは、
自分が自販機で（実際に）ジュースを買ったときに
「あ、売り切れランプ出てるなぁ」
「…売り切れランプの処理書かなきゃ！！」
と気付いたりとか、
朝ハミガキしてるときに突然思い出したように
思いついたりしてたと思います。
突然思いついたときほど
唐突に忘れてしまう傾向があるので
その場で書き足したり、メモを残してました。
(-`ω-)「もっとひでーもん来ると思ったから時間が空いたわ」
本日のお題
今回はフローチャートを書く でも
新しいところに進む でもありません。
(-`ω-)「フローチャートからプログラム書いたことある？」
( -᷄ω-᷅ )「ないです…」
ないならばやってみよう！ということで
自分が作ったフローチャートを元に プログラムを書いていきます！
(-`ω-)「厳密には、プログラムを書くときの基礎となる考え方を教えるよ」
使うフローチャートは、前回の宿題で書いた
うるう年のヤツです。
(-`ω-)「このうるう年のヤツ、処理はいくつある？」
( -᷄ω-᷅ )「え ええと ううんと ……5つ！！」
フローチャートを構成するパーツの数 ＝ 処理の数だよ
とノンビンは言います。
(-`ω-)「じゃ、おれトイレ行ってくるから その間にJavascript書く準備しといてね」
(-`ω-)「プログラム書くって言っても、難しいものを書く必要はないよ」
戻ってきたノンビンは言います。
(-`ω-)「まずはフローチャートの内容を全部コメントに書いていこうか」
(-`ω-)「一番最初の条件分岐を書いてみて！」
// 4で割り切れる場合
// 4で割り切れない場合(-`ω-)「その次の条件分岐も書いてみて！」
// 4で割り切れる場合
// 100で割り切れる場合
// 4で割り切れない場合(-`ω-)「ちょっと違う 100で割り切れるかどうかは4で割り切れる場合の処理だよね？」
// 4で割り切れる場合
// 100で割り切れる場合
// 4で割り切れない場合100で割り切れるヤツの条件分岐は、ネスト（段落）が必要です。
(-`ω-)「その要領で全部書くと？」
// 4で割り切れる場合
// 100で割り切れる場合
// 400で割り切れる場合
// うるう年です。
// 400で割り切れない場合
// 平年です。
// 100で割り切れない場合
// うるう年です。
// 4で割り切れない場合
// 平年です。(-`ω-)「フローチャートの条件分岐って、プログラムだとなに？」
( -᷄ω-᷅ )「if です」
(-`ω-)「そうだよね」
(-`ω-)「じゃあ、ifとelseだけでこのコメントの通りに書いてみて！」
余計なことはせず、フローチャートに忠実に書いていきます。
※ちょっと割り算にてまどったなんて言えない
let year = 2000;
let res = '';
// 4で割り切れる場合
if(year%4 === 0) {
// 100で割り切れる場合
if(year%100 === 0) {
// 400で割り切れる場合
if(year%400 === 0) {
// うるう年です。
res = 'うるう年です。';
}
// 400で割り切れない場合
else {
// 平年です。
res = '平年です。';
}
}
// 100で割り切れない場合
else {
// うるう年です。
res = 'うるう年です。';
}
}
// 4で割り切れない場合
else {
// 平年です。
res = '平年です。';
}( -᷄ω-᷅ )「かけました」
(-`ω-)「これを書く時に、悩んだことあった？」
( -᷄ω-᷅ )「いえ、フローチャート見ながらやったので悩んでないです」
設計書がある意味 っていうのはこういうところ
だと、ノンビンは言います。
設計書がきちんとしていれば、作り手が意識せずとも
その通りにプログラムを組むことができるからです。
(-`ω-)「実際にできたプログラムを見て、どう思う？」
( -᷄ω-᷅ )「直したいですね」
(-`ω-)「なぜ？」
( -᷄ω-᷅ )「同じ処理をいっぱいしているから です」
同じ処理をいっぱいする ＝ 冗長化しています。
処理を書いて、はじめて冗長化している箇所を認識して修正します。
リファクタリングですね！
(-`ω-)「ふくちゃんとかがそれをやらないのは、頭の中でそれができるからなんだよね」
↑コラボスタイルのふくちゃんです
(-`ω-)「if else elseif だけを使って修正してみて！」
冗長化しているところを直していきます。
( -᷄ω-᷅ )「平年のときよりも、うるう年のときのほうがめんどくさいから…」
( -᷄ω-᷅ )「4で割り切れない時は絶対に平年…」
let year = 2000;
let res = '';
// 4で割り切れる場合
if(year%4 === 0) {
// 100で割り切れない場合
if(year%100 !== 0) {
// うるう年です。
res = 'うるう年です。';
}
// 100で割り切れる場合
else if(year%400 === 0) {
// 400で割り切れる場合
// うるう年です。
res = 'うるう年です。';
}
// 400で割り切れない場合
else {
// 平年です。
res = '平年です。';
}
}
// 4で割り切れない場合
else {
// 平年です。
res = '平年です。';
}そして修正した内容がこちら。
if else elseif をふんだんに使いました。
( -᷄ω-᷅ )「冗長だなぁ…」
(-`ω-)「正解ってないんだけど、おれが作ったやつも見せるね」
let year = 2000;
let res = '平年です。';
// 4で割り切れる場合
if(!year%4) {
// 100で割り切れる場合
if(!year%100) {
// 400で割り切れる場合
if(!year%400 === 0) {
// うるう年です。
res = 'うるう年です。';
}
} else {
// うるう年です。
res = 'うるう年です。';
}
}ノンビンがなおした内容がこちら。
これを見たときに はっっ( ;ﾟдﾟ) となりました。
( -᷄ω-᷅ )「メッセージのデフォルト値だ！！！」
let res = '平年です。';最初に宣言しているココですね。
平年の方がうるう年より多いんだから、デフォルト値にしてしまえば
早い話でした、、、
(-`ω-)「if else elseif だけを使って修正してみて！」
最初にこうやって聞いたから、
いかにふんだんに条件分岐を活用するか に気を取られてしまいました。
いかん、いかん
またシンプルに物事を考えることができなかったです😰
(-`ω-)「平年のほうが多いってことは、平年の処理はなるべく通りたくないよね」
(-`ω-)「平年の処理をなくせば、処理もなくなるし」
(-`ω-)「なくなった数だけレスポンスも早くなるよね」
処理が1つでも多くなると、不具合が発生する可能性も増える。
余計な不具合を出さないためには、余計な処理を書かないようにする。
この心が大切だよ とノンビンは言いました。
(-`ω-)「今は検索すれば答えがたくさん出てくるしさ」
(-`ω-)「普段の業務でも検索に頼ること多いと思うけどさ」
何も検索せずに イチから自分で考えること
最近ないので、良い経験になりました。
ノンビン塾の宿題
みんなもやってみてね😙✨
自動販売機の内容をプログラムに書いてください。
※せっかくフローチャートを書いたので、3つの処理を呼び出してください
使えるのは、変数とif elseif else のみです。
（自販機のボタン光らすとかは、フラグ立てたとかでOK！）
シンプルに考えてね！！
自分で出した答えは第6回に書きます🙆
（暗に次回に続くということを伝える）
ノンビン塾が気になるコラボスタイルのみんなは、
宿題を持って受講してみてくださいね🔥