カテゴリ: JavaScript 更新日: 2025/11/16

JavaScriptの文字列を繰り返す方法(repeatメソッド)

JavaScriptの文字列を繰り返す方法(repeatメソッド)
JavaScriptの文字列を繰り返す方法(repeatメソッド)

先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで同じ文字を何回も繰り返して表示したいときって、どうすればいいんですか?」

先生

「とても良い質問ですね。JavaScriptには、文字列を繰り返すためのrepeatメソッドという便利な機能がありますよ。」

生徒

「repeatメソッド?どんなことができるんですか?」

先生

「文字列を指定した回数だけ繰り返してくれるメソッドです。例えば、「*」を10個並べたいときなどに使います。それでは、実際の使い方を見ていきましょう!」

1. repeatメソッドとは?

1. repeatメソッドとは?
1. repeatメソッドとは?

JavaScriptのrepeatメソッドは、ある文字列を指定した回数だけ繰り返して新しい文字列を作るためのメソッドです。 たとえば、「*」を10回繰り返したい場合や、「Hello!」を3回表示したい場合にとても便利です。 これは、ループ(繰り返し処理)を使わずに、たった1行で実現できるのが特徴です。

まずは基本的な構文を確認してみましょう。


文字列.repeat(回数)

ここで「文字列」には繰り返したいテキストを、「回数」には繰り返したい回数を指定します。

2. repeatメソッドの基本的な使い方

2. repeatメソッドの基本的な使い方
2. repeatメソッドの基本的な使い方

それでは、実際にrepeatメソッドを使ってみましょう。


const stars = "*".repeat(5);
console.log(stars);

*****

このように、アスタリスク(*)が5回連続して表示されます。 もし10回繰り返したい場合は、"*".repeat(10)と書くだけです。

3. 実用的な例:区切り線やタイトル装飾に使う

3. 実用的な例:区切り線やタイトル装飾に使う
3. 実用的な例:区切り線やタイトル装飾に使う

repeatメソッドは、実際のプログラムでも便利に使えます。 例えば、コンソール上に区切り線を表示したり、タイトルの上下に装飾を付けるときなどです。


const title = "JavaScript入門";
const line = "=".repeat(20);

console.log(line);
console.log(title);
console.log(line);

====================
JavaScript入門
====================

このように、repeatメソッドを使うことで、視覚的に見やすい出力を簡単に作れます。

4. 文字列の組み合わせで応用してみよう

4. 文字列の組み合わせで応用してみよう
4. 文字列の組み合わせで応用してみよう

repeatメソッドは、他の文字列操作と組み合わせることでさらに便利になります。 例えば、「#」を使ってピラミッドのような形を作ることもできます。


for (let i = 1; i <= 5; i++) {
  console.log("#".repeat(i));
}

#
##
###
####
#####

このように、ループとrepeatを組み合わせると、パターンを生成することもできます。 例えば、進行状況バーやゲームのUIなどでも応用可能です。

5. 注意点:負の数や小数は使えない

5. 注意点:負の数や小数は使えない
5. 注意点:負の数や小数は使えない

repeatメソッドでは、繰り返す回数に「0以上の整数」を指定する必要があります。 負の数や小数、または大きすぎる数を指定するとエラーになります。


// エラーになる例
console.log("A".repeat(-2)); // ❌ 負の数
console.log("B".repeat(2.5)); // ❌ 小数

つまり、repeatは「整数で、0以上の数値」でしか使えません。 ちなみに、0を指定した場合は空文字列が返ります。


console.log("A".repeat(0)); // 空文字列


このように、エラーを防ぐためにも、繰り返し回数をきちんとチェックすることが大切です。

6. repeatメソッドを使ったちょっと便利なテクニック

6. repeatメソッドを使ったちょっと便利なテクニック
6. repeatメソッドを使ったちょっと便利なテクニック

たとえば、数字を2桁でそろえたいとき(01, 02, 03…)などにもrepeatを活用できます。 文字数が足りないときに0を補う処理なども簡単に書けます。


function padNumber(num) {
  return "0".repeat(2 - String(num).length) + num;
}

console.log(padNumber(5));  // 05
console.log(padNumber(12)); // 12

05
12

これは、repeatを使って「足りない分だけ0を埋める」処理をしている例です。 実務でも役立つちょっとしたテクニックですね。

7. repeatメソッドの特徴まとめ

7. repeatメソッドの特徴まとめ
7. repeatメソッドの特徴まとめ
  • repeatは、文字列を指定回数だけ繰り返すメソッド。
  • 書き方は 文字列.repeat(回数)
  • 負の数や小数を指定するとエラーになる。
  • 0を指定すると空文字列を返す。
  • 文字のパターンや整形出力など、幅広い場面で使える。
カテゴリの一覧へ
新着記事
New1
TypeScript
TypeScriptでパスエイリアスを設定する方法!baseUrlとpathsでコードをスッキリ整理
New2
JavaScript
JavaScriptのfor文の書き方を初心者向けにやさしく解説
New3
JavaScript
JavaScriptの関数でよくあるエラーとその解決法まとめ
New4
JavaScript
JavaScriptのイベント処理でよくあるエラーとその対処法
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのマウスイベントの使い方(click, mouseoverなど)
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptのtoStringとString関数の違いを初心者向けに解説
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptの純粋関数(pure function)と副作用の違いを理解しよう
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.6
Java&Spring記事人気No6
TypeScript
TypeScript学習におすすめの無料教材・リファレンスサイト【初心者向け】
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptで文字列をforループで1文字ずつ処理する方法!初心者向け解説
No.8
Java&Spring記事人気No8
TypeScript
TypeScriptの始め方:開発環境の構築手順【初心者向け】