

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

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

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

[code]

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

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

`dsq.src` は `""` 、  
`disqus_shortname` は`'slickcarousel'`

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

[code]

    "http://slickcarousel.disqus.com/embed.js"
    
[/code]

となっておりました。

ここで質問です。

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


CC BY-SA 3.0
2017-02-21T13:51:27.723
32845
2017-02-24T17:46:29.990
2017-02-24T17:46:29.990
3054
20765
question
javascript url
文字列先頭が'//'で始まっているようにしか見えない文字列結合で、先頭に’http:'が付加されるのはなぜ？


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

[code]

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


CC BY-SA 3.0
2017-02-21T14:02:54.753
32848
2017-02-21T14:02:54.753
2238
32845
answer


コードはここでしょうか

[code]

    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);
    })();
    
[/code]

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

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

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

余計に言えば、

[code]

    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');
    
[/code]

ということです。


CC BY-SA 3.0
2017-02-21T14:37:17.440
32851
2017-02-21T14:55:33.690
2017-02-21T14:55:33.690
32845
answer