【初級編】JavaScript　if文について #JavaScript

📗 if文

まずJavaScriptのif文の基本形を知りましょう♪

if(条件){
　条件が真なら実行
}

ifとは日本語で　もし　という訳をされます。
"もし条件が正しければ実行する"という感じの認識でいていただければOKです。

では試しに、もしheightが180なら、身長は180ｃｍですという文章が出力されるコードを書いてみます。

const height = 180;

if (height == 180){
  console.log('身長は'+ height + 'cmです。');
}

これで、コンソール上には、身長は180cmです。と出力されると思います。
楽勝ですね！

📗 【余談というか補足】

ちょっと話はそれますが、上記はあまり推奨されない記入例となっています。
どの部分かわかりますか？
正解は条件の部分にあります。
==　←この部分ですね。解説していきます。

const height = 180;

if (height == 180){
  console.log('身長は'+ height + 'cmです。');
}
//　==　この記載は、文字と数値を識別せずに値が一致していれば。tureを返します。どういうことかと言うと

const height = '180';  //string型
このように記載してもtureを返してしまうのです。
// 非常に気づきにくいバグを仕込んでしまうことがあるので、このように書くことは推奨されていません
//ではどうしたら良いのでしょうか？

if(height === 180){　//省略

このように,===　とすることで　型と値が一致したらtureを返すといったようになります。
//つまり、上記の条件だったとすると

const height = 180 ; //こっちなら型と値が一致しているので、console.logに出力される
const height = '180' //条件はnumber型の180を求めるのに対して、値はstring型の180となり、条件に反しているのでプログラムは実行されません。

ですので、基本的に条件が一致したらとする時は ===　このように書くと良いかと思います。

📗 条件分岐【else,else if ,if文のネスト】

これまでは、条件が一致したら出力するというようなコードを書きましたが、
一致したら条件１を出力、一致しなければ条件２を出力といったような書き方をするにはどうすればよいでしょうか？
こちらは elseという物を使います。

基本形
if(条件){
//tureだったときの処理
}else{
false(偽)だったら実行
}
//このように、if文のあとにelseと書いて値が違ったら実行するコードをかけばいいです。

const height = 180;

if (height === 180){
  console.log('身長は'+ height + 'cmです。');
}else{       //条件が一致してなかったら。
  console.log('身長は'+height+'cmではありません'); //この処理を行う。
}

このような形になります。elseはそうでなければこうする！みたいなイメージを持つと良いかもしれません。

複数の条件をつけたい場合【else if】

コレまでは真か偽かの２択でしたが、この条件、あるいはこの条件、そうでなければこの条件のように何パターンか条件を用意したいことが出てくると思います。
そんなときはelse ifを使用します。感覚としては、あるいは〜という感じでOKかと思います。
実際にコードを書いてみましょう。


基本形
if(条件){
//tureだったときの処理
}else if (新しい条件){
 //新しい条件がtureだったら実行
} else{
//false　だったら実行
}
実際にコードで見てみましょう。

const coler = 'red'

if (color === 'red'){
 console.log('赤りんごです');
}else if (color === 'green'){
 console.log('青りんごです');
}else{
 console.log('やばいりんごです');
}

上記のコードであれば、redと打ち込まれれば、赤りんごです、greenと打ち込まれれば　青りんごですと返し。
その他は　やばいりんごです　といったように値が帰ってきます。
非常に簡単なコードですね。

if文のネスト

また、if文の中にif文を作ることも出来ます。それをネストといいます。
コードで書くとこのようになります。

const color = 'red'
const size = 'small'

if (color === 'red'){
  if( size ==='small'){
    console.log('そりゃイチゴです。');
 }
}

２つの条件が一致したらそりゃイチゴです　と出力されます。
しかし、このネストはどんどん重ねていくたびに条件が複雑になり、読み手がわかりにくいコードになっていくので
できるだけシンプルに書くことが推奨されます。
またelse ifも同様に増えれば増えるだけ分かりにくくなりますので出来るだけシンプルにif文で書くとよいです。

長くなるので、パート１はこの辺で終了したいと思います！　

📗 【まとめ】

if文は　条件が　真　なら実行
条件外なら else　条件を追加するなら else if
一致の条件をつけるなら ==　ではなく　===　で書くと型も判別できる！
if文はネストできる!

📗 【次回予告】

if文パート２になります！

記事を見ていただいてありがとうございます。
ご指摘有りましたら編集リクエストまでドシドシお願いいたします!

【初級編】JavaScript if文について