VIDEO LESSON

JavaScriptのcodePointAt()：文字のコードポイントを調べて入力の違いを見つけるの解説動画

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

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

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

0:00こんにちは。
0:00今回はジャバスクリプトのコードポイントアットを紹介します。
0:05これは、文字列の中の文字が、ユニコードで何番の文字なのかを数値で調べるメソッドです。
0:11たとえば入力した名前が検索に一致しない、コピーした文章に余分な空白が混ざっている、
0:16といった問題は、画面の見た目だけでは原因が分かりません。
0:22半角のエーは十進数で六十五、ユニコードの表記ではユープラス、ゼロゼロ四一です。
0:28このように文字を数値で確認すれば、見た目がそっくりな別の文字もはっきり区別できます。
0:34この動画では、基本の使い方から、文字列全体を一覧化する診断コード、失敗例や注意点まで順に解説します。
0:42まず動作環境です。
0:43コードポイントアットはブラウザー専用の機能ではなく、文字列に組み込まれた標準のメソッドです。
0:49ブラウザーとノード・ジェイエスの両方で使え、追加パッケージや画面要素、通信処理は必要ありません。
0:56二千十五年九月から主要ブラウザーを横断して広く利用できるとされており、現在のクローム、
1:01エッジ、ファイアフォックス、サファリを対象にできます。
1:06記事のサンプルはノード・ジェイエス二十二系以降を対象にしています。
1:11古い組み込みブラウザーも対象にする場合は、使う前にタイプオブで存在を確認してください。
1:17ファンクションと表示されれば対応しています。
1:20基本の書き方を見ましょう。
1:22調べたい文字列の後ろにドット、コードポイントアットと書き、かっこの中に位置を一つ渡します。
1:29位置は先頭がゼロです。
1:31元の文字列は変更されません。
1:33戻り値は、その位置から始まる文字のコードポイントを表す、ゼロ以上の整数です。
1:38引数を省略するかアンディファインドを指定すると、位置ゼロとして扱われます。
1:44一方、文字列の範囲外を指定すると、数値ではなくアンディファインドが返ります。
1:50ここが大切で、範囲外では例外にはならず、値が得られないという形で知らされます。
1:56次のセクションで見る位置の数え方が、このメソッド最大の注意点です。
2:01位置の数え方を詳しく見ます。
2:03引数の位置は、見た目の文字数ではなく、ユーティーエフ十六のコード単位を基準にします。
2:12たとえば、エー、笑顔の絵文字、ビーを並べた文字列のレングスは四です。
2:18エーとビーはそれぞれ一単位ですが、絵文字は二単位を使うため、ビーの位置は二ではなく三になります。
2:28絵文字の先頭位置を指定すれば、絵文字全体のコードポイントを取得できます。
2:35しかし後半の位置を指定すると、後半のコード単位の値だけが返ってしまいます。
2:42文字の見た目と位置がずれる理由はここにあります。
2:47この性質を理解することが、正しく使う第一歩です。
2:52記事の実例では、文字列全体のコードポイントと開始位置を一覧で出力する、小さな診断処理を作ります。
3:00ポイントは、フォー・オブ構文で文字列を回すことです。
3:04この回し方なら、絵文字も一つの文字として取り出せます。
3:08取り出した文字の先頭にコードポイントアット、ゼロを適用し、得られた数値をトストリングで十六進数に変換します。
3:17さらに大文字化とパッドスタートで四桁にそろえ、ユープラスの表記にします。
3:23開始位置は、取り出した文字のレングス分だけ進めます。
3:27こうすれば、元の文字列での正しい位置を保ったまま、一覧を作れます。
3:32期待出力を確認しましょう。
3:34入力例は、エー、普通の空白、ノーブレークスペース、笑顔の絵文字、ビーです。
3:41再現を確実にするため、空白類はユニコードエスケープで書かれています。
3:46結果では、普通の空白がユープラス、ゼロゼロ二ゼロ、ノーブレークスペースがユープラス、
3:52ゼロゼロエーゼロと別々に表示されます。
3:57見た目ではほぼ同じでも、数値が違うため別文字だと分かります。
4:02絵文字の開始位置は三で、その次のビーは五です。
4:06絵文字が二単位を使うことが、ここにも表れています。
4:10空文字列では行数はゼロになります。
4:13違いを目で追うのではなく、数値の一覧で比べるのがこの診断の狙いです。
4:19失敗例も確認しておきましょう。
4:22笑顔の絵文字一つだけの文字列で、インデックスを一ずつ増やしながらコードポイントアットを呼ぶと、
4:26出力は二行になります。
4:31一行目は絵文字全体を表す一エフ六ゼロゼロです。
4:35しかし二行目のディーイーゼロゼロは、別の絵文字ではありません。
4:40二単位で一文字を表すサロゲートペアの、後半だけを直接参照した結果です。
4:46添字を一ずつ進める方法は、一見自然ですが、絵文字を含む文字列では余分な行を作ってしまいます。
4:54全体の一覧を作る用途では、先ほどのフォー・オブを使う方が、位置の扱いを誤りにくくなります。
5:02範囲外の扱いも押さえます。
5:04空文字列にコードポイントアット、ゼロを適用すると、アンディファインドが返ります。
5:12そのままトストリングを呼ぶとタイプエラーになるため、変換する前に、値がアンディファインドかどうかを分岐で確認してください。
5:23スライドの例では、対象なしと表示して安全に終えています。
5:28診断関数ではこの問題を、空文字列ではループ自体が回らないことで避けています。
5:35さらに診断関数は、文字列以外が渡されたらタイプエラーを投げる設計です。
5:42これは補助関数が定めた入力条件で、呼び出し側に早めに間違いを知らせる工夫です。
5:49処理はすべて同期的で、アウェイトは不要です。
5:53もう一つの制約です。
5:55コードポイントの一覧の行数を、そのまま利用者向けの文字数として扱わないでください。
6:01濁点が後ろに付く結合文字、肌の色を伴う絵文字、国旗などは、複数のコードポイントで一つの表示単位になることがあります。
6:10つまり、コードポイントの数と、人が数える文字の数は一致しません。
6:15さらに、ジャバスクリプトの文字列には、対になっていない壊れたサロゲートが含まれる場合もあります。
6:23数値が取得できたことだけで、他のシステムへ安全に渡せる文字列だと判断することはできません。
6:30何を一文字と数えるかは、目的ごとに別に決める必要があります。
6:34活用場面です。
6:36検索に一致しない文字列があれば、検索語と保存済みの値をそれぞれ診断関数へ渡し、
6:40一覧同士を比較してください。
6:45フォームから入力した値と、外部システムから取り込んだ値を比べる場合にも使えます。
6:52大切なのは、違いを見つけた後に、その場で自動修正しないことです。
6:58空白をすべて削除するような一律の変換は、商品名や識別子の意味まで変えてしまう可能性があります。
7:06診断結果を基に、どの文字を同じものとして扱うか、許容する入力と変換ルールを具体的に決めましょう。
7:15また大量の文章では一覧も大きくなるため、問題のある位置の周辺に対象を絞ると効率的です。
7:22最後にまとめです。
7:23コードポイントアットは、指定位置から始まる文字のコードポイントを数値で取得するメソッドです。
7:30位置はユーティーエフ十六のコード単位が基準で、絵文字は二単位を使うこと、
7:35範囲外ではアンディファインドが返ることを押さえてください。
7:40文字列全体を調べるときは、フォー・オブで一文字ずつ取り出す方法が安全です。
7:45次に改善するなら、診断結果を表示するだけでなく、違いがあった行だけを抜き出す比較処理を加えると、
7:50長い文字列でも原因を早く見つけられます。
7:55まずは手元の文字列で一覧を作り、普通の空白とノーブレークスペースのような、
7:59見えない違いを自分の目で確かめてみてください。
8:04お疲れさまでした。

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

この動画で学べること

String.prototype.codePointAt()で文字のコードポイントを調べる方法を解説。ブラウザーとNode.jsの実行手順、UTF-16の添字、期待出力、絵文字や見えない文字を調査する際の注意点を学べます。

解説記事・サンプルコードを読む：JavaScriptのcodePointAt()：文字のコードポイントを調べて入力の違いを見つける →