ノンビン塾について
そもそもノンビン塾ってなに？
→過去の記事参照
前回の課題提出
テーマ
130円の飲み物と160円の飲み物、この２種類しかない自動販売機で、
お金を入れて飲み物が出てくるまでの動きをフローチャートで示す。
※お金は小銭のみ！
回答
実際にお金を入れるシーンを想像しながら作成してみた。
※以下フローチャート内の赤文字はフィードバック
私が作ったフローチャートでは、
おつりが自販機から出てきてから、飲み物がでてくる流れになってしまっている。
「そうじゃない。実際は、飲み物が自販機からでてから、
おつりがチャリンチャリンと出てくる流れやんか！」
と思いつつも、きれいに示せなかった。。
ちなみに、ウッチーの作成したフローチャートも拝見したが、
私と全く違うフローチャートができてて、すごく興味深かった。
フィードバック（改善すべき点）
- 最初100円を2枚投入ってあるけど、コインって2枚同時には入れられないよね。
- おつりを自販機から出す処理と、最後に未処理の小銭を吐き出す処理がある。どちらかはいらない。
- 未処理の小銭があれば吐き出す処理は、分岐だよね。
今回の講義
【テーマ】
実際にコードを書いてみるぞーー！！！
前回作成した、閏年を計算するフローチャートをJavaScriptでかいてみよう。
【事前準備】
・Kintoneの開発者ライセンス入手
⇒アプリ：プログラム練習作成
・プラグイン追加：JSEdit for kintone
・以下の画面（事前準備）
１）まずは、フローチャートに沿って、書かないといけない事を一行ずつ「コメントで」メモしていく
(function() {
'use strict';
kintone.events.on(['app.record.create.submit','app.record.edit.submit'], function(event) {
let str = '';
let num = Number(event.record.年.value)
//ここから～
// 判断４で割り切れるかどうか？
// 判断100で割り切れるかどうか？
// 判断100で割り切れるが、400でも割り切れる
//～ここまで
event.record.結果.value = str;
return event;
});
})();
２）コメントに沿って、条件分岐をかいていく
if(条件式){条件式が成り立った場合処理を実行}else{条件式が成り立たなければ処理を実行}
//ここから～
// 判断４で割り切れるかどうか？
if (num%4 ===0){
// 4で割り切れた
// 判断100で割り切れるかどうか？
if (num%100 ===0) {
// 100で割り切れる
// 判断100で割り切れるが、400でも割り切れる
if (num%400 ===0){
// 100で割り切れるが、400でも割り切れる
str = '閏年です'
} else {
// 100で割り切れるが、400で割り切れない
str = '平年です'
}
} else {
// 100で割り切れない
str = '閏年です'
}
} else {
// 4で割り切れなかった
str = '平年です'
}
//～ここまで
３）一度保存し、実際に機能するか確認
①年のところに、2000を入力し、保存
↑機能してるっぽい！？
続いて他の年も入力してみる。
↑機能してるーーーーー！！
初めて何もない状態から実装したコードで、無事に機能した。
短いシンプルなコードだけど、無事に機能したということもあり、ただただ嬉しかった。
夜にキャッキャワイワイしながらこの日のノンビン塾は無事に終わった。
次回ノンビン塾までの課題
閏年のコードをelseif を使って簡略化する
感想
今回の学び・気づきは、
- いきなりコードをかくのは、駆け出しの頃は絶対NG
- フローチャートに沿って、実装する内容をコメントで残してからコードをかいていく
- あとで見返して思ったが、ネストが深くなっており、読みにくかった。
→ネストが深く読みにくいと初めて実感した。←非常に重要な経験だと思う。
→今後スキルアップしていきながら、シンプルな見やすいコードを書くようにすればよい。