JavaScriptのonloadについて解説します

Javascript
プログラミング言語

公開日時: 2021-02-24 　更新日時: 2021-10-07

この記事でわかること

システム エンジニア: JavaScriptのonloadについて教えてください。

プロジェクト マネージャー: JavaScriptが実行されるタイミングによってはうまく動作しないのですが、それを解決するのがonloadです。

JavaScriptのonloadとは？

JavaScriptのonloadは、Windowsインターフェイスのメソッドです。
具体的には以下のような使い方をします。

<script>
window.onload = function() {
    alert('画面が表示されました。');
}
</script>

window.onload = function() {

alert('画面が表示されました。');

}

</script>

こうすることによって、function内の処理を画面を全部読み込んだ後に実行することができます。このonload、どのような場合で使用すれば良いのでしょうか。

JavaScriptを記述できる場所

onloadの使い道を知るには、まずJavaScriptがブラウザ上でどのようなタイミングで処理されるのかを理解する必要があります。

ブラウザで表示されるHTMLは上から順に実行されますが、JavaScriptはheadタグ内にも、bodyタグ内にも記述できます。

<html>
<head>
<script>
// JavaScriptを記述できる
</script>
</head>
<body>
<script>
// JavaScriptを記述できる
</script>
</body>
</html>

<html>

<head>

// JavaScriptを記述できる

</script>

</head>

<body>

// JavaScriptを記述できる

</script>

</body>

</html>

headタグ内にJavaScriptを記述した場合

headタグにJavaScriptを記述すると、bodyタグ内のHTMLコードと分けることが出来るのでスマートです。しかし、以下のような処理をheadタグに記述するとどうなるでしょうか。

<html>
<head>
<script>
var element = document.getElementById("test");
element.innerHTML = "テストです。";
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>

<html>

<head>

var element = document.getElementById("test");

element.innerHTML = "テストです。";

</script>

</head>

<body>

</body>

</html>

処理の順番の関係でJavaScriptが正しく動作しない

上記JavaScriptサンプルは、getElementByIDでid属性がtestのdivタグを取得し、innerHTMLで「テストです。」というテキストを設定しています。しかし、これを実行しても何も表示されません。その理由は、上記で説明した通りHTMLが上から順に実行されるからです。

headタグのJavaScriptが実行される時点ではまだdivタグが読み込まれてないため、取得することができないのです。コンソールでは以下のようなエラーが出ます。

Uncaught TypeError: Cannot set property 'innerHTML' of null

1	Uncaught TypeError: Cannot set property 'innerHTML' of null

JavaScriptを後に実行すれば解決？

上記問題は、divタグの後にJavaScriptの処理を記述すれば解決できます。以下を実行すれば、「テストです。」と表示されます。

<html>
<head>
</head>
<body>
<div id="test"></div>
<script>
var element = document.getElementById("test");
element.innerHTML = "テストです。";
</script>
</body>
</html>

<html>

<head>

</head>

<body>

var element = document.getElementById("test");

element.innerHTML = "テストです。";

</script>

</body>

</html>

headタグにJavaScriptを記述するには？

今回のケースをMVCという設計概念に当てはめると、HTMLはV（ビュー）でJavaScriptはC（コントローラー）です。VとCは混在させず分離するべきです。JavaScriptをbodyタグの一番最後に記述すればまず問題はありませんが、headタグにまとめた方がスマートでしょう。

HTMLの先頭のheadタグ内にJavaScriptをまとめたい場合はどうすれば良いのでしょうか。そうしたい場合に、windows.onloadが役立つのです。

onloadを使用すればheadタグでも問題ない

以下のようにonloadを使用すると、JavaScriptの処理がheadタグ内でも「テストです。」と表示されます。onloadで指定した関数は、HTMLが全て読み込まれた後に実行されるのです。

<html>
<head>
<script>
window.onload = function() {
    var element = document.getElementById("test");
    element.innerHTML = "テストです。";
}
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>

<html>

<head>

window.onload = function() {

var element = document.getElementById("test");

element.innerHTML = "テストです。";

}

</script>

</head>

<body>

</body>

</html>

bodyタグのonloadイベントも使える

window.onload以外にbodyタグにonloadイベントを指定することができます。以下のようにしても上記サンプルと同じ動作をします。

