はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptの基本的な文法は理解しているものの、「特定の配列の要素を順に取得し、最後まで行ったらまた最初から繰り返したい」という課題に直面している初学者から中級者のエンジニアを対象としています。

この記事を読むことで、以下のことがわかるようになります。 - JavaScriptの配列を効率的に無限ループさせる、シンプルかつ強力な方法。 - 剰余演算子 % を用いた配列インデックスの制御テクニック。 - ES6で導入されたジェネレーター関数を使った、よりモダンで柔軟な無限イテレーターの実装方法。

画像カルーセル、ゲームの背景、無限スクロールリストなど、Webアプリケーション開発において配列の要素を繰り返し利用する場面は数多く存在します。本記事が、皆さんの開発の一助となれば幸いです。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - JavaScriptの基本的な文法（変数、関数、配列、ループ） - ES6（ECMAScript 2015）以降の構文（アロー関数など）

配列を無限に利用するシーンとそのアプローチ

Webアプリケーションを開発していると、以下のようなシーンで「配列を無限に繰り返したい」というニーズが出てきます。

  • 画像カルーセルやスライダー: 表示する画像の配列があり、最後の画像が表示されたら最初の画像に戻って繰り返し表示したい。
  • ゲームの背景: 複数の背景パターンを滑らかにループさせ、ゲームの世界を無限に広げたい。
  • アニメーションフレーム: 特定のアニメーションシーケンスのフレーム画像を繰り返し表示したい。
  • データ表示: 特定のデータのセットを巡回して表示し続けるUIコンポーネント。

これらの課題を解決するために、大きく二つのアプローチがあります。

  1. 剰余演算子 % を使う方法: 最もシンプルで効率的な方法です。配列のインデックスをインクリメントし続け、そのインデックスを配列の長さで割った余りを実際のインデックスとして利用します。これにより、インデックスが配列の長さに達すると自動的に0に戻り、繰り返しを実現します。

  2. ジェネレーター関数を使う方法: ES6で導入されたジェネレーター関数は、イテレーターを作成するための強力な機能です。これを使うと、無限に値を生成し続けるイテレーターを簡潔に記述でき、for...ofループなどと組み合わせて、よりモダンで読みやすいコードで無限ループを実現できます。

本記事では、これら二つの主要な方法について、具体的なコード例を交えながら詳しく解説していきます。

実践！JavaScriptで配列を無限ループさせる方法

ここでは、["orange", "pink", "blue"]というサンプル配列を使って、実際に配列を無限に繰り返し出力する方法を具体的に見ていきましょう。

1. 最もシンプルで強力！剰余演算子（%）を使う方法

この方法は、配列の要素を順番に取り出し、配列の終わりに到達したら自動的に先頭に戻るという挙動を実現します。その鍵となるのが、JavaScriptの剰余演算子 (%) です。

考え方

  1. 現在のインデックスを保持する変数を準備します。
  2. 次の要素を取得するたびに、インデックスを1増やします。
  3. 増えたインデックスを、配列の長さで割った余り (%) を計算します。この余りが、配列内で実際にアクセスする新しいインデックスとなります。
    • 例: colors配列の長さが3の場合、colors.lengthは3です。
      • インデックス 0 % 3 = 0
      • インデックス 1 % 3 = 1
      • インデックス 2 % 3 = 2
      • インデックス 3 % 3 = 0 (ここで先頭に戻る)
      • インデックス 4 % 3 = 1 (再び次の要素へ)

コード例

Javascript

const colors = ["orange", "pink", "blue"];
let currentIndex = 0; // 現在のインデックスを保持する変数

/**
 * 配列から次の色を取得し、インデックスを更新する関数
 * @returns {string} 次の色
 */
function getNextColor() {
  // 現在のインデックスにある色を取得
  const color = colors[currentIndex];

  // 次のインデックスを計算
  // (currentIndex + 1) を colors.length で割った余りが新しいインデックスになる
  currentIndex = (currentIndex + 1) % colors.length;

  return color;
}

// 繰り返し呼び出して動作を確認
console.log(getNextColor()); // orange
console.log(getNextColor()); // pink
console.log(getNextColor()); // blue
console.log(getNextColor()); // orange (ここからループが始まる)
console.log(getNextColor()); // pink
console.log(getNextColor()); // blue
console.log(getNextColor()); // orange

