Javascript 型判定の方法とその処理速度について

わりといい加減だった型判定について、確認の意味も込めてここに。
今後のためにも、頭の中を整理してみる。

型の判定に良く使用するもの

  • ===
  • typeof
  • instanceof
  • constructor

それぞれに利点があり、状況によって使い分けることになるが、処理速度は上記の順の通り、『===』が最も速い。
つまり、『===』<『typeof』<『instanceof』<『constructor』
下図はFirebugで計測した結果です。環境によって数値は変わると思われ、参考値としてご覧下さい。

100万回 for loopで回した処理に掛った時間


※『*constructor』は後に説明します。
一部、扱う型によって処理速度に差が見られた。
その二つの例外を以下に説明します。

存在しない変数を参照した場合の『undefined』について

var a;
alert(typeof a);
通常は上記のような場合、"undefined"が返ります。

変数に何も入ってなくとも、変数自体は存在する場合、処理に掛る時間は上図の通り、14ms程度だったのが、この変数"a"が存在しなかった場合はそれとは異なる結果が出た。
alert(typeof a);//aは存在しない
このような場合、エラーとはならず、処理に980msほど掛った。

『constructor』で型判定する場合について

上図に『*constructor』という値があります。
これは『foo.constructor == Number』などのように、以下の三つの型の変数のconstructorで型判定を行う場合の処理に掛る時間です。
  • Boolean
  • String
  • Number
この3つの型のリテラル(true、"abc"、123など)のconstructorを参照する場合、他と比べて処理に時間が掛るようです。
その処理にかかる時間が上のグラフの『*constructor』の値となります。

さすがにこれほど差があると気になりますね。
しかし、Firebugでしか計測してませんので、あくまで参考までに



上記のことを考慮しながら、型判定を行う関数を書いてみます。

Sample Code

function getType(o){

    //処理速度 6:14:115:385
    //『===』<『typeof』<『instanceof』<『constructor』
    
    // typeof null => object
    if (o === null) 
        return 'null';
    
    //o === undefined => undefinedに代入可能なため×
    //o == undefined => null == undefind はtrueなので×
    if (typeof o == 'undefined') 
        return 'undefined';
    
    if (typeof o == 'boolean') 
        return 'boolean';
    
    if (typeof o == 'string') 
        return 'string';
    
    if (typeof o == 'number') 
        return 'number';
    
    // typeof array => object
    if (o instanceof Array) 
        return 'array';
    
    // typeof regexp => object
    // regexp instanceof Object => true
    if (o instanceof RegExp) 
        return 'regexp';
    
    // typeof date => object
    if (o instanceof Date) 
        return 'date';
    
    if (typeof o == 'function') 
        return 'function';
    
    if (typeof o == 'object') 
        return 'object'
    
    return 'unknown';
}
この関数自体では処理速度を向上させることにはなりません。
あくまで処理速度を考慮しながら個々の型に対する正確な判定を行っているにすぎないということです。



因みにjQueryのメソッドには型判定を行う『isFunction』や『isArray』がある。
この中身は、というと以下のようになっている。
var toString = Object.prototype.toString;
//...

isFunction: function( obj ) {
  return toString.call(obj) === "[object Function]";
},

isArray: function( obj ) {
  return toString.call(obj) === "[object Array]";
},
調べてないが果たしてこれが最速(最適)なのか?



undefinedについて

undefinedは何ともおかしな代物なので、私はundefinedundefined足らしめる、ということをたまに行います。

例えば、こんな感じで。
undefined = function(){return}();
var a;
alert(a === undefined);//true
とか
(function( undefined ){
var a;
alert(a === undefined);//true
})();
みたいな感じで、確実にundefinedundefinedであることを意識します。

Google Sitesの使い方 - Google Docsの活用法

 Google Sites も以前に比べ、UIの一部変更と、そのほぼ全てが日本語化されたことにより、随分と使いやすくなった。

先ほど確認したのですが、テーマが50種類に増えました。\(^o^)/
ページを分割するレイアウトのバリエーションも以前に比べ増えているようですね。CSSが使えないのでうれしい変更です。

