【JavaScript実践 #4】jQueryのif文をわかりやすく解説！

こんにちは！
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです！
Webデザイナーってどんな仕事内容？これからWebデザイナーに挑戦したい！という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています！

今回は、jQueryのif文をわかりやすく解説したいと思います。
if文は使う場面が多いので、基本をマスターしましょう！

YouTubeにもアップしていますので、見ていただけたら嬉しいです！

if文とは？
if文の書き方
解説
- 変数
- if文
パソコンとスマホを判別する
最後に

if文とは？

if文とは、条件分岐のことで、表示させる要素などを複数に分岐させて処理することができます。

例えば、午前中だったら「おはよう」と表示させ、午後だったら「こんにちは」と表示させることができます。

あとは、パソコンとスマホを判別して、それぞれ違うものを表示させたりもできるので、if文は使う場面がとても多いです。

if文の書き方

それでは、if文の書き方をご紹介します。
テストの結果によって、表示させるテキストを変えるコードを書いてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="js/script.js"></script>
</head>
<body>

<p id="txt_result"></p>

</body>
</html>

htmlは、必要最低限のコードで、pタグにテキストを入れるようにします。

$(function () {
    var result =70;
    var point = 80;

    if (result >= point) {
        $('#txt_result').html('合格！');
    } else {
        $('#txt_result').html('不合格');
    }
});

ブラウザで確認してみます。
残念ながら不合格と表示されるかと思います。

解説

変数

まず2行目と3行目のコードは、変数と言って、値を代入しています。
「var result =70;」と書いて、「result」に「70」を代入しています。

「result」の名前ですが、テストの結果ということが分かりやすいようにresultとしています。
名前は、あらかじめ用意されているもの以外であれば、何でも大丈夫です。

「point」は、合格点の意味でpointとしています。

if文

5行目以降がif文の記述になります。

ifの後に、「(result >= point)」と記述しています。
これは、「pointよりresultが、等しい、または大きい場合」という意味になります。

上記コードの例だと、resultの方が小さいので、その下の「else」に分岐されて、不合格のテキストが表示されるということになります。

試しに、resultの値を変更してみます。

var result =90;

ブラウザで確認すると、「合格！」と表示されるかと思います。

パソコンとスマホを判別する

もうひとつ良く使うif文をご紹介します。
パソコンとスマホ、どちらで見ているかを判別させてみます。

$(function () {
    var ua = navigator.userAgent;
    if ((ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0) && ua.indexOf('Mobile') > 0) {
      $('#txt_result').html('スマホ');
    } else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
      $('#txt_result').html('タブレット');
    } else {
      $('#txt_result').html('パソコン');
    }
})

ブラウザで確認すると、その通りにテキストが表示されるかと思います。

2行目の「navigator.userAgent」で、端末の情報が取得でき、「ua」という変数に代入しています。

if文の記述は長くて難しいので、覚える必要はないです。
こうゆうことが出来るということを覚えておきましょう。

最後に

以上、jQueryのif文を解説しました。

if文はとても便利で、使う場面が多いです。
慣れてくれば、色々応用できるようになって、コーディングが楽しくなりますので、頑張って身につけましょう。

次回は、for文について解説したいと思います。

最後までお読みいただきありがとうございました！
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです！
何か気になること等あればお気軽にコメントください。