やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > ワークフロー > JavaScriptをローカルで実行するときにはwindow.onloadが必要

JavaScriptをローカルで実行するときにはwindow.onloadが必要

ワークフロー JavaScript

忘れると正常に動作しない。

開発環境

背景

以前、window.onloadを忘れていて2時間悩んだ。

戒めとして記事にまとめる。

戒め

ローカルのブラウザで実行するときはwindow.onloadが必要である。

CodePenなどのPlaygroundsでは必要ないから忘れやすいので注意。

実行の流れ

Playground

  1. 実装中HTMLの<script>タグから外部参照ライブラリを読み込む
  2. 実装中JavaScriptを読み込む

ローカル

  1. 実装中HTMLの<script>タグから外部参照ライブラリを読み込む
  2. 実装中HTMLの<script>タグから今回実装するJavaScriptを読み込む
  3. 今回実装するにあるwindow.onload関数を実行する

window.onloadの用途

window.onload関数に処理内容をふくめることで、すべての外部参照したライブラリすべてのロードが完了した後で実行できるようになる。

逆に、window.onload関数にふくめないと、外部参照ライブラリなどのロード完了を待たずに実行されてしまう。

もしwindow.onloadを忘れると、DOM要素の操作がまったく反映できなかったり、なぜか<head>と<body>の間に挿入されたり、意味不明なことになる。というか、なった。しっかりロードが完了してから実行するためにwindow.onloadが必要。

ソースコード

main.html

<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
</body>
</html>

test.js

window.onload = function(){
  d3.select("body")
  .selectAll("p")
  .data([1,2,3])
  .enter()
  .append("p")
  .text(function(d) {return d;});
};

上記のコードは<body>内に以下の3つのp要素を作成する。

<p>1</p>
<p>2</p>
<p>3</p>

所感

ローカルとPlaygroundの違いは結構ある。1つ1つは小さくても、総合すると思ったより面倒くさい。