JavaScript の repeat メソッド
「同じ文字を何回も並べたい…でもループはまだ難しい」そんなときの近道が repeat()。文字列を好きな回数だけつなげて、新しい文字列を作るメソッドです。
使い方の基本
文字列.repeat(回数)
- 役割: 指定した回数、文字列を繰り返した新しい文字列を返す
- 元の文字列: 変わらない（破壊しない）
- 戻り値: 新しく作られた文字列
よく使うパターンと動き
- 正の整数を渡す: その回数だけ繰り返す
"Hi".repeat(3); // "HiHiHi"
- 0 を渡す: 空文字列（何もない文字列）になる
"Hi".repeat(0); // ""
- 負の数や小数を渡す: エラーまたは切り捨ての対象
- 負の数: RangeError（不正な回数）小数: 自動で小数点以下が切り捨てられる
"Hi".repeat(-1); // RangeError
"Hi".repeat(2.9); // "HiHi"（2に切り捨て）
- とても大きい数: メモリを大量に使うので注意（ブラウザが固まることも）
例題で身につける
区切り線を作る（コンソールやログで便利）
const line = "-".repeat(30);
console.log(line);
// ------------------------------
- ポイント: 見やすい「線」を即席で作れる
表の見出しを整える（簡易レイアウト）
const title = "商品一覧";
console.log(title);
console.log("=".repeat(title.length));
// 商品一覧
// ========
- ポイント: 文字数に合わせて線の長さを揃えられる
パスワードの伏字表示（UIの練習）
const input = "MySecret";
const masked = "•".repeat(input.length);
console.log(masked);
// ••••••••
- ポイント: 文字数をそのまま伏字の数にできる
簡単な進捗バー（学習の達成感を可視化）
function progressBar(percent) {
const total = 20; // バーの長さ
const filled = Math.round((percent / 100) * total);
return "[" + "#".repeat(filled) + "-".repeat(total - filled) + "] " + percent + "%";
}
console.log(progressBar(0)); // [--------------------] 0%
console.log(progressBar(35)); // [#######-------------] 35%
console.log(progressBar(100)); // [####################] 100%
- ポイント: 文字を足したり引いたりするだけで視覚的に進捗がわかる
連番やラベルの見やすい整形（ミニ課題）
const items = ["Apple", "Banana", "Cherry"];
items.forEach((name, i) => {
const idx = (i + 1).toString();
const dots = ".".repeat(12 - idx.length - name.length);
console.log(idx + ". " + name + dots + "OK");
});
// 1. Apple.....OK
// 2. Banana....OK
// 3. Cherry....OK
- ポイント:
repeat()で「揃える」感覚がつく
つまずきやすいポイント
- 引数は数値だけ: 文字列の「数字」でも、内部で数値に変換されますが、変換できないとエラーになります
"A".repeat("3"); // "AAA"（3に変換される）
"A".repeat("three"); // RangeError
- 空文字列に注意: 元が空文字なら何回繰り返しても空
"".repeat(5); // ""
- メモリに注意: 何百万回など極端な回数は避ける
練習問題
- 問題1: 「*」を使って幅 40 の線を表示してください。
// ここに書く
- 問題2: 入力されたユーザー名の長さに合わせて「=」で下線を引いてください。
const username = "Kento";
// 出力例:
// Kento
// =====
- 問題3: 進捗バー関数を改造して、完了時は「Done!」と表示してください。
// 例:
// [####################] 100% Done!
- 問題4: 与えられた配列の各要素を、右側が「#」で同じ幅になるように埋めてください（幅 15）。
const words = ["dog", "elephant", "cat"];
// 例:
// dog###########
// elephant######
// cat###########
まとめのひとこと
repeat は「足すより、並べる」。ループを覚える前でも、文字を“並べる力”で画面を整えたり、見やすさを作れます。まずは「線」「伏字」「進捗バー」の3つを作れるようにしてみましょう。