WEBVTT

1
00:00:00.000 --> 00:00:00.982
こんにちは。

2
00:00:00.982 --> 00:00:04.749
今回はジャバスクリプトのリピートを紹介します。

3
00:00:04.749 --> 00:00:10.807
これは、文字列を指定した回数だけつないだ、新しい文字列を返すメソッドです。

4
00:00:10.807 --> 00:00:17.521
たとえば、シャープという記号を三回繰り返せば、記号が三つ並んだ文字列が得られます。

5
00:00:17.521 --> 00:00:20.304
元の文字列自体は書き換わりません。

6
00:00:20.304 --> 00:00:28.655
ログに区切り線を入れたいときや、件数を記号の長さで比べたいときに、短く分かりやすく書けるのが特長です。

7
00:00:28.655 --> 00:00:33.895
この動画では、基本の書き方から、件数をテキスト棒グラフに変える実例、回数の検証や大きすぎる文字列への注意点まで、

8
00:00:33.895 --> 00:00:39.135
順に解説します。

9
00:00:39.135 --> 00:00:46.012
ループを自分で書かなくても、一行で意図が伝わる点も、初心者にとって嬉しいところです。

10
00:00:46.012 --> 00:00:47.323
まず動作環境です。

11
00:00:47.323 --> 00:00:52.787
リピートは、二千十五年九月ごろから主要なブラウザーで広く使えるようになった機能で、

12
00:00:52.787 --> 00:00:58.250
現在のクローム、エッジ、ファイアフォックス、サファリで利用できます。

13
00:00:58.250 --> 00:01:05.098
ブラウザーで試すときは、開発者ツールを開き、コンソールにコードを貼り付けるだけで実行できます。

14
00:01:05.098 --> 00:01:12.237
一方、ノード・ジェイエスでは、コードをファイルに保存し、ターミナルからノードコマンドで実行します。

15
00:01:12.237 --> 00:01:18.356
記事では二十二系以降を対象としていますが、追加のライブラリーや特別な設定は不要です。

16
00:01:18.356 --> 00:01:23.747
古いブラウザーを対象にする場合は、事前に使えるかどうかを確認してください。

17
00:01:23.747 --> 00:01:29.720
どちらで試しても同じコードで同じ結果が得られるので、環境を変えての確認も簡単です。

18
00:01:29.720 --> 00:01:31.756
基本の書き方を見ましょう。

19
00:01:31.756 --> 00:01:37.864
繰り返したい文字列のあとにドット、リピートと書き、かっこの中に回数を渡します。

20
00:01:37.864 --> 00:01:41.623
回数は、通常はゼロ以上の有限な整数を指定します。

21
00:01:41.623 --> 00:01:45.068
戻り値は、つながった後の文字列そのものです。

22
00:01:45.068 --> 00:01:48.670
配列でも、繰り返し用の特別な値でもありません。

23
00:01:48.670 --> 00:01:57.284
元の文字列は変わらないので、結果を使いたい場合は、変数に入れるか、そのまま表示するなどして受け取ってください。

24
00:01:57.284 --> 00:02:03.079
また、添字や範囲を指定するメソッドではないので、引数は回数ひとつだけです。

25
00:02:03.079 --> 00:02:07.777
このシンプルさが、リピートの分かりやすさにつながっています。

26
00:02:07.777 --> 00:02:13.572
回数には変数に入れた数値も渡せるので、実行時に回数を変えることもできます。

27
00:02:13.572 --> 00:02:15.869
具体例で動きを確かめましょう。

28
00:02:15.869 --> 00:02:20.310
エーとビー、二文字の文字列を三回繰り返すと、エービー、エービー、エービーと全体が三つ並び、

29
00:02:20.310 --> 00:02:24.752
六文字の文字列になります。

30
00:02:24.752 --> 00:02:31.490
一文字ずつばらばらになるのではなく、元の並びがそのまま繰り返される点に注目してください。

31
00:02:31.490 --> 00:02:34.859
回数にゼロを指定すると、結果は空文字列です。

32
00:02:34.859 --> 00:02:39.147
画面の例では、角括弧の中に何も残らないことが分かります。

33
00:02:39.147 --> 00:02:43.282
そして、実行したあとも元の文字列はエービーのままです。

