JavaScriptのif文と省略した書き方など徹底攻略！

もし〜とか英語でよく使っていたifがjavascriptでも同じ意味で使われてるんですよ！正確にゆうとプログラミング言語全体でですけど！

プログラミングしてたら嫌でも通らないといけないif文を今回は紹介していきます。ここを読み切ったあとはif文が使いこなせているはずなので、勉強がてらこのページをみてくれればなーと思います！

まずif文とは何か？

if文とは簡単に言うと、

もし、〇〇が▲▲だったら□□する。

みたいな感じですw

超雑かもしれませんね。実際に書いてあるのみてみましょう！

let price = 80;

// 100円未満の時
if (price < 100) {
    console.log("100円以下")
}

これは、入ってくる値が１００未満の場合に『１００円未満』と表示されるif文です。

じゃもし、入ってくる値が１００円以上だったらどうなると思います？

それは、

何も表示されないです。if分はその条件に合った時だけ、中身が呼び出されます。なので、条件に一致しない場合は、何も起きず通りすぎます。

if (ここには条件が入る) {
    条件に合っていれば、ここが呼び出される。
}

//条件から外れればif文は飛ばされ↓に流れる

こんな感じで、コードの中に条件の指定などできるのがif文なんですよ！今はふーんとわかってもらえればいいのかと思いますが、プログラミングにはなくてはならない存在なので、是非是非覚えてもらったらなと思います！

どうやって使うん？

早速使い方ですね。上ですでに書いたんですが、もう１度復習しましょう！

if (ここに条件) {
   条件に合っていればここの処理が動く。
}

//　変数の定義　priceは８０円ということにする
let price = 80;

//　price が　１００未満の時という条件を入れる
if (price < 100) {
// priceは８０で１００未満なのでここの処理が動く
    console.log("100円以下");
}

もし、条件があっていいない場合

// priceは１５０
let price = 150;

// 条件は１００未満
if (price < 100) {
//　条件似合わなかったのでここはスキップ！
    console.log("100円以下");
}
// priceは１５０なので、中の処理は無視され何も表示されない。

という感じでかけます！

今の条件は〇〇未満とかって書きましたが、実は条件の中がTRUE（真）かFALSE（偽）で処理を行なっています。なので、boolean（ブーリアン）型の条件でもできます。booleanとはtrueかfalseです。真か偽か？yesかnoか？的な感じですね！じゃみてみましょう！

let boolean = true;

if (boolean) {
    console.log("真！！！");
}

if (true) {
  console.log("これも同じ意味");
}

//========================================
// falseの時

let boolean = false;

if (boolean) {
    console.log("偽！！！");
}

if (false) {
  console.log("これも同じ意味");
}

ざっと書きましたがこんな感じで書きます。ifから始まり、カッコでくくって処理的な流れです。

そして、実は条件は複数入れることができるので、次でやってみましょう！

複数条件のときのやり方

ifのつなぎにelse if()と入れると次の条件へ、そして何も当てはまらない場合の処理を書きたいときはelseというのを入れます。

サンプルをみた方がわかりやすいと思うので早速やってみましょう！

// お金を１２０円とする
let money = 120;

// お金が１5０円以上だとの条件入る
if (money >= 150) {
// 150円以上の場合ここが表示される
    console.log('デカイジュース買える'); 
} else if(money >= 100 ) {
// 100円以上だとこっちに
    console.log('ジュースが買える');
} else {
// ここは100円未満の時に表示される
    console.log("お金が足りないから何も買えない");
}

１つ気をつけないといけないのが、プログラミングは上から順番に実行されていくので、コードを書く順番を気をつけないと思った動きと違う表示がされます。

そこでなんでやろうと時間を潰してももったいないので気をつけましょう！例をあげときます！

// お金を１２０円とする
let money = 120;

// お金が１00円以上だとの条件入る
if (money >= 100) {
// 100円以上の場合ここが表示される
    console.log('デカイジュース買える'); 
} else if(money >= 150 ) {
// 150円以上だとこっちが表示されるはずがされない！！！！！！！！！！！！
// 最初に100円以上の条件で100円以上が全て実行された為、150円では何も表示されなくなります。
    console.log('ジュースが買える');
} else {
// ここは100円未満の時に表示される
    console.log("お金が足りないから何も買えない");
}

こうならないように気をつけてコード書きましょうね！それと、なんで表示されないんだろってなった時は、上のような箇所を見直してみるといいでしょう！

否定なんかもできる

否定ってなんなん？ってなりますよね。簡単に言うと反対です。yesの反対のnoです。そんな感じに考えて大丈夫です！

例をみてみましょう！

let answer = false;

// 前はtrueだと中が実行されたはずなのだが・・・・・・・・・
if (!answer) {
// ！が付く事により反転しちゃいます！
    console.log('false!!');
}

//実行されるのは　
// false!!!!

と言う事で、これは理論否定演算子って言うらしいです。

他にもこんな事にも使えます。

let price = 100;

// ここでは100じゃない時の条件になってます！
if (price !== 100) {
    console.log('100以外！');
} else {
    console.log('100!!')
}

// 実行されるのは
// 100!!

と言う感じにもできちゃうんですよー。どこで使うねんって思う人もいるとは思いますが、以外と使うとこ多いですよー！

省略した書き方は？

普通の書き方も覚えるの大変なのに、省略した書き方まであります！今回も例からみてみましょう！

let boolean = true;

//　trueだと？マークの後の奴が実行される
// falseだと１番最後のが実行される
let result = boolean ? 'true!' : "false!";

// 実行
// true!!!!
console.log(result);

こんな感じで、

条件 ? trueならば実行 : falseならば実行;

こんな感じの条件の式でかけます。まだわかりずらい人のためにこんな例も用意しました！

// A, B, C　で同じ場所に書いてみました！
//  下を比べてみてください！

// if文の場合
if (A) {
    B
} else {
    C
}

// 省略形
A ? B : C;

２つの違うところで言うと、簡単な処理の場合は省略形が向いてますが、長く複雑な処理の場合はif文の方が向いてる感じですね。

皆さんは最初は好きな方使ってください！省略形の書き方もelse ifとしても書けますので！例もあげときます！

let price = 100;

let result =
    (price >= 150) ? "でかいジュースが買える"
  : (price >= 100) ? "普通のジュース買える"
  : (price >= 80) ? "変なジュース買える"
  : "何も買えない";

// 実行
// 普通のジュースが買える
console.log(result);

ちょっとわかりやすくなったような、難しくなったような・・・・

臨機応変に使い分けましょう！