第35回：JavaScript講座本編2「条件分岐」
どうも、シノです。
さて、今回はJavaScript本編第2回！「条件分岐」について解説していきます。
いよいよプログラミングらしくなってまいりました！
前書きなんてどうでもいいと思うので、早速目次です。書くことないとかじゃないよ。
0.前回の復習
前回は、文字を出力しよう、というのと変数を使ってみよう、というのをやりました。
今回以降も、前回の内容はほぼ常に使っていくので、これからゆっくり慣れていきましょう。
1.条件分岐
さっそく本編です。
もう名前からお分かりだと思いますが、条件分岐は「ある条件によって、処理を変える」ことができます。そのままですね。
例を出しましょう。ある数字を入力してもらって、それが奇数か偶数かで処理を変えたいとします。
そんなときに、この条件分岐、if文を使用します。
基本的な構文は以下の通りです。
if(真偽値){
真偽値がtrueなら実行する処理
}
「真偽値？trueって何？」と思われた方、これから解説するのでご安心を。その前に文章で改めて説明します。
ifの後ろに小括弧で真偽値、というやつを囲みます。
そして、小括弧の真偽値がtrue、というやつの場合に、中括弧の中身を実行します。falseというやつなら、中括弧の中身は実行しません。ここまでがif文の処理です。
このどっちの場合も、if文の処理が終わったら、中括弧の後ろから処理が続きます。
1-1.真偽値
真偽値とは、「true」、「false」のことです。〇か×かと思ってもらって大丈夫です。ちなみに、論理値とも言います。
で、この真偽値は、リテラルです。
覚えてますか？数字とか、文字列とかと同じ仲間です。
なので、ソースコード内に直接「true」、「false」を書けますし、変数に代入もできます。
ただ、これ単体で使うことはほぼないでしょう。次に紹介する「論理演算子」と共に…というかその結果として目に見えない形で使われることがほとんどだと思います。
1-2.論理演算子
じゃあその論理演算子ってやつは何なの？って話になりますね。
論理演算子とは、「1つ、または2つのリテラルに基づいて、真偽値を返す」ためのものです。
厳密には数字とかも返すのですが、今回はこの理解で十分です。
「え、どういうこと？」という方が多いと思うので、具体的な演算子を見ていきましょう。
1-2-1.「==」
イコール二つです。これを2つのリテラルの間に入れると、「2つのリテラルが同じ場合、それらのリテラルを含めてtrueに置き換わる」という処理をしてくれます。
もちろん、異なった場合はfalseに置き換わります。
「1 == 1」とすればtrueになりますし、「2 == 3」とすればfalseになります。
1-2-2.「<」、「<=」、「>=」、「>」
これらは、数学をイメージしてください。左右には数字が来ます。
左右の数字について、「これらの演算子が正しい関係を示している場合、それらの数字を含めてtrue」に置き換わります。正しくなければfalseですね。
例を出すと…
- 1 < 2 は true
- 3 <= 2 は false
- 5 >= 5 は true
- 5 > 5 は false
こんな感じです。
1-2-3.「!=」
これは見慣れないですね。あ、「!」は正式名称エクスクラメーションマークというらしいです。長い。
これは、「==」とtrue、falseが入れ替わります。つまり、2リテラルが異なればtrueを、一致すればfalseを返します。
1-2-4.「&&」
アンドマーク2つです。
これは、真偽値2つの間に入れます。そうすると、「両方の真偽値がtrueの場合に、全体がtrueに置き換わる」ことになります。
それ以外の場合はfalseです。
1-2-5.「||」
これ、「バーティカルバー」と言うそうです。これをまた2つ。
これも&&と同じように、真偽値2つの間に入れます。すると、今度は「どちらかの真偽値がtrueの場合に、全体がtrueに置き換わる」という処理になります。
両方ともfalseの時だけ、全体もfalseですね。
1-2-6.「!」
え、これだけ？と思うかもしれませんが、エクスクラメーション1個も論理演算子です。
ただし、これだけは他と違い、1つの真偽値に対する論理演算子ですね。
これを真偽値の前につけると、その真偽値のtrueとfalseが入れ替わります。
ざっと、よく使うのはこのくらいですね。
では、1つクイズを。
ある変数「a」には、trueもしくはfalse、つまり真偽値が入っています。
そして、「!a」とすれば、このtrueとfalseが入れ替わりますね。
では、「!」を使わずに、このtrueとfalseを入れ替えることができるでしょうか。
できるなら、どうやって入れ替えるでしょうか。
ちょっと改行を挟みます。
まず、可否から。
入れ替えることはできます！
では、どうやるでしょう？
正解は、
a == false
です！
試してみましょう。
まず、aがtrueの場合、「true == false」となり、異なるのでfalseになりますね。
次に、aがfalseの場合、「false == false」となり、一致するのでtrueになりますね。
これで、入れ替えることができました。
2020/2/10
すみません、間違えてました…修正しました。「&&」ではなく「==」です。
さて、かなり話がそれてしまいました。
if文に戻りましょう。
2.条件分岐続き
最初に出した構文は以下です。もうイメージが掴めるのではないでしょうか。
if(真偽値){
真偽値がtrueなら実行する処理
}
といったところで、そろそろ具体的なソースコードを見てみましょう。
var a = 1;
if(a % 2 == 1){
document.write("aは奇数です。");
}
if(a % 2 == 0){
document.write("aは偶数です。");
}
またわけわからんもん出てきた…となるはずです。
ならない方は既に知っているかよく読んでいないかですね。
分からんという方とよく読んでいない方は、下の解説を見てください。
というわけで、「%」です。
これは、四則演算と同じように使うことができ、「a % b」とすると、「aをbで割った余り」を表します。剰余なんて言ったりしますね。
さて、ここまで解説すると、上のソースコードが何をしているかわかるでしょう。
aの値を2で割った余りが1なら、「aは奇数です。」と、余りが0なら「aは偶数です。」と表示するプログラムになります。
試しに、aの数字をいろいろと変えてみてください。表示も変わるはずです。
ここで、書き方を変えてみましょう。以下のように直してください。
var a = 1;
if(a % 2 == 1){
document.write("aは奇数です。");
}else if(a % 2 == 0){
document.write("aは偶数です。");
}
二つ目のif文が少し変わりましたね。「else if」となっています。
こうしても、同じ結果になると思います。
このようにすると、二つ目では、「aが1じゃない場合」に、初めて判定されるようになります。
つまり、それまでの条件に当てはまらなかった、かつそこの条件に当てはまる場合の処理が書けるんですね。
もちろん、これは複数つなげることもできます。
ちなみにですが、途中でtrueになって処理された場合、そこから先の連続したelse ifは全て無視されます。
最後に、こんなふうに直してみましょう。
var a = 1;
if(a % 2 == 1){
document.write("aは奇数です。");
}else{
document.write("aは偶数です。");
}
elseというやつが残って、二つ目のif文が消えてしまいました。
これでも、問題なく動きます。
このように、elseだけで中括弧を始めると、「それまでのif文全てに当てはまらない場合」にelseの中括弧内の処理が行われます。
まとめ
前回の最後を読んで「あれ、繰り返しは？」と思われた方。申し訳ないです。
ここまででかなり長くなってしまったので、繰り返し処理は次回にさせていただきます。
なお、繰り返し処理でも、ここで紹介したif文の考え方、真偽値が大量に出てきます。
ちょっとずつ変えながら、色々と試してみてください。
次回は、上にも書いた通り、「繰り返し処理」について解説していきます。
更新情報はTwitterでも呟いてます。ブログもこのJavaScript以外に色々書いてるので、よかったらどうぞ。
次回：繰り返し処理(2020/1/17投稿しました！！！)
それでは。
