TopJavaScript > 2013年6月
2013年6月12日

ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由

June 12,2013 12:33 AM
Tag:[]
Permalink

ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由を調べてみました。

JavaScriptでfunctionの前に「!」がついている

1.はじめに

TwitterやPocketなどのソーシャルボタンのコードをみると、共通してscript要素の中にあるfunctionの前に「!(エクスクラメーション)」がついています。

Twitterの場合

<a href="https://twitter.com/share" class="twitter-share-button" data-via="yujiro" data-lang="ja" data-size="large">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Pocketの場合

<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>

以前「jQueryプラグインの先頭にセミコロンがある理由」をエントリーしていたので、当初これと同じような理由かと思っていたら全然違っていました。

ということでfunctionの前に「!」がついている理由を紹介します。

2.functionの前に「!」がついている理由

結論から言うと「!」はJavaScriptの即時関数を意味します。以下解説です。

JavaScriptの即時関数のシンタックスは通常、

(function(){ ... })();

という形式なのですが、function全体を括っているカッコの代わりにJavaScriptの単項演算子「+」「-」「!」「void」「typeof」を使うこともできるようです。

また単項演算子を利用すると、後方の閉じカッコを省略できるらしいです。

つまり、

(function(){ ... })();

は以下の5つ、

!function(){ ... }();
+function(){ ... }();
-function(){ ... }();
void function(){ ... }();
typeof function(){ ... }();

に書き直せるということになります。サンプルを作って確認したところすべて動作しました。

最近のソーシャルボタンのJavaScriptではこの中の「!」をお作法として使っているようです。

ちなみに「!」を用いると、返却値がbool型にキャストされるとのことです。

3.参考サイト

参考サイトは以下です。ありがとうございました。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3