知ってる？ JavaScriptで文字列を「繰り返し」作る魔法！ repeat()メソッドで、あなたのコードがもっと楽しくなる！
やっほー！ JavaScriptの世界へようこそ！
フロントエンドの魔法使い、伝説のアーキテクトがお届けする、今日の「なるほど！」なJavaScript講座。今回は、あなたのコードをもっとスマートに、もっと楽しくしてくれる、とっても便利な「文字列操作」の世界を覗いてみよう。
特に、今日は「文字列を繰り返し作る」っていう、ちょっとした魔法みたいなメソッド、「`repeat()`」に焦点を当てるね。
「え？ 文字列を繰り返す？ それって、コピー＆ペーストで良くない？」って思った？
うんうん、気持ちはわかる！ でもね、JavaScriptの`repeat()`メソッドを知ると、その便利さにきっと驚くはず。まるで、お気に入りのフレーズを、ボタン一つで何回でも、好きなだけ繰り返してくれる魔法の杖みたいなんだ。
`repeat()`メソッドって、一体どんな魔法なの？
`repeat()`メソッドは、その名の通り、ある文字列を「指定した回数だけ繰り返して、新しい文字列を作る」ためのメソッドなんだ。
例えば、
「うーん、この「おめでとう！」ってメッセージ、5回くらい表示したいな…」
って思ったとするじゃん？
普通に考えたら、
console.log(“おめでとう！”);
console.log(“おめでとう！”);
console.log(“おめでとう！”);
console.log(“おめでとう！”);
console.log(“おめでとう！”);
って、5回書くことになる。
でも、もし「おめでとう！」が100回だったら？ 1000回だったら？ 想像するだけで、ちょっとゾッとするよね。
そこで登場するのが、`repeat()`メソッドの出番！
const message = “おめでとう！”;
const repeatedMessage = message.repeat(5); // messageを5回繰り返す
console.log(repeatedMessage);
// 出力: おめでとう！おめでとう！おめでとう！おめでとう！おめでとう！
ほら！ たった1行で、同じ文字列が5回繰り返された新しい文字列ができた！
まるで、魔法の呪文みたいでしょ？
この「`message.repeat(5)`」っていう部分が、まさに魔法の呪文。
`message`っていう「元になる文字列」に、`.repeat()`っていう「繰り返し魔法」をかけて、カッコの中に「何回繰り返すか」（ここでは`5`）を指定する。そうすると、新しい、繰り返された文字列が「ポン！」って生まれるんだ。
こんな時にも便利！ `repeat()`メソッドの活用例
この`repeat()`メソッド、ただ単に文字を繰り返すだけじゃなくて、色々な場面でコードをスッキリさせてくれるんだ。
例1：区切り線をもっと簡単に！
例えば、ブログ記事なんかで、ちょっとした区切り線を入れたい時ってあるよね。
// 以前の書き方（ちょっと手間がかかる）
let separator = “”;
for (let i = 0; i < 30; i++) {
separator += "-";
}
console.log(separator);
// repeat()メソッドを使った書き方（スッキリ！）
const separatorShort = "-".repeat(30); // "-"を30回繰り返す
console.log(separatorShort);
// 出力: ------------------------------
どう？ 格段にコードが短くなったでしょ？
「この記号を〇回繰り返したい！」って思った時に、すぐに使えるんだ。
例2：ダミーデータを作る時にも！
開発中に、ちょっとしたテストデータが欲しい時ってあるよね。例えば、長い文字列をダミーとして表示したい場合。
const dummyWord = “テスト “;
const longDummyText = dummyWord.repeat(10); // “テスト “を10回繰り返す
console.log(longDummyText);
// 出力: テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト
こんな風に、繰り返し使いたい文字列を簡単に生成できるのは、本当に助かるんだ。
ちょっと待って！ ここで注意！ 負の数やInfinityは…？
さて、ここまで`repeat()`メソッドの便利なところを見てきたけど、ここからは「え、そんなことになっちゃうの？！」っていう、ちょっとした落とし穴についてもお話ししておくね。
`repeat()`メソッドは、カッコの中に「何回繰り返すか」を数値で指定するんだけど、もし、そこで「変な数」を指定したらどうなるんだろう？
1. 負の数を指定した場合（マイナスの数）
例えば、「-1回繰り返して！」なんて言われたら、どうする？
普通に考えたら、「え、それは無理…」ってなるよね。
JavaScriptも同じ！
const text = “やばい”;
try {
const result = text.repeat(-1); // -1回繰り返そうとする
console.log(result);
} catch (e) {
console.error(“エラーが発生しました！”, e.name);
console.error(“メッセージ:”, e.message);
}
// 出力:
// エラーが発生しました！ RangeError
// メッセージ: Invalid count value
ちゃんとエラー（`RangeError`）が出てくれるんだ。「無効な回数ですよ！」って、優しく（？）教えてくれるわけ。
これは、プログラムが予期しない挙動をするのを防いでくれる、大切な仕組みなんだ。
2. Infinity（無限）を指定した場合
じゃあ、今度は「無限に繰り返して！」って言ったらどうなる？
「無限」なんて、現実ではありえないけど、コンピューターの世界ではどうだろう？
const text = “無限”;
try {
const result = text.repeat(Infinity); // 無限に繰り返そうとする
console.log(result);
} catch (e) {
console.error(“エラーが発生しました！”, e.name);
console.error(“メッセージ:”, e.message);
}
// 出力:
// エラーが発生しました！ RangeError
// メッセージ: Invalid count value
これも、残念ながら（？）エラーになっちゃうんだ。
「無限に繰り返すなんて、メモリが爆発しちゃうよ！」って、コンピューターが悲鳴をあげないように、ちゃんと制限があるんだね。
3. 0を指定した場合
では、もし「0回繰り返して！」って言ったら？
これは、ある意味「何も繰り返さない」ってことだから、どうなるかな？
const text = “ゼロ”;
const result = text.repeat(0); // 0回繰り返す
console.log(result);
// 出力: （何も表示されない、空の文字列）
ちゃんと「空の文字列」が返ってくる。これは、期待通りの動きだね。
まとめ：`repeat()`メソッドで使える「数」
`repeat()`メソッドで使える「繰り返し回数」は、
- 0以上の整数 (0, 1, 2, 3, …)
これだけなんだ。
負の数や、無限大（`Infinity`）は、エラーになっちゃうから気をつけてね！
テンプレートリテラルとの組み合わせで、もっと強力に！
ここで、もう一つJavaScriptの便利な機能、「テンプレートリテラル」と`repeat()`メソッドを組み合わせると、さらに表現力が豊かになることを紹介したい。
テンプレートリテラルっていうのは、バッククォート（` “ `）で囲まれた文字列のこと。これを使うと、文字列の中に変数や式を直接埋め込めるんだ。
const userName = “太郎”;
const welcomeMessage = `こんにちは、${userName}さん！`;
console.log(welcomeMessage);
// 出力: こんにちは、太郎さん！
さて、このテンプレートリテラルと`repeat()`メソッドを組み合わせるとどうなるか？
例えば、「〇〇さん、お誕生日おめでとう！〇〇さん、お誕生日おめでとう！…」みたいなメッセージを、動的に作りたい時。
const userName = “花子”;
const birthdayMessageBase = `${userName}さん、お誕生日おめでとう！`;
const fullBirthdayMessage = birthdayMessageBase.repeat(3); // ベースメッセージを3回繰り返す
console.log(fullBirthdayMessage);
// 出力: 花子さん、お誕生日おめでとう！花子さん、お誕生日おめでとう！花子さん、お誕生日おめでとう！
こんな風に、変数`userName`が入ったメッセージを、`repeat()`で簡単に繰り返し生成できる。
これは、例えば、リストの項目をたくさん表示したい時とか、色々な応用が考えられるね。
さあ、君も`repeat()`メソッドの魔法使いになろう！
どうだったかな？
JavaScriptの`repeat()`メソッド、とってもシンプルだけど、知っているとコードがぐっと書きやすくなる、素敵なメソッドだろ？
- 文字列を簡単に繰り返したい時
- コードを短く、スッキリさせたい時
- 繰り返し処理をスマートに書きたい時
そんな時は、ぜひ`repeat()`メソッドを思い出してみてほしい。
ただし、繰り返し回数には「0以上の整数」を指定するのを忘れずにね！ 負の数や`Infinity`は、エラーになっちゃうから、そこだけは注意しておこう。
この`repeat()`メソッドを、君のJavaScriptの「お道具箱」に加えて、もっともっと楽しいWeb制作・開発の世界を広げていってほしい。
また、次回の「なるほど！」なJavaScript講座でお会いしましょう！
それじゃあ、またね！
コメント