JavaScriptでsetIntervalを学んでみた

＜前提＞
・使用PC；MacBook Air M1(購入日：2021年4月)
・テキストエディタ：VScode

ーーーーーーーーーーーーーーーーーーーーーーーー
こんにちは！シュートです。今日が初投稿となります。

最近、JavaScriptの勉強をスタートしたんですが、HTML/CSSから急に難しくなって、すごく困っていました。

やっと自分の言葉で説明できるようになったので、ここに記録していきたいと思います。

今日のテーマは、setInterval（一定時間ごとに、特定の処理が繰り返される）。

画像のように、”0〜5の数字を1秒づつ出力させる” などですね。

まずは簡単なコードから書いてみよう。

というわけで、下記のコードで実現してみました。

qiita.js

let count = 0;
const countUp = function () {
    console.log(count++);
}

const intervalId = setInterval(() => {
    countUp();
    if (count > 5) {       
        clearInterval(intervalId);
    }
}, 1000);

英語がたくさん並んで（当たり前やろ）何書いてるか急にわかんない！！
式が長いと、頭パンクしそうになりませんか？笑
（この程度で長いとか言うな）

たったこれだけなのに、コードの意味を理解して、人に説明できるまで2時間もかかってしまいました。笑

ーーーーーーーーーーーーーーーーー

①まず、変数を定義します

qiita.js

let count = 0;

・0~Xまで数字が変わるので、変数を定義するletを使います。

---

②次に、0〜Xまで表示する関数を作ります。

qiita.js

const countUp = function () {
    console.log(count++);
}

・“count++” で、1ずつ順番に出力されます。
・これで、countUpの中身ができました。

---

③インターバルの機能内容を決めていきます。
まず、それを表す定数を決めます。

qiita.js

const = intervalId 

---

④定数に代入する関数を作ります。

qiita.js

setInterval( 関数, 時間間隔(ミリ秒));

関数より先に、時間間隔だけ決めます。

qiita.js

setInterval( 関数, 1000);  // 1000ミリ秒=1秒 

これで、1秒間隔と決まりました。

---

⑤関数を作る。

qiita.js

 setInterval( () => {
    countUp();
}

これだけだと、
このインターバル表示が止まりません。

永続的に数字が出力され続けます。

なので、出力を止める条件が必要です。
それが、次のif文です。

---

⑥if文を作る。

qiita.js

 if (count > 5) {      
        clearInterval(intervalId);
    }

・5以上になったら、出力を止める。
・出力を止めるのが、 clearInterval（インターバルをクリアする）。
・（）の中は引数が入る。止めたい関数名を書く。ここでは、intervalId。

---

⑦　④〜⑥をまとめると、こう。

qiita.js

const intervalId = setInterval(() => {
    countUp();
    if (count > 5) {      
        clearInterval(intervalId);
    }
}, 1000);

---

以上です。

最後までご一読いただき、ありがとうございました！

言葉のチョイスがわかりにくかったら、ぜひコメントをお願いいたします！
（そこは関数名やなくて変数名やろがい！とか笑）

シュート