34
00:02:43.282 --> 00:02:49.408
まずはこの基本パターンを、手元のコンソールで一度打ち込んで確かめてみてください。

35
00:02:49.408 --> 00:02:55.840
繰り返す単位が二文字以上でも考え方は同じで、単位全体がひとまとまりとして扱われます。

36
00:02:55.840 --> 00:02:59.534
回数に小数を渡した場合の動きも知っておきましょう。

37
00:02:59.534 --> 00:03:05.296
たとえば二点八を渡すと、小数部分は切り捨てられ、二回繰り返した結果が返ります。

38
00:03:05.296 --> 00:03:11.650
ただし、件数を扱うプログラムで小数を黙って受け入れると、入力ミスを見逃してしまいます。

39
00:03:11.650 --> 00:03:16.969
実務では、後で紹介するように整数だけを許可する検証を入れる方が安全です。

40
00:03:16.969 --> 00:03:21.993
もうひとつの注意点は、繰り返しの間に区切りが自動で入らないことです。

41
00:03:21.993 --> 00:03:27.608
空白や改行で区切りたい場合は、繰り返す文字列そのものに空白を含めてください。

42
00:03:27.608 --> 00:03:32.336
画面の最後の例では、末尾に空白を含めた文字列を繰り返しています。

43
00:03:32.336 --> 00:03:39.428
区切りを入れるかどうかで見た目が大きく変わるので、用途に合わせて繰り返す単位を設計してください。

44
00:03:39.428 --> 00:03:41.369
ここからは実践例です。

45
00:03:41.369 --> 00:03:48.251
問い合わせの件数を、コンソールにテキスト棒グラフとして表示する関数を作ります。

46
00:03:48.251 --> 00:03:54.075
一件をシャープ記号ひとつで表し、記号は最大で十個までに制限します。

47
00:03:54.075 --> 00:04:02.546
関数の前半では、ラベルが文字列かどうか、件数がゼロ以上の安全な整数かどうかを先に検査しています。

48
00:04:02.546 --> 00:04:08.898
そのあと、マス・ミンで件数と十の小さい方を取り、リピートで棒を作ります。

49
00:04:08.898 --> 00:04:15.428
件数が十を超えた場合はプラス記号を添え、最後に実際の件数も数字で付けます。

50
00:04:15.428 --> 00:04:22.310
この関数は表示用の文字列を返すだけなので、出力先は呼び出し側で自由に選べます。

51
00:04:22.310 --> 00:04:29.016
十という上限は読みやすさのための設計値であり、用途に応じて変更できる値です。

52
00:04:29.016 --> 00:04:31.214
実行結果を読みましょう。

53
00:04:31.214 --> 00:04:37.074
受付が三件なら記号は三つ、確認待ちが二件なら記号は二つ並びます。

54
00:04:37.074 --> 00:04:42.568
対応中がゼロ件なら、棒は空になり、角括弧だけが表示されます。

55
00:04:42.568 --> 00:04:45.499
注目したいのは完了の十二件です。

56
00:04:45.499 --> 00:04:54.289
棒自体は十個で止まりますが、プラス記号と数字の十二件が付くので、実際の件数を誤解せずに済みます。

57
00:04:54.289 --> 00:04:59.692
学習の確認として、件数をゼロ、十、十一に変えてみると、空表示、上限ちょうど、

58
00:04:59.692 --> 00:05:05.095
上限超過という三つの境界を確かめられます。

59
00:05:05.095 --> 00:05:13.336
記事の実例では不正な行があっても、行ごとに例外を受け止めて、後ろの行の処理を続けています。

60
00:05:13.336 --> 00:05:21.028
このように境界のケースを先に確かめておくと、実データでも安心して使うことができます。

61
00:05:21.028 --> 00:05:23.582
なぜ回数を制限するのでしょうか。

62
00:05:23.582 --> 00:05:31.086
件数が何百、何千と大きくなっても、棒が際限なく長くなると、ログやレポートが読みにくくなります。

63
00:05:31.086 --> 00:05:35.876
上限を設ければ、元の件数が大きくても棒は短いままに保てます。

64
00:05:35.876 --> 00:05:37.632
ただし順番が大切です。

