JavaScriptのrepeat()：文字列を繰り返してテキスト棒グラフを作る

ログに区切り線を入れたい、件数を記号の長さで比較したい。同じ文字列を何度も連結する場面では、String.prototype.repeat()を使うと意図を簡潔に表現できます。

この記事では、問い合わせ件数をコンソールに表示する小さな棒グラフを作ります。中心となる機能はrepeat()だけです。回数に上限を設け、不正な入力で処理が止まる場合も確認します。

repeat()の目的と基本動作

repeat()は、呼び出し元の文字列を指定回数つないだ文字列を返すメソッドです。元の文字列を書き換えず、結果を戻り値として受け取ります。基本仕様はMDNのrepeat()リファレンスで確認できます。

(() => {
  const unit = "ab";
  const result = unit.repeat(3);
  console.log(result);
  console.log(unit);
  console.log(`[${unit.repeat(0)}]`);
})();

期待出力は次のとおりです。

ababab
ab
[]

3を渡すと"ab"全体が3回連結されます。0なら空文字列なので、最後の行は角括弧だけになります。区切り文字は自動挿入されません。空白や改行が必要なら、繰り返す文字列そのものに含めます。

引数と戻り値

呼び出し方はtext.repeat(count)です。

• textは繰り返す文字列です。
• countは繰り返す回数です。通常は0以上の有限な整数を渡します。
• 戻り値は連結後の文字列です。配列やイテレーターではありません。

正の小数を渡した場合、例えば"ab".repeat(2.8)は"abab"になります。ただし、件数を扱うアプリで小数を黙って受け入れると、入力ミスを見逃します。後の実例では整数だけを許可します。

動作環境と実行方法

確認基準日は2026年11月3日です。MDNはrepeat()を、2015年9月以降に主要ブラウザー間で広く利用可能となった機能として掲載しています。現在のChrome、Edge、Firefox、Safariで利用できます。ただし、この説明は古いすべてのブラウザーへの対応を意味しません。

記事のコードは、ブラウザーとNode.jsの両方で実行できます。Node.js側は22系以降を実行対象とします。これは記事の対象バージョンであり、メソッドが初めて実装されたバージョンではありません。外部パッケージやビルド処理は不要です。

ブラウザーで実行する

Chromeなどで開発者ツールを開き、Consoleタブを選びます。記事中のJavaScriptコードブロックの中身だけを貼り付けて実行してください。出力先はページ本文ではなくコンソールです。

各例は即時実行関数で囲んでいるため、同じコードを再実行してもトップレベルのconst再宣言を避けられます。実行結果の後に開発者ツールが表示するundefinedは、例で出力した行には含めません。

Node.jsで実行する

Node.jsを用意し、メインのコードをUTF-8のrepeat-demo.cjsとして保存します。そのファイルがあるフォルダーでターミナルを開き、次を実行します。

node --version
node repeat-demo.cjs

最初のコマンドで22系以降か確認し、次のコマンドで実行します。拡張子を.cjsにしているので、周囲のプロジェクトのモジュール設定に影響されにくい構成です。ファイルを指定する手順はNode.js公式のスクリプト実行ガイドでも説明されています。

実例：件数をテキスト棒グラフにする

次のコードは単独でコピーして実行できます。1件を#一つで表し、表示する記号は最大10個に制限します。件数が上限を超えたら+を添え、実際の件数も残します。

(() => {
  const MAX_MARKS = 10;

  function formatBar(label, count) {
    if (typeof label !== "string") {
      throw new TypeError("labelは文字列にしてください");
    }
    if (!Number.isSafeInteger(count) || count < 0) {
      throw new RangeError("countは0以上の安全な整数にしてください");
    }

    const marks = Math.min(count, MAX_MARKS);
    const bar = "#".repeat(marks);
    const overflow = count > MAX_MARKS ? "+" : "";
    return `${label}: [${bar}${overflow}] ${count}件`;
  }

  const rows = [
    { label: "受付", count: 3 },
    { label: "対応中", count: 0 },
    { label: "完了", count: 12 },
    { label: "不正入力", count: -1 },
    { label: "確認待ち", count: 2 },
  ];

  for (const row of rows) {
    try {
      console.log(formatBar(row.label, row.count));
    } catch (error) {
      if (error instanceof Error) {
        console.log(`${row.label}: ${error.name}: ${error.message}`);
      } else {
        throw error;
      }
    }
  }
})();

