Type Checking in JavaScript - Japanese Only

みなさまどうもおはこんばんにちは。

続きましてJavaScriptにおいての型(データ型)の判定について色々と解説していきたと思います。

と、その前にお忙しい人のためにまとめ書いときましたので置いときます。

// JavaScriptの型判定用の関数です。1つ用意してあげるととっても便利です。(・ω<)ﾃﾍﾍﾟﾛ
var isType = function(x){
    return (x != x)? "NaN": (x === Infinity || x === -Infinity)? "Infinity": Object.prototype.toString.call(x).slice(8, -1);
};

// 実行結果はこんな感じです。
console.log(isType(1)); // Number
console.log(isType(NaN)); // NaN
console.log(isType(Infinity)); // Infinity
console.log(isType('abc')); // String
console.log(isType(true)); // Boolean
console.log(isType(null)); // Null
console.log(isType(undefined)); // Undefined
console.log(isType(/abc/)); // RegExp
console.log(isType((new Date()))); // Date
console.log(isType((new Error()))); // Error
console.log(isType([])); // Array
console.log(isType({})); // Object
console.log(isType(function(){})); // Function
console.log(isType(document.querySelector("body"))); // HTMLBodyElement
console.log(isType(document.getElementsByTagName("body"))); // HTMLCollection

では解説を進めていきたいと思います。

まずJavaScriptはデータの型を意識することなく色々な処理を構築することができます。変数周りの処理だと以下のような感じになりますね。

var x; // 型を気にせずになんでも『var』を使用してOKです。
x = 1; // 何を入れてもOKです。
x = true; // 型が違うもので上書きできます。
x = null; // 型が違うもので上書きできます。

y = 1; // グローバルとして扱われてOKならば『var』の記述すら必要ないです。何を入れてもOKです。
y = true; // 型が違うもので上書きできます。
y = null; // 型が違うもので上書きできます。

JavaScriptに限らず最近主流となっている言語はこのような感じで型を意識することなく、色々な処理を構築することができるわけでございますがここにちょっとした落とし穴があります。以下のサンプルを見てみて下さい。

var fn = function(x){
    return x * 2;
};

上記のサンプルはただ仮引数『x』の値を2倍して返すっていう超簡単な処理です。

お察しの良い方だとすぐにお分かりになるかと思いますが、この処理は一点大きな穴があったりします。そうです、仮引数『x』が通常の数値であるかどうかの判定処理がごっそり抜けちゃってますね。

var fn = function(x){
    // この辺に仮引数『x』が通常の数値であるかどうかの判定処理を入れる必要があったりなかったりします。
    return x * 2;
};

仮引数『x』に絶対に通常の数値しか渡ってこない、というならば判定処理はいりません。ですがそうとも限らない事が多いのが現実です。

例えば上記の関数の引数に間違えて文字列『x』を渡して実行したとしましょう。そうすると文字列『x』を2倍するという訳のわからない処理が完成します。

しかもエラーになってくれればまだ良いものの、JavaScriptちゃんでは文字列を乗算すると『NaN』という値を何食わぬ顔で返してくるのでエラーにならず、パッと見でミスに気づけない可能性も高かったりします。

JavaScriptでは言語の特性上、フォーム系の要素(input[type=text]とかtextareaとか)に入力されたデータを扱うことが多いので上記のような型の判定処理の書き忘れには要注意です。入力フォームだと何でも入力できちゃったりしますからね。

というわけでJavaScriptでの型の判定方法について色々と確認していきましょう。

