$(document).ready() と $(document).on(‘ready’) の概要

この記事では、JavaScriptのコードにおいて、$(document).on('ready', function(){ と $(document).ready(function(){ の違いについて解説します。この2つの構文は、いずれも同じ目的を達成するためのものであり、ほぼ同じ動作をしますが、細かな違いがあります。その違いを理解して使い分けることで、より柔軟で理解しやすいコードを書くことができるでしょう。

Contents

$(document).ready() と $(document).on('ready') の概要
- $(document).ready() の使い方と特徴
- $(document).on('ready') の使い方と特徴
on メソッドの詳細
$(function() { ... }) という短縮形
どちらを使うべきか？
結論

`$(document).ready()` と `$(document).on('ready')` の概要

JavaScriptやjQueryを使ったウェブ開発において、ページが完全に読み込まれたタイミングでスクリプトを実行したい場面は非常に多いです。その際に使われるのが「DOM（Document Object Model）が完全にロードされたときに実行する」という処理です。これを実現するために、jQueryでは2つの主要な方法が提供されています。

$(document).ready(function(){ ... });
$(document).on('ready', function(){ ... });

どちらの構文も、DOMが準備完了（読み込みが完了）した時点で指定した関数を実行するために使用されます。基本的には同じ機能を提供していますが、内部的には異なる動作が含まれており、これが実際の使い方に影響を与えることがあります。

`$(document).ready()` の使い方と特徴

$(document).ready() はjQueryの古くからあるメソッドで、jQueryの初期バージョンからサポートされています。このメソッドは、ページのコンテンツが完全に読み込まれる前に、DOMが利用可能になった時点でスクリプトを実行するために使用されます。

例:

$(document).ready(function() {
    console.log("DOMが準備完了しました");
});

このコードでは、DOMが読み込まれたタイミングで「DOMが準備完了しました」というメッセージがコンソールに表示されます。$(document).ready() は、特定のイベントリスナーを設定することなく、簡単にスクリプトをDOMの読み込み完了時に実行させるための構文です。

メリット

簡潔さ: このメソッドは非常に直感的で簡潔です。特に初心者にとっては使いやすい構文となっています。
歴史的な使用: jQueryの初期バージョンから広く使われているため、古いコードベースやドキュメントでもこのメソッドが頻繁に登場します。

デメリット

イベントのフレキシビリティの欠如: ready イベントのみに対応しているため、他のイベントを簡単に追加したり管理するのが難しい場合があります。

`$(document).on('ready')` の使い方と特徴

一方、$(document).on('ready') は、on メソッドを使った書き方です。on メソッドは、jQuery 1.7から導入されたイベントバインディングの標準的な方法で、複数のイベントに対してリスナーを追加したり、将来的に発生するイベントに対応するための便利な方法を提供します。

例:

$(document).on('ready', function() {
    console.log("DOMが準備完了しました");
});

こちらのコードでも、DOMが読み込まれたタイミングで「DOMが準備完了しました」というメッセージがコンソールに表示されます。見た目は $(document).ready() とほぼ同じですが、on メソッドを使っているため、より柔軟なイベント管理が可能です。

メリット

柔軟性: on メソッドを使うことで、他のイベントと統一的に扱うことができ、イベント管理が一元化されます。
将来の拡張性: 複数のイベントに対応する場合や、動的に要素を追加・削除する際に便利です。

デメリット

冗長: 単に ready イベントを扱うだけなら、少し冗長な書き方です。
複雑さ: 初心者にはやや複雑に感じるかもしれません。特に、単純な ready イベントの処理を記述する場合は、$(document).ready() の方が直感的です。

`on` メソッドの詳細

on メソッドは、イベントリスナーを追加するための非常に強力な方法です。このメソッドは、複数の異なるイベントに対しても使うことができ、また動的に追加された要素にも対応できるため、現代のjQueryでは推奨されることが多いです。

on メソッドは、以下のように複数のイベントを一度にバインドすることも可能です。

例:

$(document).on({
    ready: function() {
        console.log("DOMが準備完了しました");
    },
    click: function() {
        console.log("クリックされました");
    }
});

このように、on メソッドを使うことで、1つのオブジェクトに複数のイベントをまとめて定義することができます。これにより、コードの可読性や保守性が向上します。

`$(function() { ... })` という短縮形

実は、$(document).ready() のさらに簡略化された書き方として、$(function() { ... }) という形もよく使われます。これは、jQueryの短縮形で、同じようにDOMが準備完了したタイミングで実行される処理を記述するものです。

例:

$(function() {
    console.log("DOMが準備完了しました");
});

この短縮形は、より簡潔でシンプルなコードを書くために広く使われています。$(document).ready() と機能的には全く同じですが、コード量が減るため、特に小規模なスクリプトでは重宝されます。

どちらを使うべきか？

どちらの方法も正しいですが、以下の観点で使い分けるのが良いでしょう。

単純なDOM読み込み後の処理を行いたい場合:
- $(document).ready() または $(function() { ... }) を使うとシンプルでわかりやすいです。
複数のイベントをまとめて管理したい場合や、動的に要素を追加・削除する場合:
- $(document).on('ready', function(){ ... }) のように on メソッドを使う方が柔軟です。
コードの可読性や統一感を重視する場合:
- すべてのイベントを統一的に管理できる on メソッドを使うのが望ましいです。

また、モダンなJavaScriptフレームワーク（例えばReactやVue.jsなど）を使う場合は、これらのメソッドを使う必要がなくなる場面も増えていますが、jQueryを使ったプロジェクトでは、どちらの方法を選ぶかでコードの保守性や拡張性に差が出ることがあります。

結論

$(document).ready() と $(document).on('ready') は、どちらもDOMが読み込まれた後に実行される処理を記述するための方法です。違いは、主に使い方の柔軟性やイベント管理の観点から現れます。単純な処理であれば $(document).ready() を使うのが簡単ですが、複数のイベントや動的な要素操作が必要な場合には $(document).on('ready') を選ぶと良いでしょう。

今後のプロジェクトでは、目的やコードの構造に合わせて最適な方法を選択することで、より効率的でメンテナンスしやすいコードを書くことができるはずです。