// 別の場所で使う場合、currentIndexをリセットしたいなら...
// currentIndex = 0; // 必要に応じてリセット

// HTMLと連携した簡単なデモ
/*
<button id="nextColorBtn">次の色を表示</button>
<div id="colorDisplay" style="width:100px; height:100px; border:1px solid #ccc;"></div>
<script>
  const colors = ["orange", "pink", "blue", "red", "green", "purple"]; // 配列を増やしてみる
  let currentIndex = 0;

  const nextColorBtn = document.getElementById('nextColorBtn');
  const colorDisplay = document.getElementById('colorDisplay');

  function updateColorDisplay() {
    const currentColor = colors[currentIndex];
    colorDisplay.style.backgroundColor = currentColor;
    colorDisplay.textContent = currentColor; // テキストも表示
    colorDisplay.style.color = 'white'; // テキストの色
    colorDisplay.style.display = 'flex';
    colorDisplay.style.justifyContent = 'center';
    colorDisplay.style.alignItems = 'center';

    currentIndex = (currentIndex + 1) % colors.length; // インデックスを更新
  }

  // ページロード時に最初の色を表示
  updateColorDisplay(); 

  // ボタンクリックで次の色を表示
  nextColorBtn.addEventListener('click', updateColorDisplay);
</script>
*/

この方法のメリット・デメリット

  • メリット:
    • 非常にシンプルで、コードの理解が容易です。
    • パフォーマンスが良く、計算コストが非常に低い。
    • どんな種類の配列にも適用できます。
  • デメリット:
    • currentIndex のような状態変数を持つ必要があります。複数の場所で異なるループを使いたい場合は、それぞれの状態を管理する必要があります。
    • 無限に next() を呼び続けるわけではなく、明示的に関数を呼び出す必要があります。

2. モダンな無限イテレーター！ジェネレーター関数を使う方法

ES6で導入されたジェネレーター関数は、途中で処理を中断し、後で再開できる特殊な関数です。これを使うと、配列の要素を「必要になったときに」順次生成し続ける無限イテレーターを実装できます。

ジェネレーター関数の基本的な説明

  • function* という構文で定義されます。
  • 関数内で yield キーワードを使うと、値を「生成 (yield)」し、その時点で関数の実行が一時停止します。
  • ジェネレーター関数は、呼び出されるとイテレーターオブジェクトを返します。
  • イテレーターオブジェクトの next() メソッドを呼び出すたびに、ジェネレーターは停止した場所から実行を再開し、次の yield 式の値または関数の終了を示す値を返します。next() は { value: '生成された値', done: true/false } という形式のオブジェクトを返します。

無限ループジェネレーターのコード例

Javascript

/**
 * 配列を無限に繰り返し生成するジェネレーター関数
 * @param {Array<any>} arr - 繰り返し処理を行う配列
 * @returns {Generator<any, void, unknown>} 無限イテレーター
 */
function* infiniteArrayIterator(arr) {
  let index = 0;
  while (true) { // 無限ループ
    yield arr[index]; // 現在の要素を生成
    index = (index + 1) % arr.length; // 次のインデックスを計算 (ここでも剰余演算子を使用)
  }
}

const colors = ["orange", "pink", "blue"];
const colorIterator = infiniteArrayIterator(colors); // イテレーターオブジェクトを作成

// next() メソッドを呼び出して要素を取得
console.log(colorIterator.next().value); // orange
console.log(colorIterator.next().value); // pink
console.log(colorIterator.next().value); // blue
console.log(colorIterator.next().value); // orange (ループ)
console.log(colorIterator.next().value); // pink
console.log(colorIterator.next().value); // blue
console.log(colorIterator.next().value); // orange

// 別途、別のイテレーターが必要な場合は新しく作成
const anotherIterator = infiniteArrayIterator(["red", "green"]);
console.log(anotherIterator.next().value); // red
console.log(anotherIterator.next().value); // green
console.log(anotherIterator.next().value); // red

for...of ループとの組み合わせ

ジェネレーターが返すイテレーターは、for...of ループで直接利用できます。ただし、ジェネレーター関数が while(true) の無限ループを含んでいるため、明示的にループを抜ける条件を設けないと、無限に実行されてしまいます。

Javascript

const colors = ["orange", "pink", "blue"];
const colorIteratorForOf = infiniteArrayIterator(colors);