しかし、まだまだこの自由度の低い仕様に少々不満を抱く人も多いのではないだろうか。
そんな人へ、こんな使い方もあることをご存じ?

スタイル(CSS)の適用

まずはそんなGoogle Sitesの仕様の一つ、スタイル(CSS)が適用できないことについて。
「どうしてもCSSを使用したい」という場合、HTMLの編集からタグのstyle属性に書き込むという方法もありますが、もう一つの方法として、「Google ドキュメントを使用する」という手も検討してみては如何だろうか。
Google ドキュメントはご存知の通り、文書ごとにCSSを適用することができるので、そのGoogle ドキュメントにてページを作成し、Google Sitesのページに埋め込むという方法で独自のレイアウトを可能とします。


サイトの編集を他のユーザーに任せる

Google ドキュメントで作成した文書、プレゼンテーション、スプレッドシートをGoogle Sitesにて、ページに挿入することによって公開できることはご存知だろうが、これをアクセス制限に利用することができる。
共同編集者にまではしたくないが、サイトの一部を他のユーザーに作成してほしい、という場合の手段として、他のユーザーを共同編集者にしなくとも、Google Docsにて作成してもらい、そのページをWebページとして公開してもらえば、後はそのページをGoogle Sitesのページに埋め込めば良いのです。



以下余談です。

Google Sitesは小規模のコミュニティ向け

サンプルサイトにもあるように、やはりGoogle Sitesは小規模のコミュニティ向けであることは間違いない。個人が使うにはあまりに自由度が低すぎること、そして、管理者や共同編集者間のコミュニケーションを助けるような機能が実装されていることから見ても、Google Sitesはそのようなコミュニティに使用されることを目的に作られていると言える。
個人が使うには機能が中途半端で持て余してしまう。


ガジェット有りきの仕様は改善すべき

もし、ガジェットを作成できれば、確かにできることの幅も広がるが、だからと言って、その作成方法を学ぼうという気になるだろうか? 少なくとも私は思わなかった。

How to Google Chart for Beginner

これだけ知っていればGoogle Chartが使えるようになる、というレベルを目指して、Google Chartの使い方を説明したいと思います。

必須パラメータ

必須パラメータは以下の3つです。
  • チャート データ(chart data)
  • チャート サイズ(chart size)
  • チャート タイプ(chart type)

チャート図を作成するには少なくとも、この3つを指定する必要があります。

チャートデータのデータ形式

Google Chartで扱えるデータ形式は3つあります。
  • テキストエンコード(Text Encode)
  • 簡易エンコード(Simple Encode)
  • 拡張エンコード(Extended Encode)

テキストエンコード
通常の使い方をする場合、扱うことができる値の範囲は0.0~100.0までとなっています。 数値をそのままデータとして扱えるため、これが一番扱いやすいデータ形式と言えるでしょう。
簡易エンコード
データとなる値を"A~Za~z0~9"の何れかの文字に置き換えて扱います。このため扱える値は0~61までとなります。0は"A"、61は"9"です。 例えば『23, 45, 61』というデータを渡すなら『chd=Xt9』という形になります。 詳しくはこちらをご覧下さい。
拡張エンコード
簡易エンコードと同じく、データとなる値を文字に置き換えるのですが、拡張エンコードは2文字で一つの値を表します。これにより、扱える値の範囲は0~4095までとなっています。 0は"AA"、4095は".."となります。 置き換える文字の種類は簡易エンコードで扱う文字に、さらに'-.'を加えたものとなります。 例えば『23, 45, 61』というデータを渡すなら『chd=AXAtA9』という形になります。詳しくはこちらで確認して下さい。

簡易エンコードと拡張エンコードの利点はURLが短くなることです。
しかし、URLを短くしなければならない理由がないのなら、変換(エンコード)する処理を必要としないテキストエンコードを使う方が無難でしょう。

データスケーリング

データスケーリングとは指定した範囲にデータが納まるように値を修正(パーセントに変換)することを指します。対象となるデータ形式はテキストエンコードのみです。

