jQueryのif文を基本から解説！文法をマスターしよう！

システム
エンジニア

if文とはなんでしょうか？

プロジェクト
マネージャー

値や条件によって処理を変えたりする処理のことです。

jQueryのifとは？

jQueryは多機能なフリーのライブラリです。

jQueryは言語ではなくJavaScriptのライブラリであるため、jQueryで使用するif文はJavaScriptのif文と全く同じと言えます。この記事ではif文の基本から解説しますが、jQueryならではの使い方も見て行きましょう。

なおjQueryを利用する場合はhtmlのheadタグ内に以下を記述してください。jQueryのバージョンは随時更新されているので、以下の3.5.1が最新とは限りません。
<scriptsrc=”https://code.jquery.com/jquery-3.5.1.min.js”></script>

if文の簡単なサンプル

まずは簡単な例です。htmlに以下のようなdivタグがあるとします。

<div></div>

scriptタグの中に以下のようにjQueryを記述します。

$(document).ready(function(){
var fruit = ‘りんご’;

if (fruit == ‘りんご’) {
$(‘div’).append(‘<p>りんご</p>’);
}
});

実行をするとブラウザには「りんご」と表示されます。

if文で条件判断をして成り立つなら処理を実行できる

jQueryの最初の$(document).ready(function(){～});は、ページ全体を読み込んだらfunctionの内容を実行するという意味です。functionの中ではfruitという変数を宣言し、=で’りんご’と言う文字列を代入しています。そしてif (fruit == ‘りんご’)でfruitの内容がりんごであるかどうかを判定しています。==は左辺と右辺が等しいかどうかを判定する記号です。

fruitの値はりんごなので、if文の{}の処理が実行されます。そこでappendというメソッドで、divタグにりんごのタグの追加を行っています。if(){}は「もし(条件式)ならば{}をする」という意味の構文なのです。

elseはそうでないならばという意味

次はjQueryを以下のように変更してください。

$(document).ready(function(){
var fruit = ‘りんご’;

if (fruit != ‘りんご’) {
$(‘div’).append(‘<p>りんごではない。</p>’);
} else {
$(‘div’).append(‘<p>りんごでした。</p>’);
}
});

実行すると「りんごでした」と表示されます。前のサンプルの==は等しいかどうかを判定しますが、!=の場合は違うかどうかを判定します。そしてelseは「上のif文が成り立たないならば」という意味です。fruitはりんごであるため!=が成り立たず、else以下が実行されということです。

elseは連ねることができる

次はjQueryを以下のように変更してみましょう。

$(document).ready(function(){
var apple_num = 999;

if (apple_num < 10) {
$(‘div’).append(‘<p>りんごの数は1桁です。</p>’);
} else if (apple_num < 100) {
$(‘div’).append(‘<p>りんごの数は2桁です。</p>’);
} else if (apple_num >= 1000) {
$(‘div’).append(‘<p>りんごの数は4桁以上です。</p>’);
} else {
$(‘div’).append(‘<p>りんごの数は3桁です。</p>’);
}
});

実行すると「りんごの数は3桁です。」と表示されます。

if文で使える様々な記号

上のjQueryを文章で表すと、「りんごの数が10未満なら1桁、100未満なら2桁、1000以上なら4桁、どれでもないなら3桁」という意味です。if文はelseを連ねたり、不等号を使ったりできるということですね。

次はjQueryを以下のように変えてください。

$(document).ready(function(){
var apple_num = 10;
var mikan_num = 10;

if (apple_num == 10 && mikan_num == 10) {
$(‘div’).append(‘<p>りんごとみかんはどちらも10個。</p>’);
}

mikan_num = 5;

if (apple_num == 5 || mikan_num == 5) {
$(‘div’).append(‘<p>りんごとみかんはどちらかが5個。</p>’);
}
});

&&と||の違い

実行すると以下のように表示されます。

りんごとみかんはどちらも10個。
りんごとみかんはどちらかが5個。

A && BはAとBが両方とも成立するならば成り立ち、A || BはAかBのどちらかが成立すれば成り立ちます。&&や||を2個以上連ねたり、以下のように()を使って少し複雑な判定もできます。

A || (B && C)　Aが成り立つか、またはBとCの両方が成り立つか
(A || B) && C　AかBが成り立ち、かつCも成り立つか

ここまではC言語やJavaやC#などの他のプログラム言語を知っている人なら、JavaScriptも同じだと思うでしょう。しかしここからは違ってきます。
jQueryを以下のように変えてみてください。

$(document).ready(function(){
var apple_num = ’10’;
var mikan_num = 10;

if (apple_num == mikan_num) {
$(‘div’).append(‘<p>==で比較した場合、同じでした。</p>’);
}
if (apple_num === mikan_num) {
$(‘div’).append(‘<p>===で比較した場合、同じでした。</p>’);
}
});

==と===の違い

上の実行結果は、

==で比較した場合、同じでした。

となります。===は成立しませんでした。そもそも===とはどういう意味の記号なのでしょうか。JavaScriptは==では曖昧な判定、===では厳密な型判定を行います。apple_numは’10’なので文字列、mikan_numは10なので数値です。==はその違いを無視して同じ10なので「等しい」と判定します。

ところが===は型が違うため「違う」と判定するのです。この==と===の違いは把握しておきましょう。なお型を含めて違うかどうかを判定する!==もあります。

タグのidをチェックする

ここまではJavaScriptのif文の解説でしたが、以降はjQueryに関連したif文の解説です。htmlが以下のようになっているとします。

<div id=”apple”>りんご</div>

jQueryで以下を記述して実行すると、

$(document).ready(function(){
if ($(‘div’).attr(‘id’) == ‘apple’) {
alert(‘appleのidがあります。’);
}
});

「’appleのidがあります。」というポップアップが出ます。attrメソッドでdivタグのidを取得して、それがappleであるかをif文でチェックしているということです。

タグに指定したclassがあるかどうか

次はhtmlを以下のようにしてください。

<div class=”mikan”>みかん</div>

jQueryは以下のように記述します。

$(document).ready(function(){
if ($(‘div’).hasClass(‘mikan’)) {
alert(‘mikanのclassがあります。’);
}
});

実行すると「mikanのclassがあります。」とポップアップが出ます。divタグに指定した名前のclassがあるかどうかをif文でチェックしています。

システム
エンジニア

他のプログラミング言語でも同じ処理がありますね。

プロジェクト
マネージャー

そうです。if文についてより理解を深めたいのでしたらJavaScriptの理解が必要不可欠です。

jQueryのif文は全ての基本

jQueryのif文について解説しましたが、ご理解頂けましたでしょうか。
JavaScriptのif文の解説となりましたが、jQueryを使いこなすにはJavaScriptの基本文法の知識が必須なので是非マスターしてください。