JavaScript

【超初心者 JavaScript】if文で条件分岐

【超初心者 JavaScript】if文で条件分岐

if文とは

if文とはプログラミングにおいて非常に重要な働きがあるので、それを今回は解説していきます。

まず if とは日本語にすると「もしも」という意味です。

文字通り、もしこうだったらこの処理が行われる、もしああだったらこんな処理が行われるといった風に様々な条件を決める事が出来ます。

RPGのゲームだったら敵を倒したら経験値を貰えますよね?あれも、「もしも敵を倒したら」→「経験値を貰う」という風に if文が使われていると考えられます。

 

このように、様々な条件を決めて分岐を作る事を条件分岐といいます。


if文の使い方

まず if文の書き方ですが、以下の様になります。

if( 条件を書く ){ やりたい処理を書く }

if と記入する。
() の中に自分で決めた条件を記入する。
{} の中にやりたい処理を記入する。


大まかな流れはこんな感じですね。

百聞は一見にしかず、それでは実際に処理を記入してみましょう。

if( 1 < 2 ){
    document.write( "1は2よりも小さいです。");
}

実行結果

1は2よりも小さいです。


() の中に条件を入れました。
今回は、1が2よりも小さい時だけ処理が実行するプログラムになります。
{} は改行してもOKです。というか基本的に改行します。

この処理に使われている「<」は比較演算子と呼ばれ、他にも様々な種類があります。

ポイント

==:左の値と右の値が等しい
===:左の値と右の値が型も含めて等しい
!=:左の値と右の値が等しくない
!==:左の値と右の値が型も含めて等しくない
<:左の値より右の値が大きい
<=:左の値より右の値が同じか大きい
>:左の値より右の値が小さい
<=:左の値より右の値が同じか小さい
など

※ = は代入する時に使うものなので、等しいを表す時は==又は===を使用します。

 

複数の条件分岐

条件分岐は1つでは無く、複数決める事が可能です。

やり方は以下の通りです。

if( ①の条件 ){
    ①の処理
}else if( ②の条件 ){
       ②の処理
}else{
    ③の処理
}

まず1つ目の if文は先程やった通りです。

続いて、 else if と記入する事で2つ目の条件分岐を作る事が可能です。1つ目の条件が当てはまらない時に2つ目の処理が実行されます。

その後に else とありますが、これはどの条件にも当てはまらない時に処理されます。

実際に数値を入れてみましょう。

if( 5 < 3 ){
   document.write("5は3よりも小さいです");
}else if( 5 > 3 ){
    document.write("5は3よりも大きいです");
}else{
    document.write("5は3よりも大きいか小さいか分かりません");
}

実行結果

5は3よりも大きいです


1つ目の条件は「5が3よりも小さい時」なので、条件として成立していません。

2つ目の条件は「5が3よりも大きい時」なので、条件として成立した為「5は3よりも大きいです」という実行結果になりました。


Naza
一気にプログラミングっぽい

 

 

変数を使って if文を作ろう

応用になりますが、変数で定義した値を使って if文を作っていきたいと思います。

変数の定義についてはこちらで解説しています。

【超初心者 JavaScript】変数の使い方と解説
【超初心者 JavaScript】変数の使い方と解説

目次1 変数とは何か2 変数の宣言3 変数の定義3.1 ① var,let,const の中から1つ選んで宣言する3.2 ②変数の名前の自分で決める3.3 ③使いたい値を代入する4 変数を使う4.1 ...

続きを見る




適当にプレイヤーの戦闘力と、敵の戦闘力を変数で定義して if文を作ってみます。

const player = 30;   // プレイヤーの戦闘力
const enemy  = 20;   // 敵の戦闘力

if( player > enemy ){
   document.write("プレイヤーの勝利!");
}else if( player < enemy ){
    document.write("敵に負けてしまいました。");
}else{
    document.write("互角の勝負をしている");
}

実行結果

プレイヤーの勝利!


プレイヤーの戦闘力が30で敵の戦闘力が20なので「プレイヤーの勝利!」が表示されました。


この変数の値を変えてみましょう。

const player = 40;   // プレイヤーの戦闘力
const enemy  = 60;   // 敵の戦闘力

if( player > enemy ){
   document.write("プレイヤーの勝利!");
}else if( player < enemy ){
    document.write("敵に負けてしまいました。");
}else{
    document.write("互角の勝負をしている");
}

実行結果

敵に負けてしまいました。

プレイヤーの戦闘力よりも敵の戦闘力が高いので「敵に負けてしまいました。」が表示されます。


変数の値を同じにしてみましょう。

const player = 50;   // プレイヤーの戦闘力
const enemy  = 50;   // 敵の戦闘力

if( player > enemy ){
   document.write("プレイヤーの勝利!");
}else if( player < enemy ){
    document.write("敵に負けてしまいました。");
}else{
    document.write("互角の勝負をしている");
}

実行結果

互角の勝負をしている

値がどちらも50で、1つ目と2つ目の条件に当てはまらないので「互角の勝負をしている」が表示されます。


 

まとめ

今回は if文で条件分岐を作るやり方を解説しました。

if文もすごく重要なので、慣れるために変数の名前や値を変えて色々チャレンジしましょう!

最後まで読んでいただきありがとうございます。

 

以上。

-JavaScript

© 2021 Nazaブログ