WEBVTT

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

2
00:00:00.996 --> 00:00:03.488
今回はリプレイスを紹介します。

3
00:00:03.488 --> 00:00:09.466
これは、文字列の中で一致した部分を、別の文字列に置き換えるメソッドです。

4
00:00:09.466 --> 00:00:14.532
前回のリプレイスオールが一致するすべてを置き換えたのに対して、リプレイスは検索文字列の場合、

5
00:00:14.532 --> 00:00:19.597
最初の一致だけを置き換えます。

6
00:00:19.597 --> 00:00:24.469
この動画では、書き方と引数と戻り値、記事の基本例である定型文の名前差し替え、

7
00:00:24.469 --> 00:00:29.340
最初の一個だけが変わる境界例、正規表現のジーフラグで全件置換する方法まで、

8
00:00:29.340 --> 00:00:34.212
実行結果と一緒に学びます。

9
00:00:34.212 --> 00:00:37.866
一個だけ変えたい場面に、ぴったりの道具です。

10
00:00:37.866 --> 00:00:43.180
置換は文字列処理の基本ですので、仕組みをしっかり押さえましょう。

11
00:00:43.180 --> 00:00:44.784
まず動作環境を確認します。

12
00:00:44.784 --> 00:00:49.964
リプレイスはジャバスクリプトの初期からある、とても古くから使える文字列メソッドです。

13
00:00:49.964 --> 00:00:53.110
クロームでは一以降、エッジでは十二以降、ファイアーフォックスでは一以降、

14
00:00:53.110 --> 00:00:56.255
サファリでは一以降で使えます。

15
00:00:56.255 --> 00:00:59.833
ノード・ジェイエスではゼロ・十・ゼロ以降に対応しています。

16
00:00:59.833 --> 00:01:03.410
記事の互換性情報はエムディーエヌのデータに基づく目安ですが、対応範囲が非常に広いため、

17
00:01:03.410 --> 00:01:06.987
通常は環境を心配せず使えます。

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

19
00:01:12.168 --> 00:01:15.992
迷ったときは、実際に使う環境で小さなコードを試すのが確実です。

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

21
00:01:17.794 --> 00:01:26.622
対象の文字列に続けてリプレイスと書き、カッコの中に探したいパターンと、置き換え後の内容を渡します。

22
00:01:26.622 --> 00:01:29.866
第一引数は検索文字列か正規表現です。

23
00:01:29.866 --> 00:01:33.829
第二引数は置換文字列か、置換を行う関数です。

24
00:01:33.829 --> 00:01:39.775
戻り値は、置換後の新しい文字列で、元の文字列自体は変更されません。

25
00:01:39.775 --> 00:01:46.262
スライドの例では、エーが三つ並ぶ文字列の最初の一つだけがビーになること、

26
00:01:46.262 --> 00:01:52.748
ハローが二回出ても最初の一つだけがハイになることを、実機で確認しました。

27
00:01:52.748 --> 00:01:56.892
引数の順番は、探すもの、置き換え後、の順です。

28
00:01:56.892 --> 00:02:04.099
結果を受け取るには、戻り値を変数に入れるか、そのまま表示する形で使ってください。

29
00:02:04.099 --> 00:02:09.324
引数の順番を声に出して確認すると、逆に書くミスを防げます。

30
00:02:09.324 --> 00:02:11.167
記事の基本例を見ます。

31
00:02:11.167 --> 00:02:19.881
ハローの後にプレースホルダーの名前が入った定型文で、ネームという目印を実際の名前に置き換えるコードです。

32
00:02:19.881 --> 00:02:27.254
実行するとハロー葵と表示され、記事の期待出力と一致し、ノードの実機結果とも一致しました。

33
00:02:27.254 --> 00:02:32.783
記事が説明するように、これは定型文の一か所を差し替える使い方です。

34
00:02:32.783 --> 00:02:40.491
あいさつ文や通知文のように、決まった文面の一部だけを差し替える場面で、そのまま使える形です。

35
00:02:40.491 --> 00:02:45.183
置き換える対象が一文字でも、文章でも、考え方は同じです。