65
00:05:37.632 --> 00:05:41.304
入力の検証は、上限を適用するより先に行います。

66
00:05:41.304 --> 00:05:47.690
負の数や小数を先に丸めてしまうと、不正な件数を正常な表示に見せてしまうからです。

67
00:05:47.690 --> 00:05:54.396
また、棒を短くするだけでは件数を誤認しやすいので、プラス記号と元の数値を併記します。

68
00:05:54.396 --> 00:06:00.144
グラフは傾向をつかむ補助として使い、正確な量は数字で伝えるのが基本です。

69
00:06:00.144 --> 00:06:07.328
上限の値に固定の正解はなく、表示先の幅や読み手に合わせて決める設計判断だと考えてください。

70
00:06:07.328 --> 00:06:09.123
失敗例を確認しましょう。

71
00:06:09.123 --> 00:06:13.012
回数にマイナス一を渡すと、レンジエラーが発生します。

72
00:06:13.012 --> 00:06:16.452
無限大を渡した場合も、同じくレンジエラーです。

73
00:06:16.452 --> 00:06:21.985
画面の例では、例外の詳しい文言ではなく、エラーの名前だけを表示しています。

74
00:06:21.985 --> 00:06:26.024
エラーの文言は実行環境ごとに異なる場合があるためです。

75
00:06:26.024 --> 00:06:33.951
一覧レポートのように一部の失敗を許容する場面では、行ごとにトライ・キャッチで受け止める設計が向いています。

76
00:06:33.951 --> 00:06:38.213
逆に、全件が正しくなければ成果物を作れない業務では、例外を呼び出し側へ伝えて、

77
00:06:38.213 --> 00:06:42.476
全体を中止する設計を選んでください。

78
00:06:42.476 --> 00:06:49.356
例外はその場で同期的に発生するので、発生する前提で受け止め方をあらかじめ決めておきましょう。

79
00:06:49.356 --> 00:06:52.848
有限な回数でも、巨大な文字列は作れません。

80
00:06:52.848 --> 00:06:59.500
生成できる文字列の最大サイズは実行環境に依存し、上限に達すると例外が発生します。

81
00:06:59.500 --> 00:07:05.653
上限の手前であっても、大量の文字列を作ればメモリーや処理時間を消費します。

82
00:07:05.653 --> 00:07:11.473
例外を受け止めるだけで済ませず、用途に合う上限を事前に設けてください。

83
00:07:11.473 --> 00:07:18.457
繰り返す単位を利用者が入力できる設計では、回数だけでなく単位の長さも制限が必要です。

84
00:07:18.457 --> 00:07:25.442
また、日本語や記号を繰り返しても、画面上の幅が半角英数字と同じになるとは限りません。

85
00:07:25.442 --> 00:07:32.260
リピートは同期処理で、アウェイトを付けても生成が自動で分割されることはありません。

86
00:07:32.260 --> 00:07:40.408
見た目を精密にそろえたい画面では、文字の個数だけに頼らず、表示側のレイアウト設計も必要になります。

87
00:07:40.408 --> 00:07:42.730
最後に活用場面とまとめです。

88
00:07:42.730 --> 00:07:48.536
リピートは、短い固定パターンを必要な数だけ生成する用途に向いています。

89
00:07:48.536 --> 00:07:53.762
集計結果への上限付き棒グラフ、テキストレポートの区切り線、階層の深さに応じた空白、

90
00:07:53.762 --> 00:07:58.987
長さを制限したテストデータなどが代表例です。

91
00:07:58.987 --> 00:08:03.964
使うときの合言葉は、検証してから、上限の中で繰り返す、です。

92
00:08:03.964 --> 00:08:11.263
回数が正しいかを先に確かめ、生成する長さに上限を設け、正確な量は数字でも伝えてください。

93
00:08:11.263 --> 00:08:18.728
まずは小さな文字列で、ゼロ回、上限ちょうど、上限超過の三パターンを試す練習がおすすめです。

94
00:08:18.728 --> 00:08:25.695
小さなメソッドですが、検証と上限の考え方は、他の文字列処理にもそのまま応用できます。

95
00:08:25.695 --> 00:08:27.188
お疲れさまでした。