【JavaScript】自動で連番を作成する（任意の桁数）

というわけで今回はJavaScriptを使用して、自動で連番（任意の桁数）できる実装をご紹介します！

自動で連番を作成する

以前、私のブログで「自動でナンバリングする方法」についてご紹介しました。
前回はCSSでしたが、今回はJavaScriptを使用して実装してみようと思います。

CSSとの違いは、一つの要素として番号を設定できる（CSSは疑似要素）のと
任意の桁数を設定できる（CSSは2桁まで？）となっております。

html準備

ではまずhtmlのコードを見ていきましょう！

【html】

<div class="p-number js-counter"></div>

数字を表示させたい要素のクラスに「js-counter」を付けます。
「js-counter」は、任意のクラス名でOKです！分かりやすいクラス名にしておきましょう！

JavaScriptの説明

ではここからJavaScriptの説明に入ります。

【JavaScript】

const counters = document.querySelectorAll('.js-counter');
  counters.forEach((counter, index) => {
    const count = (index + 1).toString().padStart(8, '0');
    counter.textContent = count;
  });

まずは「js-counter」が付いた要素を全て「counters」という変数に格納します。

counters.forEach((counter, index) => {

先程格納した「counters」から各要素（counter）とそのインデックス（index）に対してコールバック関数を実行します。（index）は0から始まるため、「index + 1」を行うことで連番が1から始まるように調整します。

const count = (index + 1).toString().padStart(8, '0');

「index + 1」は1から始まる連番を作成します。
「toString()」は数値を文字列に変換します。
「.padStart(8, ‘0’)」は。文字列が8文字に満たない場合、先頭に0を追加して8文字に揃えます。
例えば、1は「00000001」に変換されます。

「.padStart()」の数値を変更すれば何桁でも表示可能です！

 counter.textContent = count;

各「counter」要素のテキストコンテンツ（表示されるテキスト）を、上記で作成した8桁の連番に設定します。

これで実装が可能です。
実際に完成品をみてみましょう！

See the Pen ブログ用　自動で連番を付ける（8桁） by そす (@Sosgoyo) on CodePen.

まとめ

というわけで今回はJavaScriptを使用して、自動で連番（任意の桁数）できる実装をご紹介しました！
是非ご活用ください！