jQueryのon loadとは？jQueryのon loadは適切に使おう！

Javascript
jQuery
プログラミング言語

公開日時: 2021-02-12 　更新日時: 2022-06-01

この記事でわかること

システム エンジニア: jQueryのon loadとは何ですか？

プロジェクト マネージャー: 解説しますので参考にしてみてください。

jQueryのon loadとは？

jQueryはJavaScriptで使用できる多機能なライブラリです。JavaScriptにはwindow.onloadというメソッドがあり、Queryにもそれに近い機能があります。これらについて理解していないと、JavaScriptとjQueryのプログラムをうまく作ることはできません。

なおこの記事のサンプルを実行する場合はhtmlファイルのheadタグ内に以下を記述してください。以下が最新とは限りません。

jQueryは記述位置によっては正しく動かない

JavaScriptやjQueryはscriptタグ内に記述します。以下はdivタグ内にtextメソッドでテキストを追加しようとしています。

しかしこれではうまくいきません。以下のようにjQueryを記述する位置を変えると、divタグ内にテキストを追加できます。

readyメソッドを使えば解決する

readyメソッドを使えば解決する理由は、htmlが上から順に実行されるからです。jQueryで操作する対象のタグの後にjQueryを記述することで、正しく動作します。しかしこのように常に対象のタグとの位置関係を考えてjQueryを記述するのは大変です。

htmlを全て読み込んだ後にjQueryの処理を開始できるようにすれば、どの位置にでもjQueryを記述することができます。それを可能にするのが以下のreadyメソッドです。

<body>
<script>
$(document).ready(function() {
$(‘div’).text(‘テキスト’);
});
</script>
<div></div>
</body>

readyメソッドは省略も可能

$(document).ready(function() {～});のdocumentはhtmlページ全体を意味します。readyはその読み込みが終わったらfunctionの処理を実行するというメソッドです。これを使用すればjQueryをどの位置にでも書くことが出来ます。

なおこの記述は多く使われるので、以下のようにdocumentやreadyを省略して書くことができます。

$(function() {
$(‘div’).text(‘テキスト’);
});

readyを使用すればheadタグ内でも動作します。JavaScriptやjQueryはhtmlと別にjsファイルに分けてそちらに記述して、以下のようにhtmlのhead内で読み込むのが普通なので、readyは必須なのです。

on loadでも同じことが出来る

ところが実は、JavaScriptにもonloadという同じような機能があります。以下のようにしても、divタグの前の位置の記述で動作します。

window.onload = function() {
$(‘div’).text(‘テキスト’);
}

jQueryでも同じことができます。

$(window).on(‘load’, function() {
$(‘div’).text(‘テキスト’);
});

readyとon loadの違いは？

readyとon loadはどう違うのでしょうか。両方ともhtmlタグを読み込んだ後にJavaScriptやjQueryの処理を開始するのは同じですが、そのタイミングが少し違うのです。htmlはブラウザで開くと、まずreadyとon loadの箇所をスキップして、htmlタグからDOMの構築を行います。

DOMとはDocument Object Modelの略で、ブラウザ上でこれを構築することで、HTMLタグが機能します。

readyとon loadのどちらを使うべき？

DOMを構築した後は、jQueryのreadyの箇所が実行されます。このタイミングならどの位置のタグも処理できます。その後は画像などを読み込みます。そして全てを読み込んだ後に、on loadの処理が実行されます。

つまりreadyの方がon loadより早いということです。使用方法は画面表示の開始と同時に処理を行いたい時はreadyで、画像を含めて全てが表示された後が良ければon loadが良いでしょう。

常にreadyを使えば良いというわけではない

JavaScriptやjQueryを使う上ではほとんどの場合はreadyで良いのですが、htmlページでアニメーションのような動きがある処理を行う場合は、on loadの方が良いでしょう。またjQueryで画像サイズなどを取得する場合も、on loadのタイミングでやるべきです。

jQueryにはanimeteメソッド等があって、動きがある処理も得意です。readyばかり使うのでなく、on loadという遅いタイミングで処理できる方法もあることは覚えておいた方が良いでしょう。

DOMContentLoadedも使える

なおjQueryのreadyと全く同じタイミングで実行できるDOMContentLoadedもあります。以下のようにしても、readyと同じタイミングで実行されます。

document.addEventListener(‘DOMContentLoaded’, function() {
$(‘div’).text(‘テキスト’);
})

注意すべき点は、この機能はIE9以降のブラウザでしか動作しないことです。古いブラウザは非対応です。ただ今はそれよりも新しいブラウザを使うのが普通なので、大きな問題にはならないでしょう。

readyは複数記述できる

なおreadyは以下のように複数記述することもできます。

readyやon loadはなるべく1回だけ行うように

しかしこの場合、readyの数だけDOMが構築されたかどうかのチェック処理が必要になって、動作が重くなります。以下のようにreadyは1回だけ行うようにしましょう。

システム エンジニア: readyとon loadの違いがわかりました。

プロジェクト マネージャー: readyとon loadの理解を深め、適切に使ってみましょう。

jQueryのon loadは適切に使おう

jQueryのreadyとon loadについて解説しましたが、ご理解頂けましたでしょうか。基本的にはreadyを使う機会の方が多くなりますが、on loadで遅いタイミングで処理を行いたい時もあるでしょう。ケースバイケースで使い分けてください。

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

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

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

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

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

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

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

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

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

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

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

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

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

jQueryのon loadとは？jQueryのon loadは適切に使おう！