小粋空間  -  a cheap joke and a play on words site

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

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

１．はじめに

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の前に「!」がついている理由を紹介します。

２．functionの前に「!」がついている理由

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

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

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

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

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

つまり、

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

は以下の5つ、

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

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

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

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

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

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

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

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

３．参考サイト

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

• エクスクラメーション ! の意味
• 即時関数(function(){ ... })()の別の書き方いろいろ