"else"を活かせ


これは、よくある時刻に応じたメッセージの表示です。午前4〜11時台なら「おはようございます。」、午後0〜5時台なら「こんにちは。」、午後6〜11時台なら「こんばんは。」、 午前0〜3時台なら「おやすみなさい。」と表示するように設定しています。

この種の時刻に応じたメッセージの表示は、Web ページに使われる JavaScript としては非常に多く見かける定番の1つと言ってよく、そのためこの HTML Tips では、これまで取り上げませんでした。 ただ、このルーチンは条件に応じて異なる動作をするスクリプトの最も基本的なものと言うことが出来、しかもごく普通の Web ページで非常にしばしば使われる、 それでいて人によってカスタマイズする必要が非常に多いスクリプトと思われるので、敢えてここで言及することにしました。

Web ページ上でほかの人が使っているのを見て、マネたくなる、しかし自分独自の表示にカスタマイズしたい、単にメッセージを入れ替えるだけならいいが、 条件定義まで独自のものにしようとすると、スクリプトやプログラミングの基礎が身に付いていない人は大抵つまづくことになります。 だから、ただプログラムのソースだけを書いて、その意味を理解させることなしに、はいコピー&ペーストしてお使い下さい、というやり方が本当の親切なのか、 私には疑問です。

上の時刻に応じたメッセージの表示では、まず日付オブジェクトを生成してから、現在の時刻を返す getHours() メソッドの戻り値を変数に代入します。

<SCRIPT Language="JavaScript">
<!--
today = new Date();
hour = today.getHours();

ここまでは基本です。変数名を仮に today と hour としましたが、これはわかりやすくしているだけで、半角ローマ字を使った独自の名でも OK です。 ページを読み込んだ時刻に応じて、hour には 0 から 23 までのいずれかの整数値が入っています。この数値が何かによって異なるメッセージを表示させるわけですが、たまに見かける間違いに次のようなものがあります。

if (hour == 4) document.write("おはようございます。");
else if (hour == 12) document.write("こんにちは。");
else if (hour == 18) document.write("こんばんは。");
    ・
    ・
    ・

これは、4時になったら「おはようございます。」と表示し、12時になったら「こんにちは。」と表示し、18時になったら「こんばんは。」と表示するようにしたかったのでしょうが、 これでは4時台・12時台・16時台にはメッセージが表示されても、それ以外の時刻には何も表示されないことになります。4時〜12時の間ならいつでも「おはようございます。」と表示するためには、範囲を指定しなければなりません。 では次の書き方はどうでしょうか。

if (hour >=4 && hour <=11) document.write("おはようございます。");
else if (hour >=12 && hour <=17) document.write("こんにちは。");
    ・
    ・
    ・

これは、4時以降11時台までは「おはようございます。」と表示し、12時以降17時台までは「こんにちは。」と表示することを表しており、 確かにこの書き方でも間違いではありません。思った通りに表示されるでしょう。しかしそれでは else は何のためにあるのでしょうか。

else は JavaScript だけでなく、C/C++ や Pascal や BASIC 等の手続き型言語に共通で、直前の条件が満たされなかったときの処理を書くときに使われます。 上の例で else は「hour が4以上11以下でなければ」という条件定義を含んでいますから、その上「12以上・・・」と再定義するのは無駄です。

こういう単純なプログラムでは、スクリプトは出来るだけ簡単な方が良いに決まっています。ここの例のように、午前4〜11時台なら「おはようございます。」、午後0〜5時台なら「こんにちは。」、午後6〜11時台なら「こんばんは。」、 午前0〜3時台なら「おやすみなさい。」と表示するように設定するには、例えば次のように書けば簡単ですね。

if (hour < 4) document.write("おやすみなさい。");
else if (hour < 12) document.write("おはようございます。");
else if (hour < 18) document.write("こんにちは。");
else document.write("こんばんは。");

人間と同じようにプログラムもスクリプトを上から読んでいきますから、まず変数 hour が4より少なければ「おやすみなさい」という表示を実行し、そうでなければ(else)次の条件文に移って hour が12 より少ないかどうかを判定し、 そうでなければ(else)更に次の条件文に移るという処理を繰り返します。一番最後の else では残された条件は hour が18〜23のいずれかであるわけですから、別に条件文を付ける必要はないことになります。

これを例えば、

if (hour <= 3) document.write("おやすみなさい。");
else if (hour <= 11) document.write("おはようございます。");
else if (hour <= 17) document.write("こんにちは。");
else document.write("こんばんは。");

と書き換えても、結果は同じですが(hour <= 3 は、hour が3以下、つまり3も含まれることを表す)、"=" を書き足すだけ労力の無駄です。こうしなければ3,11,17が条件に含まれない、ということはないからです。 ”< ”1つで済むなら、その方が簡明ですね。

もちろんこの場合には else を省略してはいけません。もしこれを

if (hour < 4) document.write("おやすみなさい。");
if (hour < 12) document.write("おはようございます。");
if (hour < 18) document.write("こんにちは。");
    ・
    ・
    ・

と書いてしまったら、例えばページを読み込んだ時刻が3時なら、3は4よりも12よりも18よりも少ないですから

おやすみなさい。おはようございます。こんにちは。


と表示されてしまいます(笑)。else を付けずに if 文を繰り返すのは、前の条件が満たされるか否かに関係なく別の条件を付加するときだけです。

今回は、時刻に応じたメッセージの表示を例にとって if 文と else の使い方について考えてみました。が、このようにいくつかの条件の中から1つを選んで処理を実行するプログラムは意外と多く、 とりわけ数値の範囲を選択するケースでは単純な消去法が使えるので else の使い方を正しく理解しておく必要があるわけです。




次のトピックは「立体文字の作り方」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで