プログラミングの４つの概念を復習しよう
説明
今回からは、ユーザーが数値を入力したりボタンを押すことができる計算機プログラムを作っていきましょう。
目をみはるようなカッコ良いデザインではありませんが、四則演算ができて、少しだけ面白い機能も準備しています。
その前に前回までの復習を兼ねて、以下の質問に回答してください。
頭で思い浮かべるだけで大丈夫ですよ。
- 変数とは何でしょうか？
- 関数とは何でしょうか？
- 繰り返し（ループ）とは何でしょうか？
- 条件判定とは何でしょうか？
もし、理解が怪しい方や前回から間があいてしまった方は、左のメニューからもう一度「プログラミングの始め方 その１〜その４」までを復習してみてください。
それでは、前回と同じように、以下のリンクを開いて課題をダウンロードしてください。
課題のダウンロード
（リンクをクリックすると、Githubデスクトップというアプリケーションが起動して、任意の場所にダウンロード（クローン）出来ます）
VSCodeでダウンロードした課題のフォルダーを開いてください。
課題のフォルダーを開けたら以下のようなファイルが存在するはずです。
├── README.md
├── css
│ └── kadai.css
├── img
│ └── bakuhatsu.jpg
├── js
│ └── kadai.js
└── kadai.html
上から順番に説明します。
- README.md
無視して大丈夫です。 - css/kadai.css
カスケーディングスタイルシートと呼ばれるファイルです。計算機をどのような見た目にするかが書かれています。
今回は扱わないので無視して大丈夫です。 - img/bakuhatsu.jpg
無視して大丈夫です。 - js/kadai.js
今回の授業から皆さんが手を加えていくJavaScriptというプログラム言語のファイルです。 - kadai.html
HTMLと言って、カスケーディングスタイルシートやJavaScriptなどを読み込んで、計算機として整数を入力するテキストフィールドや、ボタンなどを配置するための文書構造を定義しているファイルです。
課題を解くに当たって1箇所だけ見る必要があります。
ファイルはいろいろありますが、kadai.jsというJavaScriptのファイルしか扱いませんので、安心してください。
まずは計算機を動かしてみましょう。
kadai.htmlをブラウザーで開いてください。
Macの方は、VSCodeで「kadai.html」を右クリックして、「Finderで表示します」を選択し、「kadai.html」をダブルクリックしてください。
このページを見るときも使っていますよね。
ブラウザーで開いたら、「整数１」と「整数２」に好きな数字を入れて、”＋”が選択されたまま「計算する」ボタンを押してみましょう。
足し算の結果が表示されたでしょうか。
それでは、”ー”を選択するとどうでしょうか？
答えの欄には”undefined”と無愛想に表示されるだけですよね。
プログラムを見てみましょう。VSCodeで「kadai.js」を開いていますか？
2行目にキーワード「function」が出てきました。そうです。「keisan_suru」は関数です。
「seisu1」や「seisu2」「enzanshi」「kotae」といったものは変数です。（constやletというキーワードは、今は気にしないで大丈夫です）
続いてみていきましょう。
8行目にキーワードの”if“が出てきました。
前回までに学習した内容を踏まえると、８行目から１０行目までが何となく条件判定をしているということが分かりますよね。
さらに注意深くプログラムを読んで見ると、
8行目の ‘+’ という記述が、計算機の画面で選択した「＋」という記号に一致しています。
（”===”は、JavaScriptで文字列が同一かどうかを判定する時に使います）
ただ、「－」や「÷」「×」といった記号に該当する条件は、今の「kadai.js」には書かれていません。
課題
それでは、「＋」以外が選択された時に正しい計算結果が表示されるようにプログラムを修正してください。
” // TODO 1〜”
というのは、コメントと言って、プログラマーが残したプログラム中のメモで、プログラムの実行に影響を与えません。
課題を解く上で、もはやこのコメントは要りませんので、消してしまって大丈夫です。
ヒント
- 変数「enzanshi」と比較する文字列は、「kadai.html」の中の、２０〜２３行目のoptionというHTMLタグのvalueの値です。
- JavaScriptというプログラム言語の条件判定は、前回まで学習したBashと同じように、elseというキーワードの他に３つ以上の条件が必要な場合は、else ifという条件を加えることができます。（Bashもelifと書くことでelse ifの条件を書くことができます）
} else if (条件2) {
} else if (条件3) {
} else {
// どの条件も満たさない場合。
}
プログラムの修正が終わったら、自分で画面を操作して、実際に動作を確認してください。
入力された内容に応じて正しい答えが表示されるようになったら、今回の授業は終了です。
メニューバーの「更新」ボタンを押すか、アドレスバーで何も編集せずにEnterキーを押すと再読み込みができます。
答え合わせ
こちらのリンクから「kadai.js」の変更点を確認できますので、ご自分の変更内容と見比べてみてください。
お疲れさまでした！
