今回は条件分岐ができる、if文について解説していきたいと思います。
それではいってみましょう！
if
構文
1 2 3 | if(値1 演算子 値2){ 処理; } |
比較演算子
| 演算子 | 説明 | 書き方 |
| == | 等価（等しい場合） | x == y |
| === | 等価（同じ型で等しい場合） | x === y |
| ! = | 不等価（等しくない場合） | x != y |
| ! == | 不等価（同じ型ではなく、等しくない場合） | x !== y |
| > | 左が右よりも大きい | x > y |
| < | 左が右よりも小さい | x < y |
| >= | 左が右以上 | x >= y |
| <= | 左が右以下 | x <= y |
※条件が一致したらtrueを返します。
（等価）
=の代入演算子とよく似てますので注意してください。
私はよく間違えます(TдT) ｳｩ…
1 2 3 4 | let food = '牛丼'; if(food == '牛丼'){ console.log("牛丼です") } |
（不等価）
1 2 3 4 | let food = '牛丼'; if(food != 'かつ丼'){ console.log("牛丼ではないです") } |
（～より大きい）
1 2 3 4 | let num = 100; if(num > 10){ console.log("大きいです") } |
（～以上）
1 2 3 4 | let num = 10; if(num >= 10){ console.log("10以上です") } |
論理演算子
| 演算子 | 説明 | 記述方法 |
| && (AND) | 全て一致してたら | 条件1 && 条件2… |
| || (OR) | どれかが一致してたら | 条件1 || 条件2… |
| ! (NOT) | ～ではなかったら | ! 条件 |
※条件が一致したらtrueを返します。
&& (AND構文)
条件1と条件2の両方が一致していたら
1 2 3 | if (条件1 && 条件2) { //処理 } |
&& (ANDサンプル)
1 2 3 4 5 | let food1 = "まぐろ"; let food2 = "いくら"; if(food1 == "まぐろ" && food2 == "いくら"){ console.log("寿司です") } |
|| (OR構文)
条件1と条件2のどちらかが一致していたら
1 2 3 | if(条件1 || 条件2){ 処理; } |
|| (orサンプル)
URLに1234か9876がマッチしていたら処理する例
1 2 3 4 | let url = "https://dailyrecords.blog/str/1234"; if(url.match('1234') || url.match('9876')){ console.log('処理を実行します'); } |
!(NOT構文)
～でなかったら
1 2 3 | if (!(条件)) { //処理 } |
!(NOTサンプル)
変数nameTaroが太郎ではなかったら処理
1 2 3 4 | let nameTaro = '太郎' if (!(nameTaro=='三郎')) { console.log('太郎ではありません'); } |
else
else構文
1 2 3 4 5 | if(条件){ //条件が一致したら → 処理1 }else{ //条件が一致しなかったら → 処理2 } |
elseサンプル
ウィンドウスクロールTop位置が500px以上だったら
➀if ：条件一致 （true）→ ‘position’: ‘fixed’
➁else：条件不一致 → ‘position’: ‘relative’
1 2 3 4 5 6 7 8 9 | if ($(window).scrollTop() >= 500) { //① $('#sample').css({ 'position': 'fixed', }); } else { //② $('#sample').css({ 'position': 'relative', }); } |
else if
else if構文
1 2 3 4 5 | if (条件1) { //処理 } else if(条件2){ //処理 } |
else ifサンプル
➀if ：0より大きかったら → プラス
➁else if ：0より小さかったら → マイナス
➂else ：どちらの条件にもあてはまらなかったら → 0
1 2 3 4 5 6 7 8 | let i = 0; if (i>0) { //① console.log('プラス'); } else if(i<0){ //② console.log('マイナス'); }else{ //③ console.log('0'); } |
【結果】
0
三項演算子
if～else分と一緒の動作で短い書き方ができます。
三項演算子構文
1 | 条件 ? 値1 : 値2 |
三項演算子サンプル
1 2 3 4 | let age = 18; let res = age >= 18 ? 'Adult' : 'Minors'; console.log(res); //【結果】Adult |
【結果】
Adult
検索
contains（～が含まれていたら）
1 2 3 | if ($('要素:contains("検索文字")')) { //処理 } |
containsサンプル
containsメソッドでh2要素にまとめという文字が含まれていたら、文字色を赤にする例
1 2 3 | if ($('h2:contains("まとめ")')) { $('h2:contains("まとめ")').css('color','red'); } |
match（～がマッチしたら）
1 2 3 | if (文字.match('検索文字')) { //処理 } |
matchサンプル
変数strにgoogleという文字がマッチしたら、処理を実施
1 2 3 4 | let str = 'google.com' if (str.match('google')) { console.log('マッチしました'); } |
まとめ
使用時にいつも書き方を忘れるので記録しておきます。
以上です。
