【ノンビン塾：第6回】フローチャートを書き起こしてから気づくこと
※「ノンビンとは？」となった方へ
前回は自分で書いたフローチャートから
プログラムを書き起こしてみる という
新しいことを実践しました。
let year = 2000;
let res = '平年です。';
// 4で割り切れる場合
if(!year%4) {
// 100で割り切れる場合
if(!year%100) {
// 400で割り切れる場合
if(!year%400 === 0) {
// うるう年です。
res = 'うるう年です。';
}
} else {
// うるう年です。
res = 'うるう年です。';
}
}プログラムを書く といっても
まったくすごいことはしていませんが、
フローチャートがあるだけで
処理を書く難しさが軽減されるのを体感した回でした。
宿題の提出
自動販売機の内容をプログラムに書いてください。
※せっかくフローチャートを書いたので、3つの処理を呼び出してください
使えるのは、変数とif elseif else のみです。
（自販機のボタン光らすとかは、フラグ立てたとかでOK！）
シンプルに考えてね！！
お金を入れたときにボタンが光る処理
ボタンを押したらジュースが出てくる処理
レバーをｶﾞﾁｬｯとしたらおつりが出てくる処理
この3つの処理を書いてきました。
// ナナが入れたおかね
let money = 1500;
// 自販機に入っている総額
let amount = 0;
// 自販機が入れられる上限
let maxCount = 1000;
// 130円のボタン
let button_130 = false;
// 160円のボタン
let button_160 = false;
// 本物のお金か？
if(isMoney(money) === true) {
// お金をカウント
amount = money + amount;
// 入れたお金が自販機の上限を越えた場合
if(maxCount < amount) {
// 吐き出す
} else {
// 総額130円以上か？
if(130 <= amount) {
// 130円のボタンを光らせる
button_130 = true;
}
// 総額160円以上か？
if(160 <= amount) {
// 130円のボタンを光らせる
button_160 = true;
}
}
} else {
// 吐き出す
}1コ目の処理はこう。
(-`ω-)「これさ、書いててどうだった？」
( -᷄ω-᷅ )「ん？うーん、書いてて特に苦労してはいないですが、なんかもっと“やり方あるだろうなぁ”とモヤが残りました」
// 総額160円以上か？
if(160 <= amount) {
// 160円と130円のボタンを光らせる
button_130 = true;
button_160 = true;
}(-`ω-)「例えばだけど、160円のボタンが光るなら130円のボタンも光るよね？（お金が足りているから）」
(-`ω-)「160円の処理のときに、一緒に書けば処理が短くなるよね」
「おかしいな？」と思ったらフローチャートが足りていなかったり
順序が適切でない場合があるんだよ とノンビンは言います。
わたしが宿題で一番悩んだのは、3番目の処理でした。
レバーをｶﾞﾁｬｯとしたらおつりが出てくる処理です。
// ナナが押したジュースの値段
let juicePrice = 160;
// ナナが入れたお金の数
let moneyCount = 1000;
// 500円のおつりの数
let yen_500 = 0;
// 100円のおつりの数
let yen_100 = 0;
// 50円のおつりの数
let yen_50 = 0;
// 10円のおつりの数
let yen_10 = 0;
// おつりがある場合
if(0 < moneyCount - juicePrice) {
// おつり
let change = moneyCount - juicePrice;
// おつりが500より大きいか
if(500 <= change) {
// 500円玉がかえる（計算方法わからない・・・）
yen_500 = Math.floor(juicePrice / moneyCount);
change = change - (yen_500*500);
}
if(100 <= change) {
// 100円玉がかえる（計算方法わからない・・・）
change = change - (yen_100*100);
}
if(50 <= change) {
// 50円玉がかえる（計算方法わからない・・・）
change = change - (yen_50*50);
}
if(10 <= change) {
// 10円玉がかえる（計算方法わからない・・・）
}
}コメントでお助けを願うぐらいに撃沈しました、、
( -᷄ω-᷅ )「処理を書くには、あまりにフローチャートの内容が足りなすぎる気がします」
フローチャートでは「おつりを出す」という処理しか
書いていなかったので、このときわたしは初めて
「どのようにしておつりを出すべきか」頭を使いました。
今までは意識せずとも書けたのに、、
(-`ω-)「このフローチャートだと、見た人が如何様にも判断できてしまうよ」
(-`ω-)「言語化の大切さが分かるよね」
どういう解釈にもできてしまう処理（フローチャート）は
人頼りになってしまいます。
この話を聞いた時に
某 顧客が本当に必要だったもの を思い出しました。
（隠せてない）
※ぐぐれば出てきますので調べてみてね
見た人がわかる、迷わないフローチャートに
することが大切だ とノンビンは言います。
// ナナが押したジュースの名前
let juice = 'cola';
// ジュースを出すかどうか
let juiceFlg = false;
// 売り切れにするかどうか
let soldOutFlg = false;
// ジュースを出す
juiceFlg = true;
// 在庫がない場合
if(isJuice(juice) === false) {
// 売り切れ表示にする
soldOutFlg = true;
}さらに、2番目の処理では
自分の自販機の考え方が少し違っていたことを知りました。
ボタンを押したらジュースを出すだけの、単純な処理です。
( -᷄ω-᷅ )「ナナがコーラのボタンを押したら、自販機がコーラを出します」
(-`ω-)「これさ、“cola”って名前をキーにしてるけどさ」
(-`ω-)「自販機ってナナが押したボタンを“コーラ”だと思ってジュースを出しているのかな？」
む？自販機を押すときの自分を思い返します。
(-`ω-)「ナナはどうやって自分が“コーラのボタンを押した”と判断するの？」
( -᷄ω-᷅ )「ええと、自販機に書いてある絵をみて押してます」
(-`ω-)「そうだよね！でも、自販機って本当に“コーラを出す”って思いながらジュース出してるのかな？」
(-`ω-)「自販機のジュースを補充するおっちゃんって、いちいちコーラを置いてある場所に“これはコーラ”ってデータを入力してるのかな」
( -᷄ω-᷅ )「いえ、人間が“ここはコーラを入れる”と決めたところにコーラを入れるだけなので…コーラのボタンを押すとき、自販機は“なんのジュースを出すか”は意識していないはずです！」
( -᷄ω-᷅ )「もっと言えば、ボタンが押されたら“そのボタンを押したらこの位置のジュースを出す”みたいなことをしていると思います」
同じ「ボタンを押す」ときの動作なのですが、
人間と自販機で思っていることが違うことが分かります。
(-`ω-)「人間が思っている商品と、自販機が思っている商品では、リレーション（関連付け）がされているんだよ」
(-`ω-)「そのリレーションをつないでいるキーとなるものが“ボタン”ってことなんだよね」
たとえばkintoneでも、カスタマイズなどをおこなうときって
フィールド名ではなくフィールドコードで指定しますよね。
なんでフィールドコードかって、
フィールド名は変化するからなんですよね。
自販機もそれと同じで、
同じ位置にいつまでも同じジュースが配置されているとは限りません😤
夏になったらつめた～いだし
冬になったらあったか～いだし
冬になったらコーラが入ってたところに
コンポタが入るかも、、、
すごい初歩的なところから
自販機の解釈が異なっていました😰
(-`ω-)「考えることができたならいいじゃん！成長したな」
今回は宿題をじっくり見直す時間となりました！
ノンビン塾の宿題
※みんなもやってみてね😙✨
自販機のおつりを出す処理をプログラムで書いてください。
「何枚おつりがでるか」「おつりは残り何円か」を関数で返却してください。
※返す方法は、2種類考えてください。
自分で出した答えは第6回に書きます🙆
（暗に次回に続くということを伝える）
ノンビン塾が気になるコラボスタイルのみんなは、
宿題を持って受講してみてくださいね🔥