JavaScriptのローカル実行とPlayground実行の違い

前回までのまとめ。

背景

CodePen, jsfiddle, jsdo.itなどのPlaygroundでHTML/CSS/JSを作成することが増えてきた。

しかし、Playgroundはローカルで実装するときと異なるコードを書く必要がある。しかも異なる点が多く、影響も大きい。以前、その違いを失念して無為に時間を過ごした。そこで、ローカルとPlaygroundとの違いをまとめることにした。

前回まで

• JavaScriptをローカルで実行するときにはwindow.onloadが必要
• JavaScriptをPlaygroundで実行するときはタグやコードを一部省略した形で実装する必要がある
• JavaScriptの外部ライブラリをURL参照するときはCDNでバージョン指定すべし

今回

• ローカルではファイル名とパスとその参照が必要である
• ライセンス表記は実行結果に書かねばならない場合がある

前回ほどクリティカルではないが、ソースコードを同一にできない原因である。

ファイル名とパスとその参照

Playgroundでは不要でもローカルでは必要。

ファイル構成

• root/
  • main.html
  • test.js

コード

main.html

<script src="test.js">

test.js

window.onload = function(){
};

ライセンス表記は実行結果に書かねばならない場合がある

もしPlaygroundにReadMeやリンクが書けるDescriptionなどがなければ、実行結果に書かねばならない。

ソースコードをローカルと同一にできない原因のひとつ。本題のコードと混在させるとわかりにくくなってしまうので嫌。

所感

5項目も差異があった。今までごまかしてきたが、道理で手間がかかるわけだ。これらが原因で動作しなくなることすら起こりうるし、実際そうなったため大問題である。

それくらい別に大したこと無いとも思うが、忘れてしまうから後に問題となる。テンプレート作成などして忘れてもいいような状況をつくりたいが、課題が増えていく一方で、その課題すら忘れてしまう。