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

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

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

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

for文とは？
for文の書き方
解説
配列を使う
解説
最後に

for文とは？

for文とは、繰り返し処理を行う構文のことです。
for文を使うことで、少ないコード量で記述することができます。

for文以外にも、繰り返し処理ができる構文が用意されていますが、1番分かりやすいfor文をご紹介します。

for文の書き方

では、早速for文を書いてみます。

<!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>
</head>
<body>

<div></div>

<script>
    $(function() {
        for (var i = 1; i <= 10; i++) {
            $('div').append('<p>' + i + '回目</p>');
        }
    });
</script>

</body>
</html>

ブラウザで確認すると、1回目から10回目までテキストが表示されていると思います。

解説

まず5行目でjQueryを読み込んでいます。
jQueryを読み込まないと動かないので、忘れずに読み込みましょう。

9行目のdivは、テキストを入れる箱です。
ここにjQueryで書いたコードが入ります。
もちろんdiv以外に、idやclassを指定しても構いません。

13行目がfor文になります。
「var i = 1; i <= 10; i++」ここの部分に、どのように繰り返しさせるか記述しています。

少し分かりづらいですが、良くみると3つに分かれています。
左から、

初期値：「iが1」と指定
条件式：「iが10になるまで」繰り返す
増減値：「i++」で、iが1ずつ増える

となっています。

「i」は任意で大丈夫で、この変数を「1」と指定しています。
次に、その「1」が「10」になるまで繰り返すという条件になります。
最後は、「i++」で、1ずつ増やすようにしています。

ちょっと難しいですが、これがfor文の基本の書き方になります。

もし、for文を使わないで書いた場合、

$(function() {
    $('div').append('<p>1回目</p>');
    $('div').append('<p>2回目</p>');
    $('div').append('<p>3回目</p>');
    $('div').append('<p>4回目</p>');
    $('div').append('<p>5回目</p>');
    $('div').append('<p>6回目</p>');
    $('div').append('<p>7回目</p>');
    $('div').append('<p>8回目</p>');
    $('div').append('<p>9回目</p>');
    $('div').append('<p>10回目</p>');
});

のように、それだけ記述しなければなりません。

配列を使う

繰り返しは数字だけではなく、工夫次第で便利に使用できます。
配列を使った繰り返しも良く使用するのでご紹介します。

$(function() {
    let name = ["ユウ", "ケイ", "ケンジ"];
    for (let i = 0; i < name.length; i++) {
        $('div').append('<p>' + name[i] + '</p>')
    }
});

3人の名前が表示されると思います。

解説

上から解説すると、

let name：nameという名前の変数に3人の名前を入れる
初期値：「let i = 0」で、最初から始めると指定
条件式：「name.length」でnameの要素を取得
増減値：「i++」で、iが1ずつ増える

nameという配列を作り、その中に任意の文字を入れます。
それをfor文で表示するように記述しています。

3人くらいであれば、わざわざfor文を使う意味はあまりありませんが、例えば学校の生徒の名前など、多くの要素が必要なときに、とても便利です。

最後に

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

for文はとても便利で、使う場面が多いです。
if文と合わせて覚えると、出来ることがかなり多くなるので、頑張って覚えましょう。

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