読者です 読者をやめる 読者になる 読者になる

Buno Journals

It's what I do that defines me.

JSFiddleで外部jsライブラリを読み込む

JavaScript プログラミング

開眼!  JavaScript ―言語仕様から学ぶJavaScriptの本質

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

これまで、JSは対応が必要になったら使う程度で、じっくり学習したことがなかったので、 書籍で少しずつ勉強している。

JSFiddle

jsfiddle.net

まず、この便利な実行環境のサービスをを知らなかった。 詳しくは 以下で。

kachibito.net

Underscore.js

書籍の中でUnderscore.jsが紹介されている。

Underscore.js

github.com

underscore.js または、圧縮された underscore-min.js を読み込んで利用する。

この説明も外部リソースに譲る。

http://dotinstall.com/lessons/basic_underscorejsdotinstall.com

JSFiddleで外部jsライブラリを読み込む

正当なやり方は、JSFiddleの画面左側にある"External Resources"から行う。

f:id:bunoacts:20160616132715p:plain

ここをクリックするとフォームが現れるので、ライブラリのURIを入力して+マークを押せば設定完了だ。

適切なCDNを利用する

外部ライブラリURIとして、https://raw.githubusercontent.com/jashkenas/underscore/master/underscore-min.js のような、github上のrawファイルを指定してはいけない。

f:id:bunoacts:20160616133856p:plain

f:id:bunoacts:20160616133932p:plain

Refused to execute script from 'https://raw.githubusercontent.com/jashkenas/underscore/master/underscore-min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

githubはCDNではないというアラートが表示される。実際、 MINEタイプが 'text/plain' となり、jsのライブラリとして実行することができない。

単純に動作を確認したいのであれば、cdnjsでホストされているURIを指定したり、

cdnjs.com

RawGitというサービスで、githubから変換されたURIを得ることができるので、これを指定する。

rawgit.com

上記サービスは、本番環境での利用は非推奨なので、そいう場合は自前でCDNを用意しなければいけない。

追記:Google Hosted Libraries

developers.google.com

jQuery等、有名なライブラリはGoogleがホストしているので、ここから読み込むのが良さそうだ。

参考情報

githubのjavascriptやcssをrawgit使ってCDN経由ぽく読み込んで使ってみるテスト for jsfiddle - tweeeetyのぶろぐ的めも

CDN代わりにgithubを使いたい場合は外部サービスrawgithubを利用しよう - Qiita