WEBVTT

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

2
00:00:00.913 --> 00:00:05.329
今回はジャバスクリプトのコードポイントアットを紹介します。

3
00:00:05.329 --> 00:00:11.723
これは、文字列の中の文字が、ユニコードで何番の文字なのかを数値で調べるメソッドです。

4
00:00:11.723 --> 00:00:16.975
たとえば入力した名前が検索に一致しない、コピーした文章に余分な空白が混ざっている、

5
00:00:16.975 --> 00:00:22.228
といった問題は、画面の見た目だけでは原因が分かりません。

6
00:00:22.228 --> 00:00:28.165
半角のエーは十進数で六十五、ユニコードの表記ではユープラス、ゼロゼロ四一です。

7
00:00:28.165 --> 00:00:34.560
このように文字を数値で確認すれば、見た目がそっくりな別の文字もはっきり区別できます。

8
00:00:34.560 --> 00:00:42.172
この動画では、基本の使い方から、文字列全体を一覧化する診断コード、失敗例や注意点まで順に解説します。

9
00:00:42.172 --> 00:00:43.451
まず動作環境です。

10
00:00:43.451 --> 00:00:49.986
コードポイントアットはブラウザー専用の機能ではなく、文字列に組み込まれた標準のメソッドです。

11
00:00:49.986 --> 00:00:56.805
ブラウザーとノード・ジェイエスの両方で使え、追加パッケージや画面要素、通信処理は必要ありません。

12
00:00:56.805 --> 00:01:01.777
二千十五年九月から主要ブラウザーを横断して広く利用できるとされており、現在のクローム、

13
00:01:01.777 --> 00:01:06.749
エッジ、ファイアフォックス、サファリを対象にできます。

14
00:01:06.749 --> 00:01:11.438
記事のサンプルはノード・ジェイエス二十二系以降を対象にしています。

15
00:01:11.438 --> 00:01:17.547
古い組み込みブラウザーも対象にする場合は、使う前にタイプオブで存在を確認してください。

16
00:01:17.547 --> 00:01:20.672
ファンクションと表示されれば対応しています。

17
00:01:20.672 --> 00:01:22.629
基本の書き方を見ましょう。

18
00:01:22.629 --> 00:01:29.404
調べたい文字列の後ろにドット、コードポイントアットと書き、かっこの中に位置を一つ渡します。

19
00:01:29.404 --> 00:01:31.060
位置は先頭がゼロです。

20
00:01:31.060 --> 00:01:33.168
元の文字列は変更されません。

21
00:01:33.168 --> 00:01:38.889
戻り値は、その位置から始まる文字のコードポイントを表す、ゼロ以上の整数です。

22
00:01:38.889 --> 00:01:44.459
引数を省略するかアンディファインドを指定すると、位置ゼロとして扱われます。

23
00:01:44.459 --> 00:01:50.180
一方、文字列の範囲外を指定すると、数値ではなくアンディファインドが返ります。

24
00:01:50.180 --> 00:01:56.052
ここが大切で、範囲外では例外にはならず、値が得られないという形で知らされます。

25
00:01:56.052 --> 00:02:01.020
次のセクションで見る位置の数え方が、このメソッド最大の注意点です。

26
00:02:01.020 --> 00:02:03.802
位置の数え方を詳しく見ます。

27
00:02:03.802 --> 00:02:12.146
引数の位置は、見た目の文字数ではなく、ユーティーエフ十六のコード単位を基準にします。

28
00:02:12.146 --> 00:02:18.902
たとえば、エー、笑顔の絵文字、ビーを並べた文字列のレングスは四です。

29
00:02:18.902 --> 00:02:28.439
エーとビーはそれぞれ一単位ですが、絵文字は二単位を使うため、ビーの位置は二ではなく三になります。

30
00:02:28.439 --> 00:02:35.592
絵文字の先頭位置を指定すれば、絵文字全体のコードポイントを取得できます。

