JavaScriptのonloadについて解説します
- システム
エンジニア - JavaScriptのonloadについて教えてください。
- プロジェクト
マネージャー - JavaScriptが実行されるタイミングによってはうまく動作しないのですが、それを解決するのがonloadです。
JavaScriptのonloadとは？
JavaScriptのonloadは、Windowsインターフェイスのメソッドです。
具体的には以下のような使い方をします。
|
1
2
3
4
5
6
|
<script>
window.onload = function() {
alert('画面が表示されました。');
}
</script>
|
こうすることによって、function内の処理を画面を全部読み込んだ後に実行することができます。このonload、どのような場合で使用すれば良いのでしょうか。
JavaScriptを記述できる場所
onloadの使い道を知るには、まずJavaScriptがブラウザ上でどのようなタイミングで処理されるのかを理解する必要があります。
ブラウザで表示されるHTMLは上から順に実行されますが、JavaScriptはheadタグ内にも、bodyタグ内にも記述できます。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<head>
<script>
// JavaScriptを記述できる
</script>
</head>
<body>
<script>
// JavaScriptを記述できる
</script>
</body>
</html>
|
headタグ内にJavaScriptを記述した場合
headタグにJavaScriptを記述すると、bodyタグ内のHTMLコードと分けることが出来るのでスマートです。しかし、以下のような処理をheadタグに記述するとどうなるでしょうか。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<html>
<head>
<script>
var element = document.getElementById("test");
element.innerHTML = "テストです。";
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
|
処理の順番の関係でJavaScriptが正しく動作しない
上記JavaScriptサンプルは、getElementByIDでid属性がtestのdivタグを取得し、innerHTMLで「テストです。」というテキストを設定しています。しかし、これを実行しても何も表示されません。その理由は、上記で説明した通りHTMLが上から順に実行されるからです。
headタグのJavaScriptが実行される時点ではまだdivタグが読み込まれてないため、取得することができないのです。コンソールでは以下のようなエラーが出ます。
|
1
|
Uncaught TypeError: Cannot set property 'innerHTML' of null
|
JavaScriptを後に実行すれば解決？
上記問題は、divタグの後にJavaScriptの処理を記述すれば解決できます。以下を実行すれば、「テストです。」と表示されます。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<html>
<head>
</head>
<body>
<div id="test"></div>
<script>
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が全て読み込まれた後に実行されるのです。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<html>
<head>
<script>
window.onload = function() {
var element = document.getElementById("test");
element.innerHTML = "テストです。";
}
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
|
bodyタグのonloadイベントも使える
window.onload以外にbodyタグにonloadイベントを指定することができます。以下のようにしても上記サンプルと同じ動作をします。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<html>
<head>
<script>
function work() {
var element = document.getElementById("test");
element.innerHTML = "テストです。";
}
</script>
</head>
<body onload="work()">
<div id="test"></div>
</body>
</html>
|
onloadが複数あると上手く動作しない
onloadには1つ問題点があります。それは複数のonloadがあると期待通りの動作をしてくれない事です。例えば以下のようにonloadが2つあるとします。
|
1
2
3
4
5
6
7
|
window.onload = function() {
alert("一番目");
}
window.onload = function() {
alert("二番目");
}
|
実行すると「二番目」だけが表示されて一番目は出ません。最後にあるonloadしか実行されないのです。
addEventListenerを使えば解決
上記問題はaddEventListenerを使えば解決します。以下のようにしましょう。
|
1
2
3
4
5
6
7
|
window.addEventListener('load', function() {
alert("一番目");
})
window.addEventListener('load', function() {
alert("二番目");
})
|
これで一番目と二番目が両方表示されます。
必要ならDOMContentLoadedを使用する
window.onloadも、addEventListener(‘load’～)も、ブラウザが全てのリソースを読み込んだ後に実行されます。しかし、それでは遅い場合が考えられえます。画像がなかなか読み込まれないとJavaScriptの処理がいつまでも実行されません。
そこでDOMのツリー構造が読み込まれた時点でJavaScriptを実行したい場合は、DOMContentLoadedイベントを使用します。
|
1
2
3
4
5
6
7
|
window.addEventListener('load', function() {
alert("一番目");
})
window.addEventListener('DOMContentLoaded', function() {
alert("二番目");
})
|
- システム
エンジニア - JavaScriptのonloadについてよく分かりました。
- プロジェクト
マネージャー - JavaScriptは処理を行うタイミングが重要なので、しっかり理解しておきましょう。
onloadを使用して適切なタイミングで実行しよう
JavaScriptのonloadを解説しましたが、いかがでしたでしょうか。JavaScriptは意外と処理を行うタイミングが重要なので、しっかりと把握しておきましょう。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
JavaScript新着案件New Job
-
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務
月給26万～26万円東京都千代田区(秋葉原駅) -
官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】
月給50万～60万円東京都府中市(中河原駅) -
官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】
月給25万～35万円東京都府中市(中河原駅) -
システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務
月給63万～63万円埼玉県川越市(南大塚駅)
関連記事Related Posts
-
JavaScriptでの配列の追加方法｜結合を利用した方法や削除方法も紹介
JavaScriptでの配列の要素追加・削除について 今回は、JavaScriptでの配列の要素追加・削除について説明します。 ここでは、配列の ・先頭に追加 ・末尾に追加 ・指定した位置に追加 ・結合（concat） […]
-
jquery.cookie.jsの操作方法を解説｜サンプルコードも紹介
jQueryのcookieとは jQueryは様々な機能を持つJavaScriptのライブラリですが、標準で存在しない機能もあります。その1つがcookie（クッキー）の操作です。ところがjquery.cookie.js […]
-
ジェイクエリーとは？メリット・デメリット10選・導入する方法や記述方法を紹介
ジェイクエリー（jQuery）とは？ jQuery（ジェイクエリー）は、2006年にリリースされたオープンソースのJavaScriptライブラリです。数ある中でも長年利用されているライブラリのため、デファクトスタンダード […]
-
MySQLのDELETEとは？DELETEで消すレコードの条件指定方法を解説！
MySQLのDELETEの使い方を解説 MySQLのDELETEとは？ MySQLはオープンソースのリレーショナルデータベースです。フリーでありながら、YouTube・FaceBook・Twitter・Netflixなど […]
-
getElementByIdの使い方｜基本的な使い方からjQueryでの記述方法まで紹介！
JavaScriptでのgetElementByIdの使い方とは？ 今回は、JavaScriptでのgetElementByIdの使い方について説明します。id指定でHTML要素取得する場合getElementByIdを […]
