SNSのいいね!ボタンを貼ろうと公式サイトに行くと、わけのわからないコードをコピペして貼るように指示されます。
なんとなくJavaScriptみたいだけど、呪文みたいで変なコード。
何かの事情があるんだろうけど、ソースが汚れるからいやだなあって思ったりしませんか。
なんでこんなにややこしくて、読みにくいコードなのか?
理由は2つあります。
1)どのページに貼っても影響しないようにするため。
2)プログラムの文字数を減らすため。
1)どのページに貼っても影響しないようにするため。
facebookのコードを見ると、
(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return;・・・
twitterのコードを見ると、
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';・・・
というように、ごちゃごちゃしてるし、最初からfunctionなんて書いてあってなんだかいきなり難しそう。
でもこれが「どのページに貼っても影響しないようにするしくみ」です。
ボタンを貼ろうとするページには、だいたいすでに何か他のJavaScriptが使われていたりします。
いいね!ボタンもJavaScriptなので、もともと使われているJavaScriptと影響しあっておかしくならないように、「独立して動作するように」こんな書き方にしているのです。
これは「無名関数」と呼ばれています。JSで同じ名前の変数を使ってしまうと影響しあってしまいます。
ですが、functionの中で使った変数だけは他のJSの変数に影響が出ないのです。
例えば、ページの表示用にidという変数をすでに使っていて、いいねボタンのプログラムでもidという変数を使ってしまうと、ページの表示に影響がでてしまいます。
これをなくすための「苦肉の策」です。
無名関数が「無名」なのも同じ理由で、他のJSの関数名とぶつかって影響が出ないようにするためです。
そもそもJavaScriptには「独立して動作する」というしくみがちゃんと備わっていなくて、functionの中でだけ独立した状態になるので、それを「ウラワザ的」に使っているのです。
で、さらにもう一つウラワザが必要で、最初に「(」やら「!」がついているのがそれ。
ただ「function」と書いただけでは「こんな関数がありますよ」と言っているだけで、関数がちゃんと呼び出されるまで実行はされません。ですが、関数を呼び出そうとしても、名前がない(無名関数)なので呼び出せないという・・。そこで「関数を作る」と「式を実行する」を組み合わせて「関数を作って実行する」というウラワザを使っています。それが「関数を( )で囲む」「関数の前に!を書く」という書き方。
頭に付いている「(」や「!」はそういう意味だったのです。
やりたいことは単純なのに、なんかウラワザ使いまくりですね。
これはそもそもJavaScriptが「一つのHTMLにいくつものJSプログラムを貼り付ける」という、現在の状況をあまり予測できずに生まれてきた言語だからのように思えます。
まあ〜、問題なく実現できてるけど、けっこう無理があるよね〜。
ソースを見てなんか汚いな〜って直感的に感じるのは、この無理な感じなんだと思います。
2)プログラムの文字数を減らすため。
それともう一つ汚く思わせているのが「文字数を減らす工夫」。
JavaScriptは1文字でも少ない方が速度が上がるし、コピペしたときに文字数が少ないと邪魔と思われにくいのでそうしてるんだと思います。
でも文字が少なくなって、名前が簡略化されると、CPUに都合が良くても、人間が見ると意味がわけわかりにくくなる。
さらに、プログラムの書き方にも「簡略形」があってそれを使うと、短くわかりにくくなります。
例えば「p=xxx?’http’:’https’」ていうのは「三項演算子」といってif文の簡略形です。
if (xxx) { p = http'; } else { p = 'https'; }
って書くのを1つの式にまとめて書いているのです。
これって、わかる人だけわかったらいいねん、っていうときに使う書き方です。
つまり、こんなプログラムをコピペさせようとしてるってことは、あなたは意味は考えなくてただ貼ればいいのですよ、という親切心と「どうせわからないでしょう」という意図も入ってるような・・
意味がわかりにくく作られているだけに相手を本当に信用してないとなかなか使うのは怖いと思うのですが、今ってだいたいあまり深く考えずにコピペされているような気がしますね。