1. msakamoto_sf

    Posted

    msakamoto_sf
Changes in title
+JavaScriptとHTMLで、Unicodeのサロゲートペアを表示する練習
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,51 @@
+(2015-04-27 の練習メモからこちらに移転)
+
+文字コードの復習をちょっとしてたら、Unicodeのサロゲートペアって今まで気にしたこと無かったことに気が付きました。
+ということで、お仕事でも扱うJavaScriptとHTMLで、まずはサロゲートペアを「表示」してみる練習です。(2015-04時点のES5対応迄)
+
+* http://jsfiddle.net/msakamoto_sf/xp9mzzxb/
+
+<!-- more -->
+
+簡単にまとめると以下のようになります。
+
+* HTMLなら・・・
+ * `&#x20BB7;` や `&#x20B9F;` のような数値文字参照を使って、Unicodeコードポイントをそのまま16進数で表記すればOK.
+* JavaScript(ES5まで)とJSONなら・・・
+ * サロゲートペア対象外の文字なら、`\u(コードポイント16進数表現)` をリテラルとして使える。
+ * サロゲートペア対象の文字なら、サロゲートペアに分割し、`\u(上位サロゲートの16進数表現)\u(下位サロゲートの16進数表現)` とする。
+* ES6での予定(上記jsfiddleには組み込んでません)
+ * サロゲートペア対象の文字でも、分割せずにそのまま `\u{20BB7}` (土吉) と表記できる。
+ * String.codePointAt() によりサロゲートペアを分割せずにコードポイントを取り出せる。
+ * RegExpで `/u` フラグが追加され、サロゲートペアを分割せずに1文字として処理できる。
+
+今回は表示しか練習しませんでした。文字数のカウントなど、より実践的なテクニックについては以下の参考URLの一部で詳しく解説されてます。
+
+* HTML Document Representation
+ * http://www.w3.org/TR/html4/charset.html
+ * "5.3 Character references" で数値文字参照や文字実体参照の記法が解説されてます。
+* Grammar and types - JavaScript | MDN
+ * https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_types
+ * "Unicode"のところで、Unicode エスケープシーケンスについて解説されてます。
+* サロゲートペア入門:CodeZine
+ * http://codezine.jp/article/detail/1592
+* JavaScript Stringでサロゲートペアを扱う - teppeis blog
+ * http://teppeis.hatenablog.com/entry/2014/01/surrogate-pair-in-javascript
+ * JSでの文字数カウントでサロゲートペアを考慮したやり方について解説されてます。
+* JavaScriptでのサロゲートペア文字列のメモ - Qiita
+ * http://qiita.com/YusukeHirao/items/2f0fb8d5bbb981101be0
+ * これもJSでの文字数処理での実践的なテクニックについて解説されてます。ES5とES6とで異なってくる?
+* JSONのエスケープ | yohgaki's blog
+ * http://blog.ohgaki.net/json-escape
+ * JSONでのエスケープについて詳細に解説されてます。PHPでの注意点も詳しいです。
+
+また、ES6でのUnicodeサポートについては以下を参考にしました。
+
+* lukehoban/es6features
+ * https://github.com/lukehoban/es6features#unicode
+* Mozilla における ECMAScript 6 のサポート - JavaScript | MDN
+ * https://developer.mozilla.org/ja/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla
+* ECMAScript 6 compatibility table
+ * http://kangax.github.io/compat-table/es6/
+
+※hatena id:jser さんからのコメントをきっかけに、ES6でのUnicodeサポートについて追記