こんにちは！フロントエンドの現場を渡り歩いてきたチーフアーキテクトの私です。
JavaScriptの勉強、毎日お疲れ様です。「なんだか覚えることが多くて、頭がパンクしそう…」なんて、途方に暮れていませんか？ 大丈夫ですよ、みんな最初は同じ道を通っていますからね。
さて、今回は文字列操作の仲間たちの中から、ちょっとユニークで、知っていると「おっ」と周りに自慢できる（そして実務でも地味に助かる）隠れた名優、`String.prototype.repeat()` にスポットを当ててみましょう。
難しい専門用語はなるべく抜きにして、身近な例えからゆっくり紐解いていきますね。
—
1. `repeat()` ってどんなメソッド？（お馴染みの例えで考えてみる）
いきなりコードを書く前に、まずはイメージを膨らませましょう。
皆さんは、子供の頃や工作の時間に「スタンプ」を押したことはありませんか？
例えば、お気に入りの星のスタンプを、画用紙に「ペタッ、ペタッ、ペタッ」と、同じ模様をきれいに連続して押していくあの感覚です。
あるいは、スーパーのレジ待ちのときに見かける、バーコードの「ーーー」という連続した線。
JavaScriptの世界において、「同じ文字や言葉を指定した回数だけ、きれいなスタンプのように連続して並べた新しい文字列を作りたい！」 というときに使うのが、この `repeat()` メソッドなんです。
英語の “repeat（繰り返す）” という単語の通り、「これ、◯回コピーして並べておいて！」とJavaScriptにお願いするための専用の呪文だと考えてください。
—
2. 基本の使い方をのぞいてみよう
百聞は一見に如かず。実際にコードを見てみましょう。
使い方はとってもシンプルで、「繰り返したい文字列.repeat(回数)」 と書くだけです。
// 「ハロー」という言葉を、元気に3回繰り返してみましょう！
const greeting = “ハロー！”;
// repeatメソッドの出番です
const shoutedGreeting = greeting.repeat(3);
console.log(shoutedGreeting);
// 出力結果： ハロー！ハロー！ハロー！
たったこれだけです！
`greeting` という変数の中身（文字列）が壊れるわけではなく、3回繰り返された新しい文字列がちゃんと新しく生み出されて、`shoutedGreeting` に代入される仕組みになっています。ここが地味に安全で優しいポイントですね。
—
3. 実務や日常のちょっとした場面でどう使うの？
「でもさ、文字を繰り返すだけでしょ？ 実際のWeb制作でいつ使うの？」って思いませんでしたか？
実はこれが、初心者さんの強い味方になってくれるんです。いくつか現場っぽい例をご紹介しますね。
① パスワードの伏字（セキュリティの隠し表示）を作る時
よくログイン画面で、パスワードを入力すると `••••` のように黒丸が並びますよね。あれを動的に作りたいときにも使えます。
// パスワードの文字数に合わせて、黒丸（•）を並べる例
const passwordLength = 6;
const maskedPassword = “•”.repeat(passwordLength);
console.log(maskedPassword);
// 出力結果： •••••• （6個の黒丸が並びます！）
文字数をカウントして `repeat()` に渡すだけで、きれいな伏字が完成しちゃいます。
② ちょっとした区切り線（UIの装飾）をサクッと作りたい時
Webサイトのデザインで、テキストとテキストの間に「—」や「===」といった区切り線をきれいに入れたいときありませんか？
// 画面幅に合わせたようなきれいな区切り線を作る
const divider = “—”.repeat(20);
console.log(divider);
// 出力結果： ———————————————————— （ダッシュが20個綺麗に並びます）
手動でキーボードを連打して「ーーーーーーーーーーーー」と打つと、何個打ったか分からなくなってイライラしますが、これなら一瞬で正確な長さの線が作れます。美しい！
—
4. つまずきやすいポイントと「知っておくと安心」な注意点
さて、ここからがチーフアーキテクトとしてのワンポイントアドバイス。`repeat()` を使う上で、初心者が「あれ？」とハマりがちな罠をいくつかシェアしておきますね。
罠その1：回数に「小文字の小数」や「マイナス」を入れちゃった！
「じゃあ、2.5回繰り返して！」とか、「マイナス3回で！」なんて意地悪な（あるいはうっかりな）数値を渡すとどうなるでしょうか？
- 小数を渡した場合（例：`”A”.repeat(2.7)`）：
JavaScriptの優しさ（お節介？）で、小数点以下は切り捨てられます。この場合は `2` 回になります。
- マイナスを渡した場合（例：`”A”.repeat(-1)`）：
「そんなマイナス回数なんて繰り返せないよ！」と、JavaScriptが怒ってエラー（RangeError）を投げてきます。
> 【対策】
> 回数には必ず「0以上の整数（0, 1, 2, 3…）」を渡してあげると覚えておけばバッチリです！
罠その2：回数に「0」を渡すとどうなる？
もし `”こんにちは”.repeat(0);` と書いたらどうなると思いますか？
エラーになる？ それとも元の文字が出る？
正解は……「空っぽの文字列（ `””` ）」 が返ってきます。
何も繰り返さない、つまり「ゼロ回」なので、何もない状態になるのが正解です。これも頭の片隅に置いておくと、いざという時に「あ、これは仕様通りだな」と慌てずに済みますよ。
—
まとめ：怖がらずに、まずはエディタで遊んでみよう！
いかがでしたでしょうか？
`String.prototype.repeat()` は、派手な大技ではないものの、知っているとコードをスマートに書いてくれる「縁の下の力持ち」的な存在です。
JavaScriptの勉強は、最初は暗号のように見えて心が折れそうになることもありますが、一つひとつのメソッドが持つ「意図」や「例え」を理解していくと、まるでレゴブロックを組み立てるように楽しくなってきます。
今日学んだ `repeat()` も、ぜひご自身のブラウザのコンソールや、エディタを開いて色んな文字を繰り返して遊んでみてくださいね。
「あ、こう書くとこう動くんだ！」という小さな感動の積み重ねが、あなたを確実に素晴らしいエンジニアへ導いてくれます。
それでは、また次の記事でお会いしましょう！コーディングを楽しんで！
コメント