jQueryでif文を使った条件分岐の書き方です。
else ifやelseなどを併用したり、比較演算子などを使ってより複雑な条件分岐も簡単にできます。
if文を一行で簡単に書く方法も併せてご紹介します。
目次
if文の基本的な使い方
単純なif文の使い方です。
条件に合致していれば、コンソールに県名を表示させます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { // 県名を変数に格納 var pref = '福岡'; // if文で条件を比較 if (pref == '福岡') { // コンソールに県名を表示 console.log(pref+'です。'); } }); |
結果（コンソール）
福岡です。
上記のように表示されます。
コンソールについては下記ページでご紹介しています。
if文の構文
if文は以下のような構文になります。
if (条件式) {
trueの場合の処理
}
条件式
if文の条件式で、分岐の条件を決めます。
ifに続く()（カッコ）内に条件式を書きます。
先ほどのサンプルでは、変数の値と指定した値が等しかったら…という条件式になっています。
このように左辺と右辺を比較し、等しかったら、等しくなかったら、大きかったら、小さかったらなど、さまざまな条件式を設定できます。
else で falseの処理も指定
先程はtrueの場合のみの処理でしたが、今度はfalseの処理も併せて指定してみましょう。
成人か未成年かを判定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(function() { // 年齢を変数に格納 var age = 19; // if文で条件を比較 // 年齢が20歳未満だったら if (age < 20) { // コンソールに未成年と表示 console.log('未成年です。'); // 年齢がそれ以上だったら } else { // コンソールに成人と表示 console.log('成人です。'); } }); |
結果（コンソール）
未成年です。
if文の最後の}（波カッコ）から続けてelseと書いて同様に指定するだけですね。
else if でさらに条件分岐
if文では条件式がfalseだった場合、さらに条件式を付けて3つも4つも分岐させるといった、より複雑な条件分岐もできます。
成人、未成年、シニアの判定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$(function() { // 年齢を変数に格納 var age = 65; // if文で条件を比較 // 年齢が20歳未満だったら if (age < 20) { // コンソールに未成年と表示 console.log('未成年です。'); // 年齢が65歳以上だったら } else if (age >= 65) { // コンソールにシニアと表示 console.log('シニアです。'); // 年齢がそれ以外だったら } else { // コンソールに成人と表示 console.log('成人です。'); } }); |
結果（コンソール）
シニアです。
else ifで2個め3個め…と複数の条件式を指定して、最後のelseでどれにも当てはまらないプログラムを書きます。
else ifはelseとifの間に半角スペースを開けてます。
elseifと繋げて書くとエラーになるので注意しましょう。
if文と併せて使う演算子たち
if文は2つの値を比較して大きい、小さい、等しいなどと判定したり、複数の AND、OR条件での分岐など、if文を補ってくれる演算子があります。
比較演算子（<=、==など）
条件式のカッコの中には比較する2つの値と、その間に比較演算子と呼ばれる記号が入っています。
比較演算子は左辺と右辺を比較して、多いか少ないか、以上・以下を判定する関係演算子と、等しいか、等しくないかを判定する等価演算子があります。
関係演算子一覧表
| 演算子 | サンプル | 説明 |
|---|---|---|
| > | a > b | bよりaが大きい |
| >= | a >= b | aはb以上 (bよりaが大きいか同じ) |
| < | a < b | aよりbが大きい |
| <= | a <= b | bはa以上 (aよりbが大きいか同じ) |
等価演算子一覧表
| 演算子 | サンプル | 説明 |
|---|---|---|
| ＝＝ | a == b | aとbは同じ値 |
| != | a != b | aとbは違う値 |
| ＝＝＝ | a === b | aとbは同じ値 (型も含めた厳密な比較) |
| !== | a !== b | aとbは違う値 (型も含めた厳密な比較) |
論理演算子（AND、ORなど）
条件式のカッコの中に複数の条件を指定することもできます。
AND（&&）やOR（||）など、複数の条件に合致した場合にのみ表示させるなど、複雑な条件分岐が可能になります。
論理演算子一覧表
| 名前・タイプ | 演算子 | サンプル | 説明 |
|---|---|---|---|
| 論理積(AND) | && | a && b | aとbが両方含まれる |
| 論理和(OR) | || | a || b | aかbのどちらかが含まれる |
| 否定 | ! | !a | aではない |
if文を使ったサンプル集
以上・以下（70点以上なら合格）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { // 点数を変数に格納 var score = 82; // if文で条件を比較 if (score >= 70) { // コンソールに合格と表示 console.log('合格です！'); } }); |
否定（男性じゃなければあいさつする）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(function() { // 性別を変数に格納 var sex = '女性'; // if文で条件を比較 // != で否定 => 男性じゃなかったら if (sex != '男性') { // コンソールにこんにちはと表示 console.log('こんにちは！'); } }); |
AND（2ヶ月連続100万円なら連続達成）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(function() { // 成績を変数に格納 var month01 = 120; var month02 = 141; // if文で条件を比較 // &&で条件を繋げ、両方に合致したら if (month01 >= 100 && month02 >= 100) { // コンソールに連続達成と表示 console.log('連続達成！'); } }); |
OR（福岡か北九州なら福岡県と表示）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(function() { // 都市名を変数に格納 var pref = '北九州'; // if文で条件を比較 // ||で条件を繋げ、どちらかに合致したら if (pref == '福岡' || pref == '北九州') { // コンソールに福岡県と表示 console.log('福岡県です。'); } }); |
IDの判定（要素のIDが’text’だったらclassを追加）
classnoneにはあらかじめcssのdisplay: noneを指定しておきます。
classnoneを要素に追加することで、要素自体が非表示になるサンプルです。
HTML＆CSS
|
1 2 3 4 5 6 7 |
<style> .none { display: none; } </style> <p id="text">IDの判定</p> |
jQuery
|
1 2 3 4 5 6 7 8 |
$(function() { // <p>要素のIDが'text'だったら if ($('p').attr('id') == 'text') { // class'none'を追加 $('p').addClass('none'); } }); |
結果（HTML）
|
1 |
<p id="text" class="none">IDの判定</p> |
結果（ブラウザ）
|
1 |
<!--非表示になる--> |
<p>要素にclassnoneが追加され、非表示になります。
classの判定（要素にclass’none’が付いていたらclassを削除）
classnoneにはあらかじめcssのdisplay: noneを指定しておき、そのclassが指定された<p>要素は非表示になっています。
classnoneを要素から削除することで、要素自体が表示されるサンプルです。
HTML＆CSS
|
1 2 3 4 5 6 7 |
<style> .none { display: none; } </style> <p class="none">classの判定</p> |
jQuery
|
1 2 3 4 5 6 7 8 |
$(function() { // <p>要素にclass'none'が付いていたら if ($('p').hasClass('none')) { // class'none'を削除 $('p').removeClass('none'); } }); |
結果（HTML）
|
1 |
<p>classの判定</p> |
結果（ブラウザ）
|
1 2 |
<!--ブラウザに表示される--> classの判定 |
<p>要素からclassnoneが削除され、要素が表示されます。
if文を一行で記述
単純なif文であれば、1行で処理できます。
|
1 2 3 4 5 6 7 8 9 |
$(function() { // 県名を変数に格納 var pref = '福岡'; // if文を一行で記述 if (pref == '福岡') console.log(pref+'です。'); }); |
結果（コンソール）
福岡です。
{}（波カッコ）を省略し、改行せずに1行で記述しています。
elseがない単純なif文であればこの書き方もシンプルで好きですが、独特な記述法なので、使うかどうかはコーディング規約等で確認し、判断した方がいいかもしれませんね。
たまに他所様のソースでこの記述法を見かけるため、知っておくと良いでしょう。