<html>
<head>
<script>
function work() {
    var element = document.getElementById("test");
    element.innerHTML = "テストです。";
}
</script>
</head>
<body onload="work()">
<div id="test"></div>
</body>
</html>

<html>

<head>

function work() {

var element = document.getElementById("test");

element.innerHTML = "テストです。";

}

</script>

</head>

</body>

</html>

onloadが複数あると上手く動作しない

onloadには1つ問題点があります。それは複数のonloadがあると期待通りの動作をしてくれない事です。例えば以下のようにonloadが2つあるとします。

window.onload = function() {
    alert("一番目");
}
window.onload = function() {
    alert("二番目");
}

window.onload = function() {

alert("一番目");

}

window.onload = function() {

alert("二番目");

}

実行すると「二番目」だけが表示されて一番目は出ません。最後にあるonloadしか実行されないのです。

addEventListenerを使えば解決

上記問題はaddEventListenerを使えば解決します。以下のようにしましょう。

window.addEventListener('load', function() {
  alert("一番目");
})
window.addEventListener('load', function() {
  alert("二番目");
})

window.addEventListener('load', function() {

alert("一番目");

})

window.addEventListener('load', function() {

alert("二番目");

})

これで一番目と二番目が両方表示されます。

必要ならDOMContentLoadedを使用する

window.onloadも、addEventListener(‘load’～)も、ブラウザが全てのリソースを読み込んだ後に実行されます。しかし、それでは遅い場合が考えられえます。画像がなかなか読み込まれないとJavaScriptの処理がいつまでも実行されません。

そこでDOMのツリー構造が読み込まれた時点でJavaScriptを実行したい場合は、DOMContentLoadedイベントを使用します。

window.addEventListener('load', function() {
  alert("一番目");
})
window.addEventListener('DOMContentLoaded', function() {
  alert("二番目");
})

window.addEventListener('load', function() {

alert("一番目");

})

window.addEventListener('DOMContentLoaded', function() {

alert("二番目");

})

上記を実行すると、二番目が一番目より先に表示されます。DOMContentLoadedイベントの方がloadイベントより早いということですね。

システム エンジニア: JavaScriptのonloadについてよく分かりました。

プロジェクト マネージャー: JavaScriptは処理を行うタイミングが重要なので、しっかり理解しておきましょう。

onloadを使用して適切なタイミングで実行しよう

JavaScriptのonloadを解説しましたが、いかがでしたでしょうか。JavaScriptは意外と処理を行うタイミングが重要なので、しっかりと把握しておきましょう。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

JavaScriptのonloadについて解説します

JavaScriptのonloadとは？

JavaScriptを記述できる場所

headタグ内にJavaScriptを記述した場合

処理の順番の関係でJavaScriptが正しく動作しない

JavaScriptを後に実行すれば解決？

headタグにJavaScriptを記述するには？

onloadを使用すればheadタグでも問題ない

bodyタグのonloadイベントも使える

onloadが複数あると上手く動作しない

addEventListenerを使えば解決

必要ならDOMContentLoadedを使用する

onloadを使用して適切なタイミングで実行しよう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

JavaScript新着案件New Job

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】

官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】

システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務

JavaScriptのonloadについて解説します

JavaScriptのonloadとは？

JavaScriptを記述できる場所

headタグ内にJavaScriptを記述した場合

処理の順番の関係でJavaScriptが正しく動作しない

JavaScriptを後に実行すれば解決？

headタグにJavaScriptを記述するには？

onloadを使用すればheadタグでも問題ない

bodyタグのonloadイベントも使える

onloadが複数あると上手く動作しない

addEventListenerを使えば解決

必要ならDOMContentLoadedを使用する

onloadを使用して適切なタイミングで実行しよう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

JavaScript新着案件New Job

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】

官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】

システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務

関連記事Related Posts

JavaScriptでの配列の追加方法｜結合を利用した方法や削除方法も紹介

jquery.cookie.jsの操作方法を解説｜サンプルコードも紹介

ジェイクエリーとは？メリット・デメリット10選・導入する方法や記述方法を紹介

MySQLのDELETEとは？DELETEで消すレコードの条件指定方法を解説！

getElementByIdの使い方｜基本的な使い方からjQueryでの記述方法まで紹介！