JavaScriptのtoLocaleStringメソッドについて調べてみた

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

(今回のエントリーは元々、前回(JavaScriptの数値をカンマ区切りにする最も簡単な方法 | while(isプログラマ))の後半に記述していた内容ですが、タイトルとは少しかけ離れた内容となり、別のエントリーにしたほうがいいような気がしたので分けました)

toLocaleStringというメソッドを知ったのはつい最近なのですが、その時は(toLocaleString? toStringなら知ってるけど、toLocaleStringって何だ?)と思いました。調べてみると、JavaScriptのオブジェクトには全て(意図的にprototype.toLocaleStringをundefined等にする場合をのぞいて)、toLocaleStringメソッドが存在しているようで、たいがいのオブジェクトではただたんにtoStringメソッドを呼ぶメソッドとなっているようです(参考:toLocaleStringメソッド – Objectクラス – JavaScript入門)。

どうやら、NumberオブジェクトとDateオブジェクトではtoStringとtoLocaleStringで別の結果を返すようです。ただ、DateオブジェクトのtoLocaleString()はChromeとIEでは別々の値を返しました

もう少し調べて見ると、このtoLocaleStringメソッドは第一引数にロケール指定の文字列、第二引数にオプションを指定することがきるらしく、時刻の出力表記を変更する場合は下記のようにするといいようです(以下、出力例はChromeで実行した結果)。

参考:Date.prototype.toLocaleString() – JavaScript | MDN

もちろん、Numberオブジェクトでもいろいろな指定ができるよう。

参考:Number.prototype.toLocaleString() – JavaScript | MDN

第一引数については、下記ページが参考になるかも。
ロケール ID (LCID) の一覧

ただし、この引数の指定自体は最近のブラウザでしか指定できないようで、IEは11、Chromeは24、Firefoxは29からサポートしており、Safariではそもそもサポートしていないようです。

JavaScriptの数値をカンマ区切りにする最も簡単な方法

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

例えば、『123456789』という数値を、『123,456,789』という文字列にしたい場合、よく取られる手法としては、下記のような正規表現やループを使う方法があります。例えば下記のような感じ(参考:JavaScriptで数値を桁区切り (カンマ区切り) にする方法)。

(前回まで『//=>』を使って結果を記述する場合、console.logをわざわざ記したコードを書いていましたが、あまりにも冗長なため、今後は省略します。)

でも、実はもっと簡単な方法があるということを最近になって知りました。それが、NumberオブジェクトのtoLocaleStringメソッドを使う方法

このメソッド自体は昔から(IE6にも)あったようなのですが、IE10以前だと結果は下記のように、小数点以下2桁まで記述した文字列になってしまいます。

なので、どちらにも対応させるためには、splitメソッドの引数に”.”を指定て取得した配列の0番目を取得するという方法をとると、古い前のブラウザにも対応させることができそうです。

ただし、残念ながら、SafariやOperaではカンマ区切りではない、そのままの数値文字列を返すようです。

toLocaleStringについては別エントリーで詳しく説明しています。
JavaScriptのtoLocaleStringメソッドについて調べてみた | while(isプログラマ)

jQueryを使わずにクラスの操作を行うclassListオブジェクトを調べてみた

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

またまたモダンWeb ―新しいWebプラットフォームの基盤技術を読んで知ったことのメモ。

あるDOM要素に指定のクラスがあるか確認したり、指定のクラスを追加したり削除したりするにはjQueryを使うと簡単にできますが、最近のブラウザのJavaScriptにはclassListというオブジェクトが導入してあるようで、このオブジェクトを使うことにより、クラスの操作が簡単にできるようです。
参考:element.classList – DOM | MDN

例えば、下記のようなHTMLがあるとします。

以下、IDが”js-div”のdiv要素はclassListでの操作用、IDが”jq-div”のdiv要素はjQueryでの操作用に使います。

指定のクラスがあるか確認する

指定のクラスがあるかどうかの確認には、containsメソッドを使う。

クラスの追加・削除を行う

クラスの追加にはadd、クラスの削除にはremoveメソッドを使う。もしかしてjQueryみたいにメソッドチェーンができるんじゃ・・・と思って試してみましたが、ダメでした。

指定クラスの切り替えを行う

指定のクラスがあれば外し、なければ追加するような動作を実現するにはtoggleメソッドを使う。この機能は便利ですね。

なお、classList自体は配列のようになっており、classList[n]のように指定するとn+1番目のクラス名が手に入る。

配列のように使えるので、前に紹介したイテレーションメソッドも使える。

toStringメソッドを使うと、配列のようなカンマ区切りではなく、スペース区切りの値(classNameと同じ)が得られる。

ちなみに、HTML5では、class指定でのDOM取得方法として、getElementsByClassNameメソッドが追加されています。ただ、getElementsByClassNameメソッドが使えるブラウザでは大抵、querySelector(querySelectorAll)メソッドが使えると思うので、そちらを使ってみてもいいと思います。

とはいっても、上記の例の場合はgetElementsByClassNameのほうが高速らしいんですけどね。何百回と試すわけではないのであれば、さほど実感できる違いではないと思います(参考:document.querySelector – Web API インターフェイス | MDN)。

現時点でIEのみ実装されてるPointer Eventsが超便利

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

マウスとタッチで同じ動きをしてほしい場合、それぞれマウスイベントだと『mousedown』、タッチイベントだと『touchstart』と指定しなければいけないうえに、座標の取得方法も異なってわずらわしいと思うことがあります。

例えば、以前作成したcanvasを使ったお絵描き投稿システムでは座標の取得するのに下記のように記述しています。

どうせ同じことをやるなら共通のイベントがあればいいのにと思っていたのですが、先日、モダンWeb ―新しいWebプラットフォームの基盤技術を読んで、『Pointer Events』という指やマウスやスタイラスなどのポインタイベントを共通して適用可能なイベントがあることを知りました。
参考:マウス・タッチ・ペンのタッチ操作イベント|Web制作 W3G
参考:ポインター イベントの更新 (Windows)

このイベントを使うと、先ほどのコードは下記のように変更することができます。

以下、実行サンプル。
canvasを使ったお絵描き投稿システム(現在はIE11のみ対応)

ただ、自分はタッチパネル付きのWindows7 PCのIE11で試してみたのですが、デフォルトの挙動が発生してしまうことがあります(前に作ったお絵描きシステムはデフォルトの挙動は発生せず)。e.preventDefault()を呼ぶだけでなく、CSSで『touch-action : none ;』の指定をしても同じです。Windows8やタブレット端末だとまた違うかもしれません。

なお、試してはいないのですが、下記のGitHubで公開されているJavaScriptライブラリを使うことにより、IE以外のブラウザでも同じことができるそうです。
toolkitchen/PointerEvents