31
00:02:35.592 --> 00:02:42.943
しかし後半の位置を指定すると、後半のコード単位の値だけが返ってしまいます。

32
00:02:42.943 --> 00:02:47.712
文字の見た目と位置がずれる理由はここにあります。

33
00:02:47.712 --> 00:02:52.480
この性質を理解することが、正しく使う第一歩です。

34
00:02:52.480 --> 00:03:00.185
記事の実例では、文字列全体のコードポイントと開始位置を一覧で出力する、小さな診断処理を作ります。

35
00:03:00.185 --> 00:03:04.359
ポイントは、フォー・オブ構文で文字列を回すことです。

36
00:03:04.359 --> 00:03:08.693
この回し方なら、絵文字も一つの文字として取り出せます。

37
00:03:08.693 --> 00:03:17.362
取り出した文字の先頭にコードポイントアット、ゼロを適用し、得られた数値をトストリングで十六進数に変換します。

38
00:03:17.362 --> 00:03:23.141
さらに大文字化とパッドスタートで四桁にそろえ、ユープラスの表記にします。

39
00:03:23.141 --> 00:03:27.315
開始位置は、取り出した文字のレングス分だけ進めます。

40
00:03:27.315 --> 00:03:32.612
こうすれば、元の文字列での正しい位置を保ったまま、一覧を作れます。

41
00:03:32.612 --> 00:03:34.837
期待出力を確認しましょう。

42
00:03:34.837 --> 00:03:41.170
入力例は、エー、普通の空白、ノーブレークスペース、笑顔の絵文字、ビーです。

43
00:03:41.170 --> 00:03:46.990
再現を確実にするため、空白類はユニコードエスケープで書かれています。

44
00:03:46.990 --> 00:03:52.211
結果では、普通の空白がユープラス、ゼロゼロ二ゼロ、ノーブレークスペースがユープラス、

45
00:03:52.211 --> 00:03:57.431
ゼロゼロエーゼロと別々に表示されます。

46
00:03:57.431 --> 00:04:02.566
見た目ではほぼ同じでも、数値が違うため別文字だと分かります。

47
00:04:02.566 --> 00:04:06.503
絵文字の開始位置は三で、その次のビーは五です。

48
00:04:06.503 --> 00:04:10.782
絵文字が二単位を使うことが、ここにも表れています。

49
00:04:10.782 --> 00:04:13.692
空文字列では行数はゼロになります。

50
00:04:13.692 --> 00:04:19.512
違いを目で追うのではなく、数値の一覧で比べるのがこの診断の狙いです。

51
00:04:19.512 --> 00:04:22.037
失敗例も確認しておきましょう。

52
00:04:22.037 --> 00:04:26.917
笑顔の絵文字一つだけの文字列で、インデックスを一ずつ増やしながらコードポイントアットを呼ぶと、

53
00:04:26.917 --> 00:04:31.798
出力は二行になります。

54
00:04:31.798 --> 00:04:35.669
一行目は絵文字全体を表す一エフ六ゼロゼロです。

55
00:04:35.669 --> 00:04:40.886
しかし二行目のディーイーゼロゼロは、別の絵文字ではありません。

56
00:04:40.886 --> 00:04:46.777
二単位で一文字を表すサロゲートペアの、後半だけを直接参照した結果です。

57
00:04:46.777 --> 00:04:54.518
添字を一ずつ進める方法は、一見自然ですが、絵文字を含む文字列では余分な行を作ってしまいます。

58
00:04:54.518 --> 00:05:02.092
全体の一覧を作る用途では、先ほどのフォー・オブを使う方が、位置の扱いを誤りにくくなります。

59
00:05:02.092 --> 00:05:04.536
範囲外の扱いも押さえます。

60
00:05:04.536 --> 00:05:12.057
空文字列にコードポイントアット、ゼロを適用すると、アンディファインドが返ります。

61
00:05:12.057 --> 00:05:23.526
そのままトストリングを呼ぶとタイプエラーになるため、変換する前に、値がアンディファインドかどうかを分岐で確認してください。