36
00:02:45.183 --> 00:02:48.869
まずはこの基本例を手で実行してみてください。

37
00:02:48.869 --> 00:02:54.064
差し替える目印は、本文に現れない独特な文字列にすると安全です。

38
00:02:54.064 --> 00:02:56.222
記事の境界条件の例を見ます。

39
00:02:56.222 --> 00:03:02.389
エーがハイフンを挟んで三つ並ぶ文字列に対して、エーをビーに置き換えるコードです。

40
00:03:02.389 --> 00:03:11.023
実行するとビーハイフンエーハイフンエーとなり、記事の期待出力と同じく、最初のエーだけが変わったことが分かります。

41
00:03:11.023 --> 00:03:13.182
実機の結果とも一致しました。

42
00:03:13.182 --> 00:03:16.111
これがリプレイスの一番大切な性質です。

43
00:03:16.111 --> 00:03:22.432
すべて変えたいのにリプレイスの文字列検索を使ってしまうと、置き換え漏れが起きます。

44
00:03:22.432 --> 00:03:29.370
成功例だけでなく、こうした境界条件を確かめると、実際のデータ処理へ組み込みやすくなります。

45
00:03:29.370 --> 00:03:36.308
置き換え漏れは画面では気づきにくいため、同じ語が複数回出るデータでは特に注意してください。

46
00:03:36.308 --> 00:03:39.656
第一引数に正規表現を使う例を見ます。

47
00:03:39.656 --> 00:03:44.586
同じ文字列でも、正規表現にジーフラグを付けて渡すと、一致するすべてが置換され、

48
00:03:44.586 --> 00:03:49.515
結果はすべてビーになります。

49
00:03:49.515 --> 00:03:57.142
一方、ジーフラグのない正規表現では、文字列検索と同じく最初の一個だけが変わります。

50
00:03:57.142 --> 00:04:00.304
どちらも実機の結果と一致しました。

51
00:04:00.304 --> 00:04:06.814
つまりリプレイスでも、正規表現のジーフラグを使えば全件置換ができます。

52
00:04:06.814 --> 00:04:13.697
正規表現を使うと、数字だけ、空白だけといった、種類で絞った置換もできます。

53
00:04:13.697 --> 00:04:20.579
パターンの意味とジーフラグの有無を、実行前に確認する習慣を付けてください。

54
00:04:20.579 --> 00:04:29.136
たとえば空白やカンマの種類をそろえる処理でも、正規表現ならまとめて表現できる場合があります。

55
00:04:29.136 --> 00:04:31.817
第二引数に置換関数を使う例を見ます。

56
00:04:31.817 --> 00:04:35.914
置換文字列の代わりに関数を渡すと、一致が見つかるたびにその関数が呼ばれ、

57
00:04:35.914 --> 00:04:40.010
戻り値が置き換え後の文字列になります。

58
00:04:40.010 --> 00:04:44.255
スライドの例では、ジーフラグ付きの正規表現で連続した数字を見つけて数値に直し、

59
00:04:44.255 --> 00:04:48.501
二倍にしてから文字列に戻しています。

60
00:04:48.501 --> 00:04:52.671
結果は百が二百、二百が四百となり、実機とも一致しました。

61
00:04:52.671 --> 00:04:57.289
ジーフラグがない場合は、最初の一致だけが関数の対象になります。

62
00:04:57.289 --> 00:05:03.843
決まった文字列への置き換えでは足りず、一致した内容に応じて結果を変えたい場合に便利です。

63
00:05:03.843 --> 00:05:08.908
計算が必要な置換や、一致ごとに違う値を作りたい場面で力を発揮します。

64
00:05:08.908 --> 00:05:12.127
置換文字列に含まれるドル記号の扱いを見ます。

65
00:05:12.127 --> 00:05:17.978
ドルとアンパサンドの組み合わせは、一致した部分そのものを表す特殊なパターンです。

66
00:05:17.978 --> 00:05:23.026
エービーシーのビーを角カッコ付きのこのパターンで置き換えると、一致したビーがはさまれてエー角カッコビーシーとなり、

67
00:05:23.026 --> 00:05:28.073
実機でも確認できました。