例えば、-1000~1000の範囲のデータがあるとします。通常のテキストエンコードであればこれを正しく表現することはできませんが、データスケーリングすることでそれを可能とします。
データスケーリングを行うには『chds=最小値,最大値』のように指定します。

Example
以下のチャート図では最小値に"-1000"、最大値に"1000"を指定し、-1000~1000の範囲のデータを表示しています。


これによって0.0~100.0の範囲の値という制限を気にせず、ほとんどのデータは表現できるはずです。

チャート サイズ

チャートサイズは『chs=幅x高さ』という形で指定します。幅(width)が"300"、高さ(height)が"200"ピクセルのサイズを指定するなら『chs=300,200』となります。
例えば棒グラフでは扱うデータの数によって幅を調整する必要があります。円グラフではデータに付けるラベルを使用する場合には、これも幅を調整する必要があります。

チャート タイプ

チャートタイプの種類は以下の16種類になります。
  • lc - 折れ線グラフ
  • lxy - 折れ線グラフ
  • bhs - 棒グラフ(横)
  • bvs - 棒グラフ(縦)
  • bhg - 棒グラフ(横)グループ化
  • bvg - 棒グラフ(縦)グループ化
  • p - 円グラフ
  • p3 - 円グラフ3D
  • v - ベン図
  • s - 散布図
  • ls - スパークライン
  • r - レーダー(直線)
  • rs - レーダー(曲線)
  • t - 地図
  • gom - Google-o-meter
  • qr - QR コード

どのタイプを使用するにしても、この他に様々なオプションやスタイルの指定を組み合わせてチャート図を作成することになるでしょう。
チャートタイプ、あるいは用途に合わせてテンプレートのようなものを作成しておくと便利です。

Example
$.gChart.pie3D = function(options){
  return (new $.gChart(this.merge({
    cht: this.chartType.pie3D,
    chs: '300x200',
    chco: 'ff69b4'
  }, options))).image();
}

Usage
$(document.body)
  .append($.gChart.pie3D({
    chd:bsData,
    chl:label,
    chco: '99cc00|cc6699',
    chs: '350x125',
    chtt:'Browser Share:May 2009'
}));



チャート タイトル

以前は日本語を使用できなかったようですが、現在は日本語を使用しても問題ないようです。
チャートタイトルの指定は『chtt=チャートタイトル』のように行います。
チャートタイトルの文字に対して、色と文字サイズを指定することが可能です。
スタイルの指定は『chts=カラー,フォントサイズ』という形になります。
色は赤、フォントサイズに13を指定するなら『chts=ff0000,13』とします。
スペースはプラス記号 (+) で指定する、となっていますが、実際にはそのまま空白を使用しても良いようです。


軸ラベル

軸ラベルとはチャート図のメモリの数値などを表すラベルのことを指しますが、この軸ラベルを指定する方法は全部で3つあります。

軸ラベル指定例:
  • 『chxr=0,0,100』
  • 『chxl=0:|0|20|40|60|80|100』
  • 『chxp=0,0,20,40,60,80,100』
上記3つで指定した値はチャート図の大きさにもよりますが、どれもほぼ同じ値を指定をしていることになります。
それぞれに特徴があるので、実際に使用するときにでも確認し、適宜使い分けて下さい。ここでの説明は割合させて頂きます。


以上、チャート図を作成するために必要な最低限の知識は得られたのではないかと思います。これ以上のことは実際に使用しながら覚えていけば良いのではないかと考えます。

色々なオプションやスタイルの指定方法を覚えるとこんなおかしな使い方もできるという例を一つ。
Google Chartでサッカーのシステム(フォーメーション)を表示してみました。



チャート図となるimg要素さえ生成できれば、Javascriptを使用できないGoogle Sitesでも利用することができます。
より良いコンテンツを作成するための一つのツールとしてGoogle Chartを利用してみては如何でしょうか。

jQueryのプラグインも作成しましたのでご利用下さい。


こちらは「あったら便利かも」おまけ程度にどぞ

余談:
意味もなく、タイトルを英語にしてみました。
英語を知らない人ほど横文字を使いたがるという傾向は私にも当てはまるようです。(>_<)

Recent Posts