<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>is &#8211; Mach3.laBlog</title>
	<atom:link href="https://blog.mach3.jp/tag/is/feed" rel="self" type="application/rss+xml" />
	<link>https://blog.mach3.jp</link>
	<description></description>
	<lastBuildDate>Sun, 08 Dec 2013 01:02:16 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>
	<item>
		<title>&#034;isXxx&#034; &#8211; Alphabetical Advent Calendar 2013</title>
		<link>https://blog.mach3.jp/2013/12/08/jaac2013-i-isxxx.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Sun, 08 Dec 2013 01:02:16 +0000</pubDate>
				<category><![CDATA[Laboratory]]></category>
		<category><![CDATA[Advent Calendar 2013]]></category>
		<category><![CDATA[is]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[typeof]]></category>
		<guid isPermaLink="false">http://blog.mach3.jp/?p=3677</guid>

					<description><![CDATA[&#8220;I&#8221; は is の &#8220;I&#8221; isXxx 値の型を取得する為の isString() や isArray() 等のメソッド群の話です。 もともと実装されているものも多少はあ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>&#8220;I&#8221; は is の &#8220;I&#8221;</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh4.googleusercontent.com/-VTvdsUtEL9k/UqR4iNHHrZI/AAAAAAAACYg/cgia6VJwIWU/s400/ac2013-i.png" alt="I"/></figure>



<p></p>



<span id="more-3677"></span>



<h2 class="wp-block-heading">isXxx</h2>



<p>値の型を取得する為の isString() や isArray() 等のメソッド群の話です。 もともと実装されているものも多少はありますが、フレームワークやライブラリのメソッドを利用するケースがほとんどでしょう。</p>



<h3 class="wp-block-heading">typeof が期待できない</h3>



<p>そもそも JavaScript には typeof 演算子があるのですが、この子があまり頼りにならず、期待している値を返してくれないケースが多いです。 例えば、文字列かどうかを判別する為に typeof を使用したとします。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">typeof</span> <span class="hljs-string">"foo"</span>; <span class="hljs-comment">// "string"</span>
<span class="hljs-keyword">typeof</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">String</span>(<span class="hljs-string">"foo"</span>); <span class="hljs-comment">// "object"</span>
</code></span></pre>


<p>両方とも &#8220;string&#8221; を返して欲しいところなのですが、 new を使って String のインスタンスを生成した場合は、typeof で &#8220;object&#8221; が返されてしまいます。</p>



<p>また、null を typeof で調べても &#8220;object&#8221; が返ってきてしまう現象も知られています。 ここは &#8220;null&#8221; を期待したいところです。（これは将来的に &#8220;null&#8221; を返すように改善される予定だそうです）</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">typeof</span> <span class="hljs-literal">null</span>; <span class="hljs-comment">// "object"</span>
</code></span></pre>


<p>厳密に対応したい場合は、また違った工夫が必要の様です。</p>



<h3 class="wp-block-heading">自作関数で判別してみる</h3>



<p>広く使われているのが <strong>Object.prototype.toString</strong> を借用してみるタイプです。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> isString = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">str</span>)</span>{
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> str === <span class="hljs-string">"string"</span>
    || <span class="hljs-built_in">Object</span>.prototype.toString.call(str) === <span class="hljs-string">"&#91;object Strng]"</span>;
};

isString(<span class="hljs-string">"foo"</span>); <span class="hljs-comment">// true</span>
isString(<span class="hljs-keyword">new</span> <span class="hljs-built_in">String</span>(<span class="hljs-string">"foo"</span>)); <span class="hljs-comment">// true</span>
</code></span></pre>


<p>toString さんをお借りして文字列化してみると、大抵 &#8220;object Xxx&#8221; という形で返してくれるので、 この &#8220;Xxx&#8221; の部分をチェックする事でどんなオブジェクトなのかを知る事ができます。 あるいは <strong><code>instanceof String</code></strong> なども使えますが、文字列で判別できた方が関数を共通化しやすいですね。</p>



<p>試しに共通化してみましょう。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> isType = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value, type</span>)</span>{
    <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.prototype.toString.call(value).toLowerCase()
        === (<span class="hljs-string">"&#91;object "</span> + type + <span class="hljs-string">"]"</span>).toLowerCase();
};

