【デザイン基礎｜実務向け】do…while、舐めてかかったら痛い目に？実務で光る「最低1回」の妙

皆さん、こんにちは！ベテランWebデザイナーの〇〇です。

今日は、プログラミングの世界でちょっと地味な存在に思われがちなループ構文、do...whileにスポットを当ててみたいと思います。「え、今さら？」と思った方もいるかもしれませんね。私も若い頃はそうでした。普段使いはforやwhileばかりで、do...whileは「最低1回は実行される」という特性を頭の片隅に置きつつも、なかなか出番がない…なんて思っていた時期もありました。

しかし、実務経験を重ねるにつれて、この「最低1回は実行される」という特性が、特定のシナリオにおいていかに強力で、コードをスマートにするかを知りました。今回は、そんなdo...whileの真価を、具体的な実務シーンと共にご紹介します。

「最低1回」がロジックをシンプルにする

まず、do...whileの基本的な構文をおさらいしましょう。

do {
  // ここに実行したい処理
} while (条件式);

この構文が意味するのは、「まず波括弧{}の中の処理を実行し、その後にwhile()の条件式を評価する。条件式が真である限り、処理を繰り返す」ということです。ポイントは、条件式が最初に評価される前に、必ず一度は処理が実行されるという点です。

この特性が、一体どんな時に役立つのでしょうか？

実務で役立つ！do…whileの具体的な活用シナリオ

1. 確実なデータ取得リトライ処理

APIからのデータ取得は、ネットワークの不安定さやサーバー側の問題で失敗することがありますよね。そんな時、数回だけリトライしたい、というケースは非常に多いです。ここでdo...whileが輝きます。

let retryCount = 0;
const MAX_RETRIES = 3; // 最大リトライ回数
let success = false;

do {
  try {
    console.log(`データ取得を試行中... (試行回数: ${retryCount + 1})`);
    // 実際にはAPI呼び出しなどの非同期処理を記述
    // 例: const response = await fetch('/api/data');
    // if (!response.ok) throw new Error('API呼び出し失敗');
    
    // ここではランダムに成功・失敗をシミュレーション
    // 30%の確率で成功、または最終試行は必ず成功する設定
    if (Math.random() > 0.3 || retryCount === MAX_RETRIES - 1) { 
      success = true;
      console.log('データ取得に成功しました！');
    } else {
      throw new Error('一時的なネットワークエラー');
    }
    
  } catch (error) {
    console.error(`エラー発生: ${error.message}`);
    retryCount++;
    if (retryCount < MAX_RETRIES) {
      console.log('リトライします...');
      // 実際にはここで少し待つ処理を入れる (例: await new Promise(resolve => setTimeout(resolve, 1000));)
    } else {
      console.error('最大リトライ回数を超過しました。');
    }
  }
} while (!success && retryCount < MAX_RETRIES); // 成功していない、かつ最大リトライ回数未満なら繰り返す

if (!success) {
  console.log('データの取得に失敗しました。後でもう一度お試しください。');
}

この例では、まず一度はデータ取得を試み、失敗した場合にのみリトライ回数をカウントアップし、最大リトライ回数に達するか成功するまで繰り返します。「最低1回は試したい」という意図がdo...whileで非常に明確に表現されていますね。

2. ユーザーへの強制的な入力促し

JavaScriptのprompt()を使った入力で、特定の条件（例えば、数字のみ、空でないなど）を満たすまでユーザーに再入力を促したい場合にも便利です。

let userInput;
do {
  userInput = prompt("1から10までの数字を入力してください:");
  if (userInput === null) { // キャンセルされた場合
    alert("入力をキャンセルしました。");
    break; // ループを抜ける
  }
  // 入力が数字であるか、かつ1から10の範囲内であるかチェック
} while (isNaN(userInput) || parseInt(userInput) < 1 || parseInt(userInput) > 10);

if (userInput !== null) {
  alert(`入力された数字: ${userInput}`);
}

ユーザーが有効な値を入力するまで、繰り返しprompt()が表示されます。ここでも、「まず一度は入力を促し、無効であれば再入力を求める」という流れが自然に書けます。

3. 重複しないユニークIDの確実な生成

一時的なIDを生成する際、ごく稀にですが、既存のIDと重複してしまう可能性があります。特に、DOM要素のIDやデータの一時キーとして使う場合、重複は避けたいですよね。

const existingIds = new Set(['item-101', 'item-102', 'item-103']); // 既存のIDを想定
let newId;

do {
  const randomNumber = Math.floor(Math.random()  1000) + 1; // 1〜1000の乱数を生成
  newId = `item-${randomNumber}`;
  console.log(`生成ID候補: ${newId}`);
} while (existingIds.has(newId)); // 既存のIDセットに含まれている間は繰り返す

existingIds.add(newId); // 新しいIDをセットに追加
console.log(`最終的に決定したユニークID: ${newId}`);
console.log('現在のIDリスト:', Array.from(existingIds));

このコードは、生成されたIDが既存のIDと重複しないことを保証します。まず一度IDを生成してみて、もし重複していたら別のIDを生成し直す、というロジックがdo...whileで簡潔に表現できます。

do...whileを選ぶべき時、避けるべき時

do...whileは非常に強力ですが、もちろん万能ではありません。「まず一度は処理を実行したい」という明確な意図がある場合に選ぶ