let count = 0;
for (const color of colorIteratorForOf) {
  console.log(`For...of で取得: ${color}`);
  count++;
  if (count >= 7) { // 7回取得したらループを抜ける
    break;
  }
}
// 出力例:
// For...of で取得: orange
// For...of で取得: pink
// For...of で取得: blue
// For...of で取得: orange
// For...of で取得: pink
// For...of で取得: blue
// For...of で取得: orange

この方法のメリット・デメリット

  • メリット:
    • イテレータープロトコルに準拠しており、for...ofループなど、イテラブルなオブジェクトを扱う様々なJavaScriptの機能と統合しやすいです。
    • 必要な時に値が生成されるため、メモリ効率が良い（事前に全ての要素を配列に格納しておく必要がない）。
    • 複数の独立したイテレーターを簡単に作成できます。
    • コードがより「宣言的」で読みやすいと感じる人もいます。
  • デメリット:
    • ジェネレーター関数の概念を理解する必要があるため、初学者には少し難易度が高いかもしれません。
    • 無限ループを明示的に停止する条件を設定しないと、意図しない挙動やフリーズを引き起こす可能性があります。

ハマった点やエラー解決

1. インデックスの範囲外アクセス

currentIndex = (currentIndex + 1) % colors.length; のように剰余演算子を使わない場合、インデックスが配列の長さを超えてしまい、undefinedが返されたり、エラーになったりすることがあります。 解決策: 必ず剰余演算子を利用して、インデックスが 0 から 配列の長さ - 1 の範囲内に収まるようにします。

2. ジェネレーターの無限ループによるブラウザフリーズ

for...of ループで無限ジェネレーターを使用する際、ループの停止条件を設け忘れると、スクリプトが無限に実行され続け、ブラウザやNode.jsのプロセスがフリーズする可能性があります。 解決策: for...of ループ内で break 文を使うなど、明示的な停止条件を必ず記述しましょう。または、必要な時だけ next() メソッドを呼び出すように設計します。

3. 複数のイテレーターの状態管理

剰余演算子を使った方法で、同じ配列に対して複数の独立した無限ループを同時に実行したい場合、currentIndex のような状態変数がグローバルスコープや関数スコープに一つしかないと、それらが干渉してしまいます。 解決策: - 状態変数を関数内で閉じるクロージャーを利用したり、オブジェクトのプロパティとして管理したりする。 - ジェネレーター関数は呼び出すたびに新しいイテレーターオブジェクト（独立した状態を持つ）を返すため、このようなケースではジェネレーターが非常に有効です。

Javascript

// クロージャーを使った例
function createInfiniteColorIterator(arr) {
  let currentIndex = 0;
  return function() {
    const color = arr[currentIndex];
    currentIndex = (currentIndex + 1) % arr.length;
    return color;
  };
}

const colors = ["orange", "pink", "blue"];
const getNextColor1 = createInfiniteColorIterator(colors);
const getNextColor2 = createInfiniteColorIterator(colors); // 独立したイテレーター

console.log(getNextColor1()); // orange
console.log(getNextColor2()); // orange
console.log(getNextColor1()); // pink
console.log(getNextColor2()); // pink

まとめ

本記事では、JavaScriptで配列の要素を無限に繰り返し利用するための二つの主要な方法を解説しました。

  • 剰余演算子 % を使う方法:
    • 最もシンプルで、直感的、そしてパフォーマンスに優れています。
    • currentIndex = (currentIndex + 1) % arr.length; という一行がその核心です。
    • 手軽に実装したい場合や、パフォーマンスが重視される場合に非常に有効です。
  • ジェネレーター関数を使う方法:
    • ES6で導入されたモダンな機能で、イテレータープロトコルに準拠します。
    • function* と yield を使うことで、値を「オンデマンド」で生成し、for...of ループなどとの親和性が高いです。
    • より複雑なイテレーションロジックや、複数の独立したイテレーターが必要な場合に適しています。

この記事を通して、皆さんが自身のプロジェクトで画像カルーセルやゲームの背景、無限スクロールリストなど、繰り返し表示したいコンテンツをスマートに実装できるようになることを願っています。

今後は、これらの技術を応用した本格的なUIコンポーネント（例：ReactやVue.jsでのカルーセルコンポーネント実装）についても記事にする予定です。

参考資料