WEBVTT

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

2
00:00:00.931 --> 00:00:03.567
今回はパッドスタートを紹介します。

3
00:00:03.567 --> 00:00:09.461
これは、文字列の先頭を別の文字で埋めて、指定した長さにそろえるメソッドです。

4
00:00:09.461 --> 00:00:15.665
たとえば数字の七を、ゼロゼロ七のように三桁表示にしたい、そんな場面で活躍します。

5
00:00:15.665 --> 00:00:20.370
この動画では、書き方と引数と戻り値、記事の基本例である連番のゼロ埋めと、

6
00:00:20.370 --> 00:00:25.075
元の文字列が長い場合の境界例、埋め文字の繰り返され方、符号付き数値での落とし穴まで、

7
00:00:25.075 --> 00:00:29.780
実行結果と一緒に学びます。

8
00:00:29.780 --> 00:00:39.086
前回のオブジェクト・キーズでキー一覧を取り出す操作を学んだ流れで、今回は文字列の見た目を整える基本操作を押さえましょう。

9
00:00:39.086 --> 00:00:44.980
ゼロ埋めという言葉を聞いたことがある方は、まさにその操作だと考えてください。

10
00:00:44.980 --> 00:00:46.848
まず動作環境を確認します。

11
00:00:46.848 --> 00:00:52.308
パッドスタートはイーエス二千十七で加わった、比較的新しい文字列メソッドです。

12
00:00:52.308 --> 00:00:56.260
クロームでは五十七以降、エッジでは十五以降、ファイアーフォックスでは四十八以降、

13
00:00:56.260 --> 00:01:00.211
サファリでは十以降で使えます。

14
00:01:00.211 --> 00:01:04.378
ノード・ジェイエスでは八・ゼロ・ゼロ以降に対応しています。

15
00:01:04.378 --> 00:01:08.545
記事の互換性情報はエムディーエヌのデータに基づく目安です。

16
00:01:08.545 --> 00:01:12.353
現在の主要環境ではほぼ心配ありませんが、古いブラウザーを対象にする場合は、

17
00:01:12.353 --> 00:01:16.161
先に対応状況を確認してください。

18
00:01:16.161 --> 00:01:22.196
追加の読み込みは不要で、空文字列にも関数として備わっていることを実機で確認済みです。

19
00:01:22.196 --> 00:01:27.512
迷ったときは、実際に使うブラウザーで小さなコードを試してみるのが確実です。

20
00:01:27.512 --> 00:01:29.372
書き方を確認します。

21
00:01:29.372 --> 00:01:37.928
対象の文字列に続けてパッドスタートと書き、カッコの中に目標の長さと、埋める文字列を渡します。

22
00:01:37.928 --> 00:01:43.507
第一引数がそろえたい長さ、第二引数が不足分を埋める文字です。

23
00:01:43.507 --> 00:01:47.413
第二引数を省略すると、空白で埋められます。

24
00:01:47.413 --> 00:01:53.923
戻り値は、先頭を埋めた新しい文字列で、元の文字列自体は変更されません。

25
00:01:53.923 --> 00:02:00.433
スライドの例では、四十二を長さ五にゼロ埋めしてゼロゼロゼロ四二になること、

26
00:02:00.433 --> 00:02:06.942
そして五を長さ三にすると空白が二つ付くことを、実機で確認しました。

27
00:02:06.942 --> 00:02:11.220
長さは文字数で数える点も覚えておいてください。

28
00:02:11.220 --> 00:02:18.660
目標の長さに現在の長さが届いていない場合、その差の分だけ文字が先頭に足されます。

29
00:02:18.660 --> 00:02:20.486
記事の基本例を見ます。

30
00:02:20.486 --> 00:02:27.792
数値の七をまずストリングで文字列に変換し、長さ三になるまでゼロで先頭を埋めるコードです。

31
00:02:27.792 --> 00:02:35.263
実行するとゼロゼロ七と表示され、記事の期待出力と一致し、ノードの実機結果とも一致しました。

