公開日2020.03.26

最終更新日2022.05.02

【JavaScript】onloadイベントとは？初心者でも分かりやすく解説

はじめに

こんにちは、未経験からWebデザイナーを目指して勉強中のシロ子と申します！
今回、JavaScriptのonloadイベントについて解説をしたいと思うのですが、まずは自己紹介から話していきたいと思います！

前職はアパレル店員として販売職を経験してきてきたのですが、やはり今の時代ネットで何でも出来るわけですね…SNSやECサイトなどのデジタル化は日々進化しているので、悲しいですが実店舗や販売員の需要は低下してきているのだと思います。接客販売ならではのメリットもありますが、私自身もSNSやECサイトをよく利用するので、Webの知識を身に着けて今までの経験や知識を活かせるような仕事がしたいと思いIT業界に転職を決意しました！

Webデザイナーを目標として日々奮闘中ですが、現在デザイナーやフロントエンドエンジニアの競争率が高いらしく、そこを突破していくためにはHTMLやCSSだけでなくJavaScript(JavaScriptにもjQueryやNode.jsなどの様々な種類があります)　などの多様な知識に対応できるエンジニアを目指していかなければならないと感じました。
私もまだまだ分からないことがたくさんあるので一緒に学んでいけたらいいなと思っています！

JavaScriptについて

JavaScriptとは

今回、onloadイベントについて解説をしようと思うのですが、”そもそもJavaScriptってなに？”という方の為にJavaScriptについて簡単に解説をしようと思います。

JavaScriptとは、簡単に言うとWebサイトに動きをつけるためのプログラミング言語です。

JavaScriptで出来ることの例を挙げると、

・Webページのスライドショー

・現在時刻の表示、カウントダウン

・入力フォームや値チェック

などの様々な動きを実装することができます！

そのため、JavaScriptはWeb業界では人気No.1の言語となり、Webサイト制作やアプリ開発にとって必要不可欠な存在となっております。
また、「jQuery」というJavaScriptを簡易的にしたライブラリもあるので初心者にも扱いやすい言語なのです。

JavaScriptの読み込み方法

JavaScriptはテキストエディタに入力するのに読み込み作業が必要となりますので、その方法の2種類を説明します。

・直接入力

まずは手っ取り早い方法の一つ、直接HTMLファイルの中に書き込む方法です。

<body>
    <script>
    document.writeIn("Hello World");
    </script>
</body>

上記のコードのように<script>タグの中に実行したい処理を記述するだけです。
ここでの処理はブラウザに「Hello World」と表示してくださいという命令となります。

・外部からファイルを呼び出し

もう一つの方法は、CSSと同じようにJavaScriptファイルを呼び出して、別ファイルに記述する方法です。

<head>
    <meta charset="utf-8">
    <title>JavaScriptページ</title>
    <script src="呼び出したいファイルのパス"></script>
</head>

こちらは<head>タグの中に、呼び出したいファイルのパス(相対パス)を指定します。そして呼び出したファイルに記述していきます。

それでは、JavaScriptの記述の準備ができたところで、
本題のonloadイベントについて解説していきたいと思います！

onloadイベントについて

まず、onloadイベントとはページや画像が読み込みが完了した時点でイベントを実行するよというもの。
つまり、自動的に処理を実行したい場合などに使用します。

但し、実行するタイミングについては正しく記述できていないとエラーが起こったり、上手く実行されないことがある為、正しい記述方法をしっかり理解する必要があります。

イベントとは

はじめに、イベントについて説明します。
イベントとは実行されるアクションの名称です。
いくつかの例を挙げると、
・ボタンのクリック
・フォームの入力
・マウスが離れたら
などがあります。

因みに「イベント」と違って「イベントハンドラ」という言葉もあるのですが、分かりやすく説明すると、Webページの中のボタンを押したら表示されている画像が変わるというような例で
『表示されている画像が変わる』が「イベント」
『Webページの中のボタンを押したら』が「イベントハンドラ」となります。
見分け方として、”onClick”や”onMouse”など処理の前に”on”がついているかいないかそれだけです。

DOMについて

その次に、JavaScriptを操作するのに必要な知識がDOMというものです。
DOMとは「Document Object Model」の略で、上記の画像のようにツリー構造という階層に分けられます。そしてDOMの役割は「HTMLやXML文書を自由に操作するもの」と言っても分かりづらいですよね。

<h1>
    <img src="画像パス" id="img1">
</h1>

例えば、上記のHTMLの＜img＞タグの画像を切り替えたいと思ってもJavaScriptでは実質操作出来ません。
そこで、DOMを使うことでJavaScriptからでもHTMLの要素を操作出来るのです。

document.getElementById('img1');

上記のコードは、HTMLのドキュメント要素、つまり”img1″のidをHTMLから呼び出しました。という意味です。