(´-`).｡oO(JavaScriptでの型判定はかなりカオスなのでめっちゃ頑張って下さい...)

console.log(5 / 0); // 正の無限大なので『Infinity』と出力されます。
console.log(-5 / 0); // 負の無限大なので『-Infinity』と出力されます。

昔は『typeof演算子』等と他の処理を組み合わせて型判定をすることが多かったのですが、最近主流になっている手法として『Object.prototype.toString.call()』を使用するテクニックがあるのでこちらを紹介したいと思います。

console.log(typeof 1);

"number"

console.log(typeof 1); // number
console.log(typeof "hoge"); // string
console.log(typeof true); // boolean
console.log(typeof undefined); // undefined
console.log(typeof function(){}); // function
console.log(typeof []); // object
console.log(typeof {}); // object
console.log(typeof null); // object
console.log(typeof NaN); // number
console.log(typeof Infinity); // number

var x = new Number(1);
console.log(typeof x); // 『object』になっちゃいます。

『Object.prototype.toString.call()』の基本的な使い方は『()』の中に判定したいデータを入れてあげればOKで、そうするとデータの判定結果を文字列で教えてくれます。数値『1』を判定するとするとこういう記述になりますね。

Object.prototype.toString.call(1);

これを実行させるとこうなります。

"[object Number]"

文字列『[object Number]』が返ってきてますね。

色々なものを判定してみるとこんな感じになります。

console.log(Object.prototype.toString.call(1)); // [object Number]
console.log(Object.prototype.toString.call(NaN)); // [object Number]
console.log(Object.prototype.toString.call(Infinity)); // [object Number]
console.log(Object.prototype.toString.call('abc')); // [object String]
console.log(Object.prototype.toString.call(true)); // [object Boolean]
console.log(Object.prototype.toString.call(null)); // [object Null]
console.log(Object.prototype.toString.call(undefined)); // [object Undefined]
console.log(Object.prototype.toString.call(/as/)); // [object RegExp]
console.log(Object.prototype.toString.call((new Date()))); // [object Date]
console.log(Object.prototype.toString.call((new Error()))); // [object Error]
console.log(Object.prototype.toString.call([])); // [object Array]
console.log(Object.prototype.toString.call({})); // [object Object]
console.log(Object.prototype.toString.call(function(){})); // [object Function]
console.log(Object.prototype.toString.call(document.querySelector("body"))); // [object HTMLBodyElement]
console.log(Object.prototype.toString.call(document.getElementsByTagName("body"))); // [object HTMLCollection]

ある程度ちゃんと判定できてそうだなと思って頂けたと思います。

しかし、ちょいと数値『1』と『NaN』と『Infinity』に注目してみてください。全部『[object Number]』になっちゃってますね。

console.log(Object.prototype.toString.call(1)); // [object Number]
console.log(Object.prototype.toString.call(NaN)); // [object Number]
console.log(Object.prototype.toString.call(Infinity)); // [object Number]

『NaN』と『Infinity』は通常の数値と特性が大分違うので、使いやすい判定結果を出したいならば別にしてしまうのがベストです。というわけで『Object.prototype.toString.call()』を実行するまえに『NaN』と『Infinity』の判定を入れてしまいましょう。

まず『Infinity』の判定方法ですが、『===』を使用して比べちゃえばOKです。ただし、『Infinity』には符号が付く場合があるのでそこは間違えないようにして下さい。

if(x === Infinity || x === -Infinity){ // 変数『x』が『Infinity』かどうかを判定するとしたらこんな感じになります。

}

そして『NaN』の判定ですが、ここがちょっとややこしいです。JavaScriptにおいての『NaN』は通常の方法だと判定不可能だったりします。以下のサンプルをみてみましょう。『NaN』と『NaN』を比べています。

console.log(NaN === NaN);

これを実行させるとあら不思議。

false

『false』になっちゃいます。比較演算子を『==』に変えても『false』です。

「どういうことなんだべ...」ってなっちゃった方多いかと思います。これは『NaN』という値の本質が「数値っぽいけど表現できない何か」とされていることに起因しています。

例えば『0 / 0』と『"初音ミク" / 0』という演算を行った場合は両方共『NaN』になりますが、『0 / 0』と『"初音ミク" / 0』の演算結果が同値であるのはちょっと変ですよね。あくまでも『数値っぽいけど表現できない何か』になっただけなので、もし表現できれば違う値になっているはずです。

var x = 0 / 0, // 『NaN』が返って来ます。
    y = "初音ミク" / 0; // こちらも『NaN』が返って来ます。

console.log(x === y); // 変数『x』と変数『y』は『表現できない』だけで同値ではありません。なので『false』と出力されます。

こういう理由からJavaScriptでの『NaN === NaN』は全て『false』になる、という風に設計されています。

じゃあ『NaN』かどうかを判定するためにどうすれば良いのか、というと以下の記述で判定できます。これは『NaN』同士が比較された時に『false』となることを利用したテクニックになりますね。

var x = NaN;

console.log(x != x); // 『NaN』だった場合に『true』となります。『!==』でも問題なく判定できますが、この場合は少し曖昧な『!=』の方が無難かもしれません。

console.log(isNaN(NaN)); // true
console.log(isNaN("NaN")); // true
console.log(isNaN(1)); // false
console.log(isNaN(true)); // false
console.log(isNaN("abc")); // true
console.log(isNaN({})); // true

var x = NaN;

console.log(x != x); // 『NaN』だった場合に『true』となります。

isFinite(1); // 使い方はこんな感じです。

console.log(isFinite(1)); // true
console.log(isFinite("hoge")); // false
console.log(isFinite(true)); // true
console.log(isFinite(undefined)); // false
console.log(isFinite(function(){})); // false
console.log(isFinite(NaN)); // false
console.log(isFinite(Infinity)); // false
console.log(isFinite([])); // true
console.log(isFinite({})); // false
console.log(isFinite(null)); // true

console.log(Number.isFinite(1)); // true
console.log(Number.isFinite("hoge")); // false
console.log(Number.isFinite(true)); // false
console.log(Number.isFinite(undefined)); // false
console.log(Number.isFinite(function(){})); // false
console.log(Number.isFinite(NaN)); // false
console.log(Number.isFinite(Infinity)); // false
console.log(Number.isFinite([])); // false
console.log(Number.isFinite({})); // false
console.log(Number.isFinite(null)); // false

if(typeof x === "number" && isFinite(x)){ // 通常の数値ならば実行されます。
    // ここに処理。
}

var isNumber = function(x){ // 関数にするとこんな感じです。
    return (typeof x === "number" && isFinite(x))? true: false;
}

var isNumber = function(x){ // 関数にするとこんな感じです。
    return (typeof x === "number" && isFinite(x))? true: false;
}

var x = new Number(1); // 通常とは違った形で数値を定義します。

isNumber(x)// 『typeof演算子』でチェックした場合の変数『x』は『object』という判定になってしまうため、この処理は『false』になっちゃいます。

では上記の事を踏まえて型判定を行ってくれる関数をちょいと作ってみましょう。こんな感じになります。

// if文の場合。
var isType = function(x){
    if(x != x) return "NaN";
    else if(x === Infinity || x === -Infinity) return "Infinity";
    else return Object.prototype.toString.call(x).slice(8, -1);
};

// 三項演算子の場合。上記と処理結果は同じです。
// 多少読みづらくなりますがこういう処理はメンテナンスをする必要がないのでコード量を削減したり処理速度を上げたりする方向で構築してしまうのがオススメです。
var isType = function(x){
    return (x != x)? "NaN": (x === Infinity || x === -Infinity)? "Infinity": Object.prototype.toString.call(x).slice(8, -1);
};

上記の構造は簡単で、『NaN』と『Infinity』を判定したあとに『Object.prototype.toString.call()』を実行しているだけです。

ちょっとした改善として、指定した位置で文字をカットしてくれる『.slice()』を使って『Object.prototype.toString.call()』で返ってくる文字列の『[object 』と『]』を削除しています。この辺はお好みでどうぞ。

実行してみるとこんな感じの結果になりますね。

console.log(isType(1)); // Number
console.log(isType(NaN)); // NaN
console.log(isType(Infinity)); // Infinity
console.log(isType('abc')); // String
console.log(isType(true)); // Boolean
console.log(isType(null)); // Null
console.log(isType(undefined)); // Undefined
console.log(isType(/abc/)); // RegExp
console.log(isType((new Date()))); // Date
console.log(isType((new Error()))); // Error
console.log(isType([])); // Array
console.log(isType({})); // Object
console.log(isType(function(){})); // Function
console.log(isType(document.querySelector("body"))); // HTMLBodyElement
console.log(isType(document.getElementsByTagName("body"))); // HTMLCollection

大体のデータは型判定できているかと思います。

Object.prototype.toString = function(){}; // これOKです。他の言語では必ず怒られるパターンだったりしますが、JavaScriptではなぜか怒られません。

Object.prototype.toString.call(1); // 上書きされちゃったのでいつもの動作はされません。

いかがでしょうか。JavaScriptの型判定はかなりカオスなので、上記のような判定を行ってくれる関数をひとつ用意してあげると構築が大分楽になりますのでぜひ使ってみてください。

尚、この『Object.prototype.toString.call()』を使用した判定方法は色々なウェブサイトで紹介されているので、上記の関数が使いにくかったら色々探してみるのも一興です。色々なパターンが見つかると思います。もちろん自分で作っちゃうのもありです。その辺は適宜対応してしまって下さい。

というわけで以上になります。次の記事では上級者向けの論理演算子の挙動について色々とやっていきましょう。ではこの辺で失礼致します。

This article was written by Sakurama.

Author's beloved small mammal

桜舞 春人 Sakurama Haruto A Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him.

If you find any errors or copyright issues, please contact us.

Home

Previous

Next

Tweet

シェアする