32
00:02:35.263 --> 00:02:45.391
記事が勧めるように、保存しておく値は数値のまま持ち、画面に表示する時点で文字列にして幅をそろえる設計が扱いやすくなります。

33
00:02:45.391 --> 00:02:50.040
会員番号や伝票番号、ファイル名の連番など、桁数をそろえると並び順や見た目が安定する場面で、

34
00:02:50.040 --> 00:02:54.689
そのまま使える形です。

35
00:02:54.689 --> 00:03:00.832
三桁にそろえることで、書類や画面の中で番号の見た目がきれいに統一されます。

36
00:03:00.832 --> 00:03:06.216
実践的な使い方として、番号の一覧をまとめて整える例を見ます。

37
00:03:06.216 --> 00:03:15.368
一、七、十二という数値の配列をマップで処理し、それぞれ文字列に変換してから長さ三にゼロ埋めしています。

38
00:03:15.368 --> 00:03:21.469
結果はゼロゼロ一、ゼロゼロ七、ゼロ一二となり、実機とも一致しました。

39
00:03:21.469 --> 00:03:30.083
桁がそろうと、文字列として並べ替えても数字の順序と一致しやすくなり、一覧表示もきれいに整います。

40
00:03:30.083 --> 00:03:39.594
時刻表示で九時五分をゼロ九、ゼロ五のように整える場合も、同じ考え方で各部分にパッドスタートを適用できます。

41
00:03:39.594 --> 00:03:46.772
この形は、在庫番号や社員番号など、業務で実際に使う識別子の表示にも応用できます。

42
00:03:46.772 --> 00:03:49.762
埋め文字の細かい動きを確認します。

43
00:03:49.762 --> 00:03:57.500
エービーシーを長さ六にしたい場合、不足は三文字なので埋め文字の一二三がそのまま入ります。

44
00:03:57.500 --> 00:04:02.424
長さ七なら不足は四文字で、埋め文字は繰り返されたうえで必要な四文字だけが使われ、

45
00:04:02.424 --> 00:04:07.348
一二三一エービーシーになります。

46
00:04:07.348 --> 00:04:09.810
どちらも実機と一致しました。

47
00:04:09.810 --> 00:04:17.372
一方、埋め文字に空文字列を渡すと、何も足すことができず、元の文字列がそのまま返ります。

48
00:04:17.372 --> 00:04:26.693
区切り模様のように複数文字で埋めたい場合は、この繰り返しと切り捨ての仕組みを意識して長さを決めてください。

49
00:04:26.693 --> 00:04:33.552
複数文字で埋める際は、この切り捨ての動きまで含めて結果を予測してみてください。

50
00:04:33.552 --> 00:04:35.884
記事の境界条件の例を見ます。

51
00:04:35.884 --> 00:04:41.382
四桁の文字列一二三四に対して、目標の長さを三と指定するコードです。

52
00:04:41.382 --> 00:04:47.545
すでに目標を超えているため、ゼロは追加されず、一二三四がそのまま返ります。

53
00:04:47.545 --> 00:04:51.210
実行結果は記事の期待出力とも一致しています。

54
00:04:51.210 --> 00:04:59.540
つまりパッドスタートは、短い文字列を伸ばすことはできても、長い文字列を短く切り詰めることはしません。

55
00:04:59.540 --> 00:05:05.453
最大桁数を超えたデータが混ざっても情報は失われませんが、表示幅がそろわない可能性は残るため、

56
00:05:05.453 --> 00:05:11.367
入力側の桁数チェックと組み合わせるとより安全です。

57
00:05:11.367 --> 00:05:18.364
伸ばすだけ、という一方向の性質を覚えておくと、このメソッドへの誤解がぐっと減ります。

58
00:05:18.364 --> 00:05:23.767
よく似たメソッドであるパッドエンドとの使い分けを整理します。

59
00:05:23.767 --> 00:05:30.071
パッドスタートが先頭を埋めるのに対して、パッドエンドは末尾を埋めます。

60
00:05:30.071 --> 00:05:34.753
スライドでは、一二を長さ五にした場合で比べています。

