標準関数を知ろう
説明
それでは計算機のプログラムを作る最後の授業です。
皆さんの「kadai.js」は現在、このようになっているのではないでしょうか？
(「bakuhatsu」「reset」関数は表示していません)
さて、3行目をみてください。
まだ、”TODOのコメント”がありますね。
試しに、整数１に何も入力しないで「計算する」ボタンを押すと、答えはどうなるでしょうか？
「NaN」というちょっと意味が分からない文字が表示されましたよね。
これは”Not a Number”の略です。数字ではありませんよという意味で、４行目の「parseInt」という文字列を数値に変換する関数を呼び出した結果が数字ではないということを意味しています。
それでは、ユーザーが整数１と整数２に何も入力しなかった場合、メッセージを表示してちゃんと入力してもらうようにしましょう。
ここまで学習してきたことを踏まえれば、”何も入力されていなかったら”という「if」の条件判定を追加すれば良さそうだというのは分かりますよね。
少しプログラムを分解してみましょうか。
今の4行目は、このようになっています。
これを、以下のように変更して、ユーザーが整数１に入力した文字列だけを取り出すようにしましょう。
const nyuryoku1 = document.getElementById('seisu_1').value;
// nyuryoku1をparseInt関数の引数にして、戻り値をseisu1に保存する。
const seisu1 = parseInt(nyuryoku1);
上のように変更すると、「nyuryoku1」という変数には、ユーザーが「整数１」というテキストフィールドに入力した文字列が保存されるようになります。
そして、次のようにこの変数をチェックして未入力だったら、という判定を追加すれば良さそうだな、というのが分かると思います。
const nyuryoku1 = document.getElementById('seisu_1').value;
if (nyuroku1が未入力だったら) {
// 計算ができないので、メッセージを出して、この「keisan_suru」関数をやめる。
}
// nyuryoku1をparseInt関数の引数にして、戻り値をseisu1に保存する。
const seisu1 = parseInt(nyuryoku1);
プログラムを分解し、徐々に目的の形に近づいてきました。
続いて、未入力かどうかを判定するためには、どうしたら良いでしょうか？
未入力とは、つまりテキストフィールドが空（から）ということです。
空ということを判定するためには、「比較する変数 === ”」という書き方をします。
シングルクォーテーションを２つ連続して書くことで、空とイコールかどうか（つまり何も入力されていない）ということが表現できるんですね。
他の判定方法に興味がある方は、以下のキーワードでインターネットを検索してみてください。
”JavaScript 空文字 判定方法”
空白とはスペースなどの文字をさします。
（スペース１文字は空ではありません）
const nyuryoku1 = document.getElementById('seisu_1').value;
if (nyuryoku1 === '') {
// 計算ができないので、メッセージを出して、この「keisan_suru」関数をやめる。
}
// nyuryoku1をparseInt関数の引数にして、戻り値をseisu1に保存する。
const seisu1 = parseInt(nyuryoku1);
続いて、メッセージダイアログを出す便利な関数「alert」があるので、これを使ってメッセージを表示し「keisan_suru」関数の残りのプログラムが実行されないようにストップしましょう。
const nyuryoku1 = document.getElementById('seisu_1').value;
if (nyuryoku1 === '') {
alert('整数が正しく入力されていません')
return;
}
// nyuryoku1をparseInt関数の引数にして、戻り値をseisu1に保存する。
const seisu1 = parseInt(nyuryoku1);
課題
それでは、「整数２」というテキスト入力フィールドも同様にプログラムを変更して、入力された数値が正しいかどうかを判定し、「NaN」が表示されないようにしてください。
メニューバーの「更新」ボタンを押すか、アドレスバーで何も編集せずにEnterキーを押すと再読み込みができます。
実際に操作してみて正しく動いたでしょうか。
ところで、「parseInt」や「alert」そして、元から「kadai.js」に書かれている「document.getElementById」などは、どこからやってきたのでしょうか。
これらは標準関数、あるいは標準APIと言って、プログラマーが最初から使えるように提供されている関数です。
どのプログラム言語であっても、こういった標準関数があらかじめ用意されており、これがないとプロのプログラマーであっても、1行もプログラムを書くことはできません。
極論を言うと、プログラミングとは、標準関数を組み合わせてプログラムを書くという行為に他ならないのです。
今まで学習した「変数」「関数」「繰り返し」「条件判定」の基本的な概念を理解しており、そのプログラム言語特有の標準関数（標準API）の知識があれば、どんなプログラム言語でもプログラムを書くことができるようになります。
インターネットで以下のキーワードで検索すると、どのような関数が提供されているかを調べることができます。
”JavaScript 標準API MDN”
オブジェクト指向プログラミングや、特有の用語はまだ理解できていないと思いますが、引き続き学習を進めていくことで、関連キーワードをすぐに理解することができるようになります。
これで、計算機を作る課題は終了となります。
第一章と第二章で、プログラミングとは具体的にどのような行為なのか、プログラムを動かすというのはどういうことなのか、理解できたのではないでしょうか。
そして、どのように自己学習を積めばプログラマーになることができるのかという点でも解釈が得られたのであれば大変嬉しく思います。
答え合わせ
お疲れさまでした。
この授業で変更を加えて、「kadai.js」は最終的にこのような形になっているのではないでしょうか。
ご自分の変更と見比べてみてください。
