7

JavaScript初学者です。JavaScriptの勉強を兼ねて、slick.jsを読んでいます。
chromeでデバッグしながらslickのサイトを読んでみようと思い、

http://kenwheeler.github.io/slick/

を眺めていたところ、1041行目(2017/2/21現在)に、

dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';

というコードがあり、その直前まで(ブレークポイントを設定して)実行した状態で、

dsq.src""
disqus_shortname'slickcarousel'

となっているのを確認し、つづいて(chromeにて)ステップ実行、
直後に、dsq.srcの値を確認したところ、

"http://slickcarousel.disqus.com/embed.js"

となっておりました。

ここで質問です。

この先頭の"http:"はどうして付くのでしょうか?

2 件の回答 2

6

コードはここでしょうか

var disqus_shortname = 'slickcarousel';

(function() {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();

 まずURLの形式についてですが、プロトコル(http:とかhttps:)を省略し//から始まるフォーマットに関してはprotocol-relative URLと呼ばれていて、いわゆる「相対パス」の仲間です。URIの仕様(rfc2396, 3986あたり)でも明記されている正しい(validな)URIです。
 もっぱらの使途としては、ウェブサーバーへの接続プロトコルがhttpsおよびhttpどちらも使用可能な場合、どちらの場合でもセキュリティに関するエラーが発生するのを防ぐことができるという書き方(テクニック)です。ただしセキュリティ上の問題がなくもなくて(なのでエラーがでるのですが)、例えば異なるドメインのリソースにこの手法でアクセスするなどのケースは推薦されていません(参考)。セキュリティに関しては主旨から外れるというかいろいろ議論があるので参考程度にしましょう。
 このフォーマットのURLを使う場合、いずれにしても実際にリクエストを投げるためにエージェント(クライアント/ブラウザ)は相対パスから絶対パスを求めるため、このケースではプロトコルを補完することになります。
 セットしているのはHTMLScriptElementのsrcプロパティですね。仕様をたどると、HTMLScriptElementThe SCRIPT element > Attribute definitions srcBasic HTML data types > 6.4 URIsより:

Relative URIs are resolved to full URIs using a base URI. [RFC1808], section 3, defines the normative algorithm for this process.

ということで、プロパティに渡された値は絶対パスに展開されるので、これを読めばプロトコルが補完された値(絶対パス文字列)が入ることになります。

余計に言えば、

const str = '//' + disqus_shortname + '.disqus.com/embed.js';
console.assert(str === '//slickcarousel.disqus.com/embed.js');

const str_assign = dsq.src = str;
console.assert(str_assign === '//slickcarousel.disqus.com/embed.js');

console.assert(dsq.src !== '//slickcarousel.disqus.com/embed.js');

ということです。

5

http:https:のURIスキームを省略した場合、ブラウザの仕様としてスキームを補完するからです。
また、スキームの省略はGoogle等が推奨しています。
http://qiita.com/Sugima/items/785644372397595644ba

<!-- 非推奨 -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

<!-- 推奨 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。