【JavaScript】for文を使ったループ処理の書き方を分かりやすく解説！

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

今回は、for文を使ったループ処理の書き方を分かりやすく解説します。
ループ処理を使えるとコードを簡潔に書けるようになるので、for文を覚えて綺麗なWebサイトを作ろう！

ループ処理とは？
for文とは？
for文の書き方
配列を使う
最後に

ループ処理とは？

ループ処理とは、その名の通り繰り返し実行させる処理のことを言います。

Wegサイトには繰り返して行うと便利なことがたくさんあります。
for文を使わず書こうとすると、同じようなコードをたくさん書く必要があり、効率が良くありません。

そこでfor文の出番です。
for文を使えば処理を繰り返し実行させることができます。

for文とは？

ループ処理には「for（フォー）文」「while（ホワイル）文」があり、さらに「break文」や「continue文」などの便利なものを用意されています。

for文の特徴は、回数を指定する処理に適していて、while文はある一定の条件に対して繰り返す処理に適しています。

すべて覚えるのは大変なので、ここでは基本のfor文について解説したいと思います。

for文の書き方

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

for ( 初期値; 条件式; 増減値 ) {
    // ループ処理
}

これがfor文の基本的な書き方です。
forの後のカッコにループ処理を書き、その処理が指定した回数まで実行されます。

htmlとあわせてサンプルを書いてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>○○○</title>
    <meta name="keywords" content="○○○,○○○,○○○">
    <meta name="description" content="○○○">
</head>
<body>

<script>
    for (var i = 1; i <= 3; i++) {
        document.write(i + "回目<br>");
    }
</script>

</body>
</html>

コードをコピーし、index.htmlと名前で保存してブラウザで開いてみると、「1〜3回目」と繰り返し表示されるかと思います。

解説すると、

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

というループ処理になり、document.writeで実行させると、「1〜3回目」まで繰り返し表示されます。

配列を使う

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

先ほどのhtmlのscriptタグを、下記コードに置き換えてみてください。

let name = ["ユウ", "ケイ", "ケンジ"];
for (let i = 0; i < name.length; i++) {
    document.write(name[i] + "<br>");
}

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

というループ処理になり、document.writeで実行させると、3人の名前が繰り返し表示されます。

この処理を1つ作っておけば、どこからでも1行で呼び出せることが出来るので、繰り返して表示させるものはfor文で書いておくと便利です。

最後に

以上、for文を使ったループ処理の書き方を解説しました。

ここで解説したことは基礎中の基礎になります。
for文はとても奥が深く、if文と組み合わせて条件を追加したり、工夫次第で複雑な繰り返しができるようになります。

まずは基礎を覚えて色々試してみましょう。

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