61
00:05:34.753 --> 00:05:42.498
スタートではゼロゼロゼロ一二、エンドでは一二ゼロゼロゼロとなり、実機とも一致しました。

62
00:05:42.498 --> 00:05:49.251
数値の桁をそろえて右寄せに見せたいならスタート、項目名の後ろに空白を足して左寄せの列をそろえたいならエンド、

63
00:05:49.251 --> 00:05:56.005
というように、埋める方向で選んでください。

64
00:05:56.005 --> 00:06:01.228
引数の形と、長ければ切り詰めない性質は、どちらも共通です。

65
00:06:01.228 --> 00:06:08.072
どちらも文字列のメソッドなので、数値を渡したいときは先に文字列化が必要です。

66
00:06:08.072 --> 00:06:12.159
注意点として、符号や小数点を含む数値の扱いを見ます。

67
00:06:12.159 --> 00:06:16.246
マイナス七を文字列にして長さ四にゼロ埋めすると、結果はゼロゼロマイナス七となり、

68
00:06:16.246 --> 00:06:20.332
実機でも確認できました。

69
00:06:20.332 --> 00:06:28.820
マイナス記号もただの文字として扱われ、その前側にゼロが付くため、数値の書式としては不自然な見た目になります。

70
00:06:28.820 --> 00:06:34.322
小数の一・五も同様で、ゼロゼロ一・五と文字列として埋められるだけです。

71
00:06:34.322 --> 00:06:39.980
記事も、負数や小数の書式には単純な文字埋めでは不十分だと注意しています。

72
00:06:39.980 --> 00:06:46.111
符号を保ったまま桁をそろえたい場合は、符号と数値部分を分けて処理してください。

73
00:06:46.111 --> 00:06:51.612
見た目を整える前に、値の意味を壊していないかを確認する習慣が大切です。

74
00:06:51.612 --> 00:06:53.252
もう一つの注意点です。

75
00:06:53.252 --> 00:07:00.709
パッドスタートは文字列のメソッドなので、数値に対して直接呼び出すとタイプ・エラーの例外が発生します。

76
00:07:00.709 --> 00:07:05.630
実機でも、関数ではないという内容のエラーになることを確認しました。

77
00:07:05.630 --> 00:07:11.148
数値を扱うときは、先にストリングで文字列へ変換してから呼び出してください。

78
00:07:11.148 --> 00:07:16.516
また、戻り値は新しい文字列であり、元の変数の中身は七のまま変わりません。

79
00:07:16.516 --> 00:07:22.183
埋めた結果を使いたい場合は、戻り値を変数に受け取る書き方を徹底してください。

80
00:07:22.183 --> 00:07:27.253
この不変の性質は、元のデータを壊さないという安心感にもつながります。

81
00:07:27.253 --> 00:07:32.920
戻り値の受け取り忘れはよくあるミスなので、代入までセットで意識してください。

82
00:07:32.920 --> 00:07:33.778
まとめです。

83
00:07:33.778 --> 00:07:38.928
パッドスタートは、文字列の先頭を埋めて指定の長さにそろえるメソッドです。

84
00:07:38.928 --> 00:07:40.788
判断のポイントは三つです。

85
00:07:40.788 --> 00:07:47.082
まず、第一引数に目標の長さ、第二引数に埋め文字を指定し、省略すると空白で埋められること。

86
00:07:47.082 --> 00:07:52.089
次に、埋め文字は不足分に合わせて繰り返され、余りは切り捨てられること。

87
00:07:52.089 --> 00:07:58.670
そして、元の文字列が目標より長い場合は切り詰められず、元の文字列自体も変更されないことです。

88
00:07:58.670 --> 00:08:06.538
まずは記事の基本例と境界例を実行し、目標の長さや埋め文字を一つ変えて、結果を予測してから確かめてみてください。

89
00:08:06.538 --> 00:08:10.973
次回のスターツウィズと合わせると、文字列操作の幅が広がります。

90
00:08:10.973 --> 00:08:12.260
お疲れさまでした。