68
00:05:28.073 --> 00:05:34.656
記事も注意しているように、任意の文字列をそのまま返したい場合は、置換関数を使ってください。

69
00:05:34.656 --> 00:05:40.654
関数から同じ文字を返すと、特殊な解釈はされず、そのままの文字として置き換わります。

70
00:05:40.654 --> 00:05:44.897
利用者の入力を置換文字列に使う場合は、特に注意が必要です。

71
00:05:44.897 --> 00:05:50.456
ドル記号を文字として使いたい場合は、二つ重ねて書く表記も実機で確認できます。

72
00:05:50.456 --> 00:05:54.831
前回のリプレイスオールとの違いを、日付の区切りで確かめます。

73
00:05:54.831 --> 00:05:59.426
スラッシュ区切りの日付文字列に対して、リプレイスを使うと最初のスラッシュだけがハイフンになり、

74
00:05:59.426 --> 00:06:04.020
後ろはスラッシュのまま残ります。

75
00:06:04.020 --> 00:06:08.249
一方リプレイスオールでは、二か所ともハイフンに変わります。

76
00:06:08.249 --> 00:06:10.729
どちらも実機の結果と一致しました。

77
00:06:10.729 --> 00:06:15.542
一個だけ変えたい場合はリプレイス、すべて変えたい場合はリプレイスオールか、

78
00:06:15.542 --> 00:06:20.355
ジーフラグ付きの正規表現を使うリプレイスを選んでください。

79
00:06:20.355 --> 00:06:24.293
目的が一個か全部かで、方法を使い分けることが大切です。

80
00:06:24.293 --> 00:06:30.564
置き換え漏れは気づきにくいため、同じ語が複数回出るデータでは特に慎重に選んでください。

81
00:06:30.564 --> 00:06:32.521
注意点を三つ確認します。

82
00:06:32.521 --> 00:06:35.456
まず、大文字と小文字は区別されます。

83
00:06:35.456 --> 00:06:39.615
キャットと小文字のキャットが混ざる文字列では、小文字の方だけがドッグに変わり、

84
00:06:39.615 --> 00:06:43.773
実機でも確認できました。

85
00:06:43.773 --> 00:06:49.318
次に、検索文字列に空文字列を渡すと、置換文字列は先頭にだけ入ります。

86
00:06:49.318 --> 00:06:54.210
文字の間にも入るリプレイスオールとの違いに注意してください。

87
00:06:54.210 --> 00:06:59.266
最後に、該当する箇所がなければ、元の文字列がそのまま返ります。

88
00:06:59.266 --> 00:07:01.060
エラーにはなりません。

89
00:07:01.060 --> 00:07:09.866
あわせて、リプレイスを実行しても元の文字列は変わらないため、結果を使いたい場合は戻り値を受け取ってください。

90
00:07:09.866 --> 00:07:16.552
元の文字列が変わらない性質のおかげで、変換前と変換後を並べて比べることも簡単です。

91
00:07:16.552 --> 00:07:17.447
まとめです。

92
00:07:17.447 --> 00:07:22.820
リプレイスは、一致した部分を置き換えた、新しい文字列を返すメソッドです。

93
00:07:22.820 --> 00:07:24.760
判断のポイントは三つです。

94
00:07:24.760 --> 00:07:28.789
まず、検索が文字列なら置換は最初の一個だけであること。

95
00:07:28.789 --> 00:07:34.460
次に、全件変えたい場合はジーフラグ付き正規表現かリプレイスオールを使うこと。

96
00:07:34.460 --> 00:07:41.623
そして、置換文字列のドル記号には特殊な意味があり、そのまま返したい場合は置換関数を使うことです。

97
00:07:41.623 --> 00:07:49.084
まずは記事の基本例と境界例を実行し、検索文字列を一つ変えて、結果を予測してから確かめてみてください。

98
00:07:49.084 --> 00:07:54.457
前回のリプレイスオールと合わせると、文字列の置換の使い分けが完成します。

99
00:07:54.457 --> 00:07:55.800
お疲れさまでした。

100
00:07:55.800 --> 00:08:01.172
小さな置換を正しく使い分けることが、読みやすいデータ整形につながります。