期待出力は次のとおりです。コードは仕様に基づいて静的に点検しており、ここに示す出力は実機での実行記録ではありません。

受付: [###] 3件
対応中: [] 0件
完了: [##########+] 12件
不正入力: RangeError: countは0以上の安全な整数にしてください
確認待ち: [##] 2件

なぜ回数を制限するのか

Math.min()で求めたmarksは最大10です。元の件数が大きくても、repeat()が生成する棒は短いままになります。単に文字列を短縮するだけでは件数を誤認しやすいため、+と元の数値を併記しています。

入力検証は上限の適用より先に行います。負数や小数を丸めてしまうと、不正な件数を正常な表示に見せてしまうからです。formatBar()は表示用文字列を返すだけなので、呼び出し側で出力先を選べます。

例外を行ごとに捕捉しているため、不正入力の後にある「確認待ち」も処理されます。これは一覧レポート向けの方針です。全件が正しくなければ成果物を作れない業務では、例外を呼び出し元へ伝えて全体を中止する設計も選べます。

失敗例と制約

負数と無限大は例外になる

次の例も単独で実行できます。エンジンごとに異なる例外メッセージを避け、例外名だけを表示します。

(() => {
  for (const count of [-1, Infinity]) {
    try {
      console.log("x".repeat(count));
    } catch (error) {
      if (error instanceof Error) {
        console.log(error.name);
      } else {
        throw error;
      }
    }
  }
})();

期待出力は次のとおりです。

RangeError
RangeError

-1やInfinityを渡すとRangeErrorになります。無限大やサイズ超過の例外についてはMDNの文字列生成エラー解説に説明があります。

有限な回数でも巨大な文字列は作れない

生成できる文字列の最大サイズはエンジンに依存します。上限未満でも、大量の文字列生成はメモリーや処理時間を消費します。例外を捕捉するだけで対処せず、用途に合う上限を事前に設けてください。

実例は繰り返す単位が1文字の#なので、回数の上限が棒の長さの上限にもなります。単位を利用者が入力できる設計では、回数に加えて単位の長さも制限する必要があります。

repeat()は同期処理です。Promiseを返さず、awaitも不要です。巨大な処理をawaitで包んでも、文字列生成が自動的に分割されるわけではありません。

文字列の長さと表示幅は別

日本語や絵文字を繰り返しても、画面上の幅が半角英数字と同じになるとは限りません。今回の例ではラベルの開始位置を厳密にそろえず、角括弧で棒の範囲を示しています。見た目を精密に制御したい画面では、文字の個数だけに頼らずレイアウトを設計します。

活用事例と改善の進め方

repeat()は、短い固定パターンを必要な数だけ生成する用途に向いています。

• コマンドラインの集計結果に、上限付きの棒グラフを添える。
• テキストレポートに、一定幅の区切り線を生成する。
• 階層構造を表示するとき、検証済みの深さに応じて空白を生成する。
• テストデータ用に、長さを制限した繰り返し文字列を作る。

まずは実例のcountを0、10、11に変えると、空表示、上限ちょうど、上限超過の境界を確認できます。次に小数や文字列を渡し、入力検証が意図どおりに拒否するか確認してください。

実務で改善するなら、表示上限を用途ごとの設定にし、上限超過の意味を利用者に説明するとよいでしょう。今回の上限10は読みやすさのための設計値です。グラフだけで正確な量を伝えようとせず、数値を併記する方針を保つと、ログとしても読み取りやすくなります。

公式参考資料

• MDN：String.prototype.repeat()の仕様と互換性
• MDN：無限大やサイズ超過によるRangeError
• Node.js：コマンドラインからスクリプトを実行する