JavaScript 基礎 第7回 『条件分岐と関数を使ってプログラムを作ってみよう』

あいさつプログラムを作ってみよう

JavaScript 基礎 第5回、第6回ではそれぞれ「条件分岐」と「関数」について学んできました。
この章ではこれまで勉強してきたこれらの知識を使って、実際にプログラムを作ってみましょう。
今回作っていくのは「時間を入力したらあいさつを返す」というプログラムです。

プログラムの内容は以下の通りです。

1. ユーザーが時間と名前を入力する
2. 入力された時間に応じてプログラムが「おはようございます」「こんにちは」「こんばんは」のいずれかのあいさつを返す
3. プログラムからのメッセージに、入力されたユーザーの名前も表示する

本章ではこの3つの機能を実装したプログラムを作成していきます。

関数を使ってプログラムを作成してみよう

さて、プログラミングを進めるにあたって、まずは関数について検討していきましょう。

関数のメリットは第6回で解説したとおり、「プログラムを効率的に書くことができ、見やすく作成できること」と「同じプログラムを再利用できること」の2点です。今回はプログラムを再利用する必要はないので、プログラムの効率性、見やすさについて考えながら、プログラムにどんな機能が必要か、また、その実現のためにどのような関数が必要かを検討していきましょう。

今回のあいさつプログラムの機能と必要となる関数をまとめたものが以下になります。

①ユーザーに名前を入力してもらう機能 → 変数で対応
②ユーザーに時間を入力してもらい、入力値が正しくない場合にエラーメッセージを表示させる機能 → getTime関数
③あいさつを判別する機能 → getGreeting関数
④判別したあいさつとユーザー名をメッセージで返す機能 → getResultMessage関数

これらの情報を基にあいさつプログラムを作成していきましょう。

①ユーザーに名前を入力してもらう機能

まずはユーザーに名前と時間の情報を入力してもらう機能を作成しましょう。

今回は第4回で解説した変数を使って対応していきます。
promptを使って入力ダイアログボックスを表示させ、入力されたユーザー名を「username」という変数に格納しています。

■例1. 変数「username」を作成

// ユーザー名を入力する
let username = prompt('あなたの名前は？');

②ユーザーに時間を入力してもらい、入力値が正しくない場合にエラーメッセージを表示させる機能

次にユーザーが時間を入力し、その入力値に問題がなければその情報を変数に格納する機能を作成していきましょう。

今回は時間の入力を0～23の時間表記に限定し、その時間に応じたあいさつが返ってくるプログラムを作成することとします。
そのため、時間の入力時に「数字以外が入力された場合」と「0～23以外の数字が入力された場合」の2つのケースが発生した場合、エラーメッセージが表示されるよう関数getTimeを記述していきます。

■例2. 関数getTimeを作成

// *****例1の下に追加***** //

// 時間を入力し、入力値が正しいか検証
function getTime() {
  let time = prompt('今の時間は？ \n ※0～23で入力してください');
  time = parseFloat(time);
  if (time < 0 || 23 < time) {
    return undefined;
  } else {
    return time;
  }
}

// 実行する処理（時間の入力）
let time = getTime();
if (!time) {
  alert('時間の入力が正しくありません。ブラウザの再読み込みを行ってください。');
} else {
}

例2では関数getTimeの入力ダイアログボックスで取得した時間を変数timeに格納しています。
その後、parseFloatでtimeの値を数値型に変換したのち、第5回で登場した条件分岐（if文）を用いて指定外の値が入力された場合の処理を記述しています。

今回ですと、入力された時間の値（変数time）が0より小さい、もしくは23より大きい場合、下の図のようにダイアログボックス（時間の入力が正しくありません。～）が表示される流れとなります。
入力値の値が指定の範囲内であればその値が変数timeに格納され、指定の範囲外であれば「undefined（未定義）」として返ってきます。