isType(<span class="hljs-keyword">new</span> <span class="hljs-built_in">String</span>(<span class="hljs-string">"foobar"</span>), <span class="hljs-string">"string"</span>); <span class="hljs-comment">// true</span>
isType(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(), <span class="hljs-string">"array"</span>); <span class="hljs-comment">// true</span>
isType(<span class="hljs-literal">null</span>, <span class="hljs-string">"null"</span>); <span class="hljs-comment">// true</span>
</code></span></pre>


<p>こんな感じに、色々なライブラリに実装されています。 （勿論、もっとしっかり作られています）</p>



<h2 class="wp-block-heading">jQueryの場合</h2>



<p>jQuery でのタイプの判別は、主として <strong>type()</strong> で行われています。 「きちんと想定した物を返してくれる typeof」といったような感じで利用できます。 type の中では <strong>Object.prototype.toString</strong> で返される文字列を元にして判別し、 boolean, number, string, function, array, date, regexp, object, error のいずれかを返してくれます。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript">$.type(<span class="hljs-keyword">new</span> <span class="hljs-built_in">String</span>(<span class="hljs-string">"foo"</span>)); <span class="hljs-comment">// "string"</span>
$.type(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number">100</span>)); <span class="hljs-comment">// "array"</span>
$.type(<span class="hljs-literal">true</span>); <span class="hljs-comment">// "boolean"</span>
</code></span></pre>


<p>その他良く使用されそうな物や、より細かく判別したい物は、 <strong>isArray</strong> や <strong>isFunction</strong> といった形で定義されています。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript">$.isArray(&#91;]); <span class="hljs-comment">// true</span>
$.isFunction(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{}); <span class="hljs-comment">// true</span>
$.isPlainObject({}); <span class="hljs-comment">// true</span>
$.isEmptyObject({}); <span class="hljs-comment">// true</span>
</code></span></pre>


<h2 class="wp-block-heading">underscore.js の場合</h2>



<p>underscore.js にも多くの <strong>isXxx</strong> メソッドが実装されています。</p>



<p>arguments, function, string, number, date, regexp の6つについてはjQuery同様に Object.prototype.toString をコールしてその文字列から判別しています。 <strong>toString</strong> は Object.prototype.toString を参照しています。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript">each(&#91;<span class="hljs-string">'Arguments'</span>, <span class="hljs-string">'Function'</span>, <span class="hljs-string">'String'</span>, <span class="hljs-string">'Number'</span>, <span class="hljs-string">'Date'</span>, <span class="hljs-string">'RegExp'</span>], <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">name</span>) </span>{
    _&#91;<span class="hljs-string">'is'</span> + name] = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">obj</span>) </span>{
        <span class="hljs-keyword">return</span> toString.call(obj) == <span class="hljs-string">'&#91;object '</span> + name + <span class="hljs-string">']'</span>;
    };
});
</code></span></pre>


<p><strong>isArray</strong> はネイティブで実装されている <strong>Array.isArray</strong> があれば それを使用するようになっています。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript">_.isArray = nativeIsArray || <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">obj</span>) </span>{
    <span class="hljs-keyword">return</span> toString.call(obj) == <span class="hljs-string">'&#91;object Array]'</span>;
};
</code></span></pre>


<p>こちらは undefined を判別する関数ですね。 undefined は代入されてしまう可能性があるので、かならず undefined を返す void を使用しています。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript">_.isUndefined = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">obj</span>) </span>{
    <span class="hljs-keyword">return</span> obj === <span class="hljs-keyword">void</span> <span class="hljs-number">0</span>;
};
</code></span></pre>


<p>その他、なるほどと思わせるような方法で書かれている物もあるので、 暇があれば underscore.js のコードを一通り目を通してみても、何か新しい発見があるかもしれませんね。</p>



<h2 class="wp-block-heading">参考資料</h2>



<ul class="wp-block-list">
<li><a href="https://developer.mozilla.org/ja/docs/JavaScript/Reference/Operators/instanceof">instanceof &#8211; JavaScript | MDN</a></li>



<li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/typeof">typeof 演算子 &#8211; JavaScript | MDN</a></li>



<li><a href="http://jquery.com/">jQuery</a></li>



<li><a href="http://underscorejs.org/">Underscore.js</a></li>
</ul>



<h2 class="wp-block-heading">追記</h2>



<dl>
<dt>2013/01/22</dt>
<dd>誤植修正（Playing =&gt; Plain)</dd>
</dl>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
