JavaScript のカウンター

  1. JavaScript で変数を使用してカウンターを実装する
  2. JavaScript でセッションストレージを使用してカウンターを実装する

カウンターは、特定の事柄の発生をカウントするために使用する数値です。カウンターが重宝する状況はたくさんあります。コード内の正規変数を使用するか、セッションストレージを使用して、カウンターを実装できます。

JavaScript で変数を使用してカウンターを実装する

カウンターを実装する最初の方法は、変数を使用することです。たとえば、次の例では、value()という名前の関数があります。その関数内には、最初は 0に設定された counter 変数があります。次に、Math.random()関数を使用して乱数を生成しています。Math.random()関数が浮動小数点値を返すことはわかっています。したがって、Math.floor()関数を使用して、この浮動小数点値を整数値に変換します。その後、生成された数値を randomNo 変数内に格納します。

function value(){
  let counter = 0;
  let randomNo = Math.floor(Math.random() * (10 - 0 + 1) + 0);
  
  while(randomNo != 5){
      randomNo = Math.floor(Math.random() * (10 - 0 + 1) + 0);
      counter += 1;
  }
  return counter;
}

console.log("Counter value is", value());

while ループ内には、生成された乱数が 5に等しいかどうかをチェックする条件があります。そうでない場合は、カウンターをインクリメントして、while ループが引き続き実行されるようにします。条件が false の場合、つまり生成された乱数が 5に等しくなる場合、value()関数はカウンター変数の値を返します。

最後に、value()関数によって返されるカウンター変数の値を、以下に示す出力として出力します。

出力:

Counter value is 23

上記のカウンタの出力値は、生成される回数 5の反復回数によって異なることに注意してください。

JavaScript でセッションストレージを使用してカウンターを実装する

セッションがブラウザで実行されている間、またはブラウザウィンドウが開くまで、カウンタ変数の値を保持する必要がある場合があります。このような場合、セッションストレージを利用できます。セッションストレージは、カウンタ変数の値を長期間保持するために使用されます。例を挙げてこれを理解しましょう。

この例では、5回実行される for ループがあります。そして、実行するたびに、value()関数を呼び出します。value()関数内で、counter 変数を 0に設定し、変数の値を 1ずつインクリメントしてから、値を出力します。

for(let i =0; i<5; i++){
    value();
}

function value(){
    let counter = 0;
    console.log("Counter Value:", counter+1);
}

出力:

Counter Value: 1
Counter Value: 1
Counter Value: 1
Counter Value: 1
Counter Value: 1

ここでの問題は、value()関数を呼び出すたびに、カウンターの値を 0として設定することです。これは不要です。ループが実行されるまで、その値をインクリメントし続けたいと思います。しかし、このコード行のために、let counter = 0;値は常にゼロになります。したがって、毎回 1​​として出力を取得します。

セッションストレージを使用することで、この問題を解決できます。そのためには、最初にコードから counter 変数を削除してから、以下のコード例に示すように、sessionStorage.setItem()メソッドを使用してセッションストレージ内に counter という名前の同じ変数を作成する必要があります。

setItem()メソッドは、キーと値の 2つのパラメーターを取ります。これらのパラメータは両方とも文字列です。この場合、キーは counter(キーには任意の名前を指定できます)になり、値は 0に設定されます。

また、if ステートメントを使用して、counter 変数がセッションストレージ内に既に作成されているかどうかを確認します。そうでない場合は、それを作成してその値をゼロに設定するだけです。counter 変数がすでに作成されているかどうかを事前に確認しないと、setItem()を呼び出すたびに、counter 変数の値が 0になりますが、これは望ましくありません。

開発者ツールを開いてからアプリケーションタブをクリックすると、最初は次のようになります。

セッションストレージの初期外観

その後、文字列である getItem() メソッドを使用して、セッションストレージから値を取得します。 ‘Number()‘メソッドを使用して、Number()メソッドを使用してこの値を数値に変換し、counterValue 変数内に格納します。

次に、counterValue 変数の値をインクリメントし、セッションストレージ内に再度保存します。そして最後に、counter 値をコンソールウィンドウに出力します。

常に注意しなければならないことの 1つは、ページが更新されるたびにセッションストレージをクリアすることです。ページが更新されているかどうかを確認するには、ウィンドウメソッド onunload を使用してから、sessionStorage.clear();を使用できます。セッションストレージ内に存在する値をクリアします。

window.onunload = () => sessionStorage.clear();

for(let i =0; i<5; i++){
    value();
}

function value(){
    
    if(sessionStorage.getItem("counter") == null)
        sessionStorage.setItem("counter", "0");

    let counterValue = Number(sessionStorage.getItem("counter"))
    sessionStorage.setItem("counter",counterValue + 1);

    console.log("Counter Value:",  sessionStorage.getItem("counter"));
}

出力:

Counter Value: 1
Counter Value: 2
Counter Value: 3
Counter Value: 4
Counter Value: 5

上記のコードを実行すると、期待どおりに counter 変数の値が取得されます。