因みに、if (time < 0 || 23 < time) { ～の「||」は「AまたはB」、if (!time) { ～の「!」は「Aではない」をそれぞれ表す論理演算子です。if文では論理演算子もよく用いられるので、ここでしっかり押さえておきましょう。

なお、let time = getTime();以下のif文のelseが空になっていますが、ここは時間の入力値が正しい場合の記述が入るので、一旦そのままで問題ありません。

③あいさつを判別する機能

さて、ユーザーから入力された情報を取得するところまで来ましたので、続いて入力された時間の値で出力するあいさつを判別する関数を書いていきましょう。

今回はあいさつを判別する機能を関数getGreetingとし、入力された値が5～11の場合は「おはようございます！」、12～18の場合は「こんにちは！」、それ以外の値が入力された場合は「こんばんは！」になるように設定します。

■例3. 関数getGreetingを作成

// *****例2の下に追加***** //

// あいさつを時間で判別する機能
function getGreeting(time) {
  if (18 <= time) {
    return 'こんばんは！';
  } else if (12 <= time) {
    return 'こんにちは！';
  } else if (5 <= time) {
    return 'おはようございます！';
  } else {
    return 'こんばんは！';
  }
}

例3では関数getGreetingに、先ほど取得したtimeを引数として渡しています。
そして今回もtimeの値によって出力する値を出し分けするので、第5回で勉強した条件分岐の出番です。

今回はif文でtimeの値が「5～11」「12～18」「それ以外」の3パターンを条件として定義し、それぞれのあいさつの文字列を戻り値として返しています。
if文の「if」「else if」「else」の意味を改めて確認しながら入力していきましょう。

④判別したあいさつとユーザー名をメッセージで返す機能

最後に、入力されたユーザー名と時間、そして時間に対応したあいさつを返す最終的なメッセージを表示する関数を作成していきましょう。
今回はメッセージを表示させる関数をgetResultMessage関数とし、入力されたtimeとusernameを引数として渡します。

■例4. 関数getResultMessageを作成

// *****例3の下に追加***** //

// 結果のメッセージを表示する機能
function getResultMessage(time, username) {
  return getGreeting(time) + username + 'さん！';
}

関数getResultMessageでは、③で作成した関数getGreetingを用いて戻り値となるメッセージの文章を作成しています。
つまり、returnのあとのgetGreeting(time)はtimeの値で出し分けたあいさつが入り、その後ろに「入力されたユーザー名（変数username）さん！」という文章が続くメッセージが作成されています。

また、関数は作成するだけではページに表示されないので、例2で記述を見送っていたif文のelse部分に関数getResultMessageを呼び出す記述を追加します。

■例5. 関数getResultMessageを表示するダイアログボックスを追加

// *****例4の下に追加***** //

// 実行する処理（時間の入力）
let time = getTime();
if (!time) {
  alert('時間の入力が正しくありません。ブラウザの再読み込みを行ってください。');
} else {
  alert(getResultMessage(time, username));  //この行を追加
}

一連のプログラムを1つの関数にまとめよう

さて、これでプログラムは完成ですが、最後にこれまで作成したプログラムを1つの関数にまとめてみましょう。関数を1つに集約することで、その関数を呼び出すだけで一連の処理を実行することができます。
例として、作成したプログラムを「greeting」という関数で括ってみます。

■例6. 全体の処理をまとめた関数greetingを作成

// *****これまで書いてきた関数を囲んだ関数「greeting」を追加***** //

function greeting () {  //この行を追加
  // ユーザー名を入力する
  let username = prompt('あなたの名前は？');

　　～～～中略～～～

  // 結果のメッセージを表示する機能
  function getResultMessage(time, username) {
    return getGreeting(time) + username + 'さん！';
  }
}  //この行を追加

greeting();  //この行を追加

このように全体を関数化して、最後にその関数を呼び出すことで処理を実行することができるようになりました。

実際に作成したプログラムを動かしてみよう

さあ、プログラムの作成は以上です。さっそく作ったプログラムを動かしてみましょう。
ブラウザでhtmlファイルを開くと、ダイアログボックスが表示され、情報を入力するとメッセージが返ってくるはずです。
また、指定の範囲にない値を入力した場合はエラーメッセージが表示されるので、さまざまな値を入力してみて作成したプログラムの動作を確認してみましょう。

■usernameに「Taro」、timeに「6」と入力した場合

まとめ

このように、条件分岐と関数のみでも簡易的なプログラムなら作成することが可能です。
さらにこの後の章で登場する「繰り返し処理」や「オブジェクト」などの知識を身につけることで、作成できるプログラムの幅はどんどん広がっていきます。

中でもこれまで触れてきた「条件分岐」や「関数」はプログラミングの勉強を進めていく上で必要不可欠なものなので、ここで改めて復習してしっかり理解しておきましょう。