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

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

Posted at June 12,2013 12:33 AM
Tag:[JavaScript]

ソーシャルボタンの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.参考サイト

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

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)