じゃあDOMを使うためにはどうすればいいの？と思うかもしれませんが、現状ではほとんど全てのブラウザでデフォルトでDOMを扱えるようになっているので自分で設定したり何かをする必要はありませんが、このDOMの仕組みは覚えておいてくださいね。

イベントの実行タイミング

では、イベントの実行タイミングについて説明します。
上記にも書いた通り、正しい記述が出来てないと上手く実行することができません。

これは、私もJavaScriptを学んだときにつまずいて理解するのに時間がかかりました…

基本的にイベント処理を書くときには<body>要素の中に記述します。
head内に記述する方法もありますが、body内に記述する方が良い理由があります。

基本的に、HTMLは上から順に読み込まれます。
上記の画像を見て分かると思いますが、
head内に記述する場合、全ての読み込みが完了した後にDOM→表示となります。
比較してbody内に記述する場合は、DOM→表示がされた後に読み込みがされます。
これで分かりましたか？
実際に掛かる時間の差はあまりないですが、体感的に表示が速くなるということです。

head内に記述する場合は、Webページを開いた瞬間にアクションを起こしたいという時でそれ以外は基本的にbody内での記述で良いでしょう。

onloadの記述方法

onloadイベントの実行タイミングについて学んだところで、
次に、記述方法を説明したいと思います。

基本的なonloadイベントの書き方はこちらです。

"指定する要素".onload = function() {
alert('読み込み完了しました！');
}

“指定する要素”には「window」やHTMLから呼び出す「body」「img」などの要素が指定できます。
例えば、「window」はwindowオブジェクトつまりページ全体の読み込みが完了した時にアラート表示
「img」はHTMLの画像の読み込みが完了した時にアラート表示
ということになります。

そして、onloadを記述する際に間違えやすい注意点があります。

・「onload」を複数のイベント設定する場合

window.onload = function(){
 console.log('チョコレート');
}
window.onload = function(){
 console.log('アイスクリーム');
}
window.onload = function(){
 console.log('プリン');
}

「onload」は書いた順から上書きされます。
上記のコードの場合、表示されるのは何だと思いますか？

答えは ‘プリン’ です！

それでは上書きされないためにはどうしたらよいでしょうか？
「addEventListener()」を使えば上書きされません！
これは、add=追加する、EventListener=イベントが実行されたのを検知するという意味です。

window.addEventListener('load', function() {
  console.log('チョコレート');
})
window.addEventListener('load', function() {
  console.log('アイスクリーム');
})
window.addEventListener('load', function() {
  console.log('プリン');
})

それでは、上記のコードの場合何と表示されるでしょうか？

‘チョコレート’、’アイスクリーム’、’プリン’と全て表示されます。
このように「onload」を複数使うときは上書きされてしまうので、注意しましょう！

・「onload」と「ready」の違い

そして「onload」の他に「ready」というイベントがあるのですが、実はこの二つの意味は一緒なのです。
では何が違うのかというと…
実行するタイミングが違います！

上記で分かるようにreadyの方が実行されるタイミングが速いんですね！

因みに、readyとはjQuery上で使われる実行イベントなので、
jQueryを使う場合は「ready」、JavaScriptを使う場合は「onload」と使い分けるのが良いでしょう。

《補足》
jQueryのreadyの記述方法について

jQuery(document).ready(function() {
  //実行処理
});

基本的にこの記述で問題ないですが…

$(function() {
  //実行処理
});

このように、
jQuery=$、documentとreadyは省略と
簡易的に短縮できるんです！助かる！

・onloadをより速く

先ほど学んだ通り、onloadというのは便利ですが意外と処理が遅いです。
そこで、登場するのが「DOMContentLoaded」イベントです！

このイベントは先ほどのreadyと同じで、DOM構築が完了した時点での実行となるのでonloadより処理が速くなります。
readyのJavaScript版と考えれば分かりやすいと思います。

それではこちらのコードで最後の命令だけ「DOMContentLoaded」を使って記述した場合、どのように表示されると思いますか？

window.addEventListener('load', function() {
  console.log('チョコレート');
})
window.addEventListener('load', function() {
  console.log('アイスクリーム');
})
window.addEventListener('DOMContentLoaded', function() {
  console.log('プリン');
})

答えは、
‘プリン’、’チョコレート’、’アイスクリーム’　です！

解説すると、’プリン’は「DOMContentLoaded」を使ったことによって一番速い
そして、’チョコレート’と’アイスクリーム’は「addEventListener」を使っているので上書きされず上から順に実行されます。

ということで、「DOMContentLoaded」は速いということが分かりましたが、じゃあ「onload」いらなくない？と思いますよね
それが必要なんです。
なぜかというと「DOMContentLoaded」を使うにあたって問題点があります。

「DOMContentLoaded」はHTML5で新しく追加されたイベントの為、E7,8やSafariの3.1未満は対応できないそうです。
なので、古いブラウザを考慮しながらWebサイトを制作する場合は、jQueryのreadyを使ったり、その時の状況によって使い分けるのが良いでしょう。