62
00:05:23.526 --> 00:05:28.790
スライドの例では、対象なしと表示して安全に終えています。

63
00:05:28.790 --> 00:05:35.935
診断関数ではこの問題を、空文字列ではループ自体が回らないことで避けています。

64
00:05:35.935 --> 00:05:42.515
さらに診断関数は、文字列以外が渡されたらタイプエラーを投げる設計です。

65
00:05:42.515 --> 00:05:49.848
これは補助関数が定めた入力条件で、呼び出し側に早めに間違いを知らせる工夫です。

66
00:05:49.848 --> 00:05:53.984
処理はすべて同期的で、アウェイトは不要です。

67
00:05:53.984 --> 00:05:55.535
もう一つの制約です。

68
00:05:55.535 --> 00:06:01.894
コードポイントの一覧の行数を、そのまま利用者向けの文字数として扱わないでください。

69
00:06:01.894 --> 00:06:10.891
濁点が後ろに付く結合文字、肌の色を伴う絵文字、国旗などは、複数のコードポイントで一つの表示単位になることがあります。

70
00:06:10.891 --> 00:06:15.854
つまり、コードポイントの数と、人が数える文字の数は一致しません。

71
00:06:15.854 --> 00:06:23.299
さらに、ジャバスクリプトの文字列には、対になっていない壊れたサロゲートが含まれる場合もあります。

72
00:06:23.299 --> 00:06:30.279
数値が取得できたことだけで、他のシステムへ安全に渡せる文字列だと判断することはできません。

73
00:06:30.279 --> 00:06:34.932
何を一文字と数えるかは、目的ごとに別に決める必要があります。

74
00:06:34.932 --> 00:06:36.168
活用場面です。

75
00:06:36.168 --> 00:06:40.846
検索に一致しない文字列があれば、検索語と保存済みの値をそれぞれ診断関数へ渡し、

76
00:06:40.846 --> 00:06:45.525
一覧同士を比較してください。

77
00:06:45.525 --> 00:06:52.587
フォームから入力した値と、外部システムから取り込んだ値を比べる場合にも使えます。

78
00:06:52.587 --> 00:06:58.236
大切なのは、違いを見つけた後に、その場で自動修正しないことです。

79
00:06:58.236 --> 00:07:06.534
空白をすべて削除するような一律の変換は、商品名や識別子の意味まで変えてしまう可能性があります。

80
00:07:06.534 --> 00:07:15.008
診断結果を基に、どの文字を同じものとして扱うか、許容する入力と変換ルールを具体的に決めましょう。

81
00:07:15.008 --> 00:07:22.600
また大量の文章では一覧も大きくなるため、問題のある位置の周辺に対象を絞ると効率的です。

82
00:07:22.600 --> 00:07:23.913
最後にまとめです。

83
00:07:23.913 --> 00:07:30.624
コードポイントアットは、指定位置から始まる文字のコードポイントを数値で取得するメソッドです。

84
00:07:30.624 --> 00:07:35.365
位置はユーティーエフ十六のコード単位が基準で、絵文字は二単位を使うこと、

85
00:07:35.365 --> 00:07:40.107
範囲外ではアンディファインドが返ることを押さえてください。

86
00:07:40.107 --> 00:07:45.505
文字列全体を調べるときは、フォー・オブで一文字ずつ取り出す方法が安全です。

87
00:07:45.505 --> 00:07:50.465
次に改善するなら、診断結果を表示するだけでなく、違いがあった行だけを抜き出す比較処理を加えると、

88
00:07:50.465 --> 00:07:55.426
長い文字列でも原因を早く見つけられます。

89
00:07:55.426 --> 00:07:59.802
まずは手元の文字列で一覧を作り、普通の空白とノーブレークスペースのような、

90
00:07:59.802 --> 00:08:04.179
見えない違いを自分の目で確かめてみてください。

91
00:08:04.179 --> 00:08:05.492
お疲れさまでした。