文字を0と1にする

文章を UTF-8 のバイト列にして、2進（0と1）・16進・10進で並べます。どの文字が何バイトになったかも1文字ずつ出します。逆に戻すこともできます。

ひらがなも漢字も3バイト、英数字は1バイトです

コンピュータは文字をそのまま持っているわけではなく、文字に振られた番号を、決まった規則でバイトに直して持っています。 いまのウェブでほぼ全部に使われている規則がUTF-8です。

UTF-8 のいちばんの特徴は、文字によってバイト数が変わることです。 英数字と半角記号は1バイト。ウムラウトつきの文字やギリシャ文字は2バイト。ひらがな・カタカナ・漢字は3バイト。 多くの絵文字と、あとから足された漢字は4バイトです。

だから「同じ100文字」でも、英語なら100バイト、日本語なら300バイトになります。 入力欄の上限や、データベースの桁数がバイトで決められているとき、日本語だけ3分の1しか入らないのはこのためです。 バイトが集まってキロバイトやメガバイトになる先の話はデータ量の変換が引き受けています。あちらは量のものさし、 こちらは1文字ぶんの中身を見るページです。

絵文字はさらに増えます。家族の絵文字（👨‍👩‍👧‍👦）は、人の絵文字4つをつなぎ役の見えない文字3つでつないだものなので、 見た目は1文字でも25バイトあります。 上の表に貼り付けると、その内訳がそのまま出ます。

1バイト目を見るだけで、その文字が何バイトか分かります

ここが UTF-8 のいちばん賢いところです。1バイト目の、先頭のビットの並びだけを見れば、その文字が何バイトかが決まります。中身を読む前に長さが分かる、ということです。

0で始まれば1バイト、110なら2バイト、1110なら3バイト、11110なら4バイト。 そして続きのバイトは必ず10で始まります。 1バイト目に使う形と、続きに使う形が、まったく重なっていません。

この作りのおかげで、データの途中から読み始めても、文字の切れ目が分かります。 10で始まるバイトを前に戻りながら読み飛ばせば、そこが文字の先頭です。 長い文章の途中で表示を始めたり、うしろから探したりできるのは、この性質のためです。

しかも、印を取り除いて残りをつなげると、Unicode の番号がそのまま出てきます。 たとえば「あ」は3バイトで 11100011 10000001 10000010。 印（1110・10・10）を外して 0011 000001 000010 をつなげると 0011000001000010 ── これは U+3042、まさに「あ」の番号です。UTF-8 は番号を暗号のように変えているのではなく、印を付けて分けて置いているだけです。

英語だけの文章なら、UTF-8 は昔のままのバイト列になります

UTF-8 は、U+0000 から U+007F までの文字を、1バイトのまま置きます。 この範囲は英数字と半角記号、つまりASCIIと呼ばれてきた古い文字の並びです。

つまり、英数字だけでできた文章は、ASCII で保存しても UTF-8 で保存しても、1バイトも違いません。これは偶然ではなく、そうなるように設計されています。 新しい規則を作るときに、古いデータと古いプログラムをそのまま使えるようにしたわけです。 UTF-8 がここまで広まった理由のひとつがこれです。

絵文字は、プログラムから見ると1文字ではありません

JavaScript をはじめ多くの言語は、文字列をUTF-16という別の形で持っています。 UTF-16 は、番号の小さい文字を2バイトで持ち、番号の大きい文字は2つの組で持ちます。この組をサロゲートペアと呼びます。

だから絵文字は、プログラムから見ると2文字ぶんに数えられます。カバの絵文字 🦛 は、UTF-8 では4バイト、UTF-16 では2つぶん、人の目には1文字です。3つの数がどれも違います。投稿しようとして「文字数を超えています」と言われるのは、たいていここです。 数え方そのものを比べたいときは文字数カウントのページへどうぞ。あちらはいくつあるかを数えるところまで、 こちらはそのバイトが実際にどう並んでいるかまで見せます。

気をつけたいのは切るときです。「先頭100文字まで」といった切り方を UTF-16 の数で行うと、サロゲートペアの途中で切れて、片割れだけが残ることがあります。 片割れは UTF-8 で書き表せない番号なので、文句も言われずに EF BF BD（U+FFFD・いわゆる「�」）に置き換わります。 入力に無かったバイトが出てきて、しかも画面には何も出ません。 このページは、その片割れを見つけたらその場で知らせます。

読めないバイト列を、黙って捨てません

逆変換のほうが難しい仕事です。バイト列はどんな並びでも作れてしまうのに、 UTF-8 として意味を持つ並びは、そのごく一部だからです。 このページは、読めないときに空欄を返しません。何バイト目の、どのバイトが、なぜ駄目なのかを出します。

たとえば途中で切れている場合。3バイトの文字の1バイト目まで来たのに、 続きが2バイト残っていなければ、そこで「切れています」と言えます。続きのバイトが続きの形をしていない場合も同じで、 2バイト目以降は必ず10で始まるという決まりがあるので、違えばすぐ分かります。

面白いのは、「書けるのに禁止されている並び」があることです。 たとえば A（U+0041）は1バイトで書けますが、 2バイトや3バイトを使って同じ番号を書くこともできてしまいます。 UTF-8 はこれを禁止しています ── 短く書ける文字は、必ず短く書く決まりです。

禁止の理由は安全のためです。RFC 3629（新しいタブで開きます）の安全に関する節は、正しくない並びを「文字として解釈してしまう」実装への攻撃を挙げています。 入力を調べる仕組みが「この記号は入っていない」と判断したのに、 あとから読む側が長い書き方をその記号として読んでしまえば、検査をすり抜けられます。書き方を1通りに決めておけば、この抜け道そのものが無くなります。

UTF-8 の決まりはRFC 3629（STD 63）（新しいタブで開きます）と Unicode 標準によります。1バイト目の形・4バイトまでであること・上限が U+10FFFF であること・サロゲートの番号を書かないことは、いずれも RFC 3629 に書かれています。 このページは符号化に TextEncoder、読めるかどうかの判定に TextDecoder を使っていて、UTF-8 を自前で組んではいません（どこが不正かを説明するためだけに自前の走査を持っていて、 両者の判定が一致することを単体テストで確かめています）。