VIDEO LESSON

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

再生時間 8:27動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回はジャバスクリプトのリピートを紹介します。
0:04これは、文字列を指定した回数だけつないだ、新しい文字列を返すメソッドです。
0:10たとえば、シャープという記号を三回繰り返せば、記号が三つ並んだ文字列が得られます。
0:17元の文字列自体は書き換わりません。
0:20ログに区切り線を入れたいときや、件数を記号の長さで比べたいときに、短く分かりやすく書けるのが特長です。
0:28この動画では、基本の書き方から、件数をテキスト棒グラフに変える実例、回数の検証や大きすぎる文字列への注意点まで、
0:33順に解説します。
0:39ループを自分で書かなくても、一行で意図が伝わる点も、初心者にとって嬉しいところです。
0:46まず動作環境です。
0:47リピートは、二千十五年九月ごろから主要なブラウザーで広く使えるようになった機能で、
0:52現在のクローム、エッジ、ファイアフォックス、サファリで利用できます。
0:58ブラウザーで試すときは、開発者ツールを開き、コンソールにコードを貼り付けるだけで実行できます。
1:05一方、ノード・ジェイエスでは、コードをファイルに保存し、ターミナルからノードコマンドで実行します。
1:12記事では二十二系以降を対象としていますが、追加のライブラリーや特別な設定は不要です。
1:18古いブラウザーを対象にする場合は、事前に使えるかどうかを確認してください。
1:23どちらで試しても同じコードで同じ結果が得られるので、環境を変えての確認も簡単です。
1:29基本の書き方を見ましょう。
1:31繰り返したい文字列のあとにドット、リピートと書き、かっこの中に回数を渡します。
1:37回数は、通常はゼロ以上の有限な整数を指定します。
1:41戻り値は、つながった後の文字列そのものです。
1:45配列でも、繰り返し用の特別な値でもありません。
1:48元の文字列は変わらないので、結果を使いたい場合は、変数に入れるか、そのまま表示するなどして受け取ってください。
1:57また、添字や範囲を指定するメソッドではないので、引数は回数ひとつだけです。
2:03このシンプルさが、リピートの分かりやすさにつながっています。
2:07回数には変数に入れた数値も渡せるので、実行時に回数を変えることもできます。
2:13具体例で動きを確かめましょう。
2:15エーとビー、二文字の文字列を三回繰り返すと、エービー、エービー、エービーと全体が三つ並び、
2:20六文字の文字列になります。
2:24一文字ずつばらばらになるのではなく、元の並びがそのまま繰り返される点に注目してください。
2:31回数にゼロを指定すると、結果は空文字列です。
2:34画面の例では、角括弧の中に何も残らないことが分かります。
2:39そして、実行したあとも元の文字列はエービーのままです。
2:43まずはこの基本パターンを、手元のコンソールで一度打ち込んで確かめてみてください。
2:49繰り返す単位が二文字以上でも考え方は同じで、単位全体がひとまとまりとして扱われます。
2:55回数に小数を渡した場合の動きも知っておきましょう。
2:59たとえば二点八を渡すと、小数部分は切り捨てられ、二回繰り返した結果が返ります。
3:05ただし、件数を扱うプログラムで小数を黙って受け入れると、入力ミスを見逃してしまいます。
3:11実務では、後で紹介するように整数だけを許可する検証を入れる方が安全です。
3:16もうひとつの注意点は、繰り返しの間に区切りが自動で入らないことです。
3:21空白や改行で区切りたい場合は、繰り返す文字列そのものに空白を含めてください。
3:27画面の最後の例では、末尾に空白を含めた文字列を繰り返しています。
3:32区切りを入れるかどうかで見た目が大きく変わるので、用途に合わせて繰り返す単位を設計してください。
3:39ここからは実践例です。
3:41問い合わせの件数を、コンソールにテキスト棒グラフとして表示する関数を作ります。
3:48一件をシャープ記号ひとつで表し、記号は最大で十個までに制限します。
3:54関数の前半では、ラベルが文字列かどうか、件数がゼロ以上の安全な整数かどうかを先に検査しています。
4:02そのあと、マス・ミンで件数と十の小さい方を取り、リピートで棒を作ります。
4:08件数が十を超えた場合はプラス記号を添え、最後に実際の件数も数字で付けます。
4:15この関数は表示用の文字列を返すだけなので、出力先は呼び出し側で自由に選べます。
4:22十という上限は読みやすさのための設計値であり、用途に応じて変更できる値です。
4:29実行結果を読みましょう。
4:31受付が三件なら記号は三つ、確認待ちが二件なら記号は二つ並びます。
4:37対応中がゼロ件なら、棒は空になり、角括弧だけが表示されます。
4:42注目したいのは完了の十二件です。
4:45棒自体は十個で止まりますが、プラス記号と数字の十二件が付くので、実際の件数を誤解せずに済みます。
4:54学習の確認として、件数をゼロ、十、十一に変えてみると、空表示、上限ちょうど、
4:59上限超過という三つの境界を確かめられます。
5:05記事の実例では不正な行があっても、行ごとに例外を受け止めて、後ろの行の処理を続けています。
5:13このように境界のケースを先に確かめておくと、実データでも安心して使うことができます。
5:21なぜ回数を制限するのでしょうか。
5:23件数が何百、何千と大きくなっても、棒が際限なく長くなると、ログやレポートが読みにくくなります。
5:31上限を設ければ、元の件数が大きくても棒は短いままに保てます。
5:35ただし順番が大切です。
5:37入力の検証は、上限を適用するより先に行います。
5:41負の数や小数を先に丸めてしまうと、不正な件数を正常な表示に見せてしまうからです。
5:47また、棒を短くするだけでは件数を誤認しやすいので、プラス記号と元の数値を併記します。
5:54グラフは傾向をつかむ補助として使い、正確な量は数字で伝えるのが基本です。
6:00上限の値に固定の正解はなく、表示先の幅や読み手に合わせて決める設計判断だと考えてください。
6:07失敗例を確認しましょう。
6:09回数にマイナス一を渡すと、レンジエラーが発生します。
6:13無限大を渡した場合も、同じくレンジエラーです。
6:16画面の例では、例外の詳しい文言ではなく、エラーの名前だけを表示しています。
6:21エラーの文言は実行環境ごとに異なる場合があるためです。
6:26一覧レポートのように一部の失敗を許容する場面では、行ごとにトライ・キャッチで受け止める設計が向いています。
6:33逆に、全件が正しくなければ成果物を作れない業務では、例外を呼び出し側へ伝えて、
6:38全体を中止する設計を選んでください。
6:42例外はその場で同期的に発生するので、発生する前提で受け止め方をあらかじめ決めておきましょう。
6:49有限な回数でも、巨大な文字列は作れません。
6:52生成できる文字列の最大サイズは実行環境に依存し、上限に達すると例外が発生します。
6:59上限の手前であっても、大量の文字列を作ればメモリーや処理時間を消費します。
7:05例外を受け止めるだけで済ませず、用途に合う上限を事前に設けてください。
7:11繰り返す単位を利用者が入力できる設計では、回数だけでなく単位の長さも制限が必要です。
7:18また、日本語や記号を繰り返しても、画面上の幅が半角英数字と同じになるとは限りません。
7:25リピートは同期処理で、アウェイトを付けても生成が自動で分割されることはありません。
7:32見た目を精密にそろえたい画面では、文字の個数だけに頼らず、表示側のレイアウト設計も必要になります。
7:40最後に活用場面とまとめです。
7:42リピートは、短い固定パターンを必要な数だけ生成する用途に向いています。
7:48集計結果への上限付き棒グラフ、テキストレポートの区切り線、階層の深さに応じた空白、
7:53長さを制限したテストデータなどが代表例です。
7:58使うときの合言葉は、検証してから、上限の中で繰り返す、です。
8:03回数が正しいかを先に確かめ、生成する長さに上限を設け、正確な量は数字でも伝えてください。
8:11まずは小さな文字列で、ゼロ回、上限ちょうど、上限超過の三パターンを試す練習がおすすめです。
8:18小さなメソッドですが、検証と上限の考え方は、他の文字列処理にもそのまま応用できます。
8:25お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

String.prototype.repeat()で文字列を指定回数つなぐ方法を解説。引数・戻り値、ブラウザーとNode.jsの実行手順、棒グラフの作成例、回数の検証と文字列サイズの制約を学べます。

解説記事・サンプルコードを読む：JavaScriptのrepeat()：文字列を繰り返してテキスト棒グラフを作る →