UI設計したり、ウェブシステムを開発したりします。 

SQL見るだけクエリ#305 ページ読み込み時のイベントハンドリングの違い: jQuery vs. 通常のJavaScript

記入日:2023-11-09 編集日:2023-11-09

ページ読み込み時のイベントハンドリングの違い: jQuery vs. 通常のJavaScriptに関して解説してみようと思います。

この記事を読むと(約5分)
ページ読み込み時のイベントハンドリングの違い: jQuery vs. 通常のJavaScriptに関してイメージできます。

イベントハンドリングの違い: jQuery vs. 通常のJavaScript

$(document).ready() (jQuery)、document.addEventListener('DOMContentLoaded', ...) (通常のJavaScript)、window.onload (通常のJavaScript) の3つの違いをまとめてみましょう。

1. $(document).ready() (jQuery):

構文:

$(document).ready(function() {
  // ここにページが読み込まれた後に実行されるコードを書く
});

特徴:

  • jQuery独自の機能であり、jQueryを利用する際に使用される。
  • ドキュメントが完全に読み込まれ、解析された後に実行される関数を指定する。
  • ページの要素に対して操作を行う前に、それらが正しく読み込まれ、利用可能になるのを待つ。

2. document.addEventListener('DOMContentLoaded', ...) (通常のJavaScript):

構文:

document.addEventListener('DOMContentLoaded', function() {
  // ここにページが読み込まれた後に実行されるコードを書く
});

特徴:

  • 通常のJavaScriptで利用可能。
  • ドキュメントが完全に読み込まれ、解析された後に実行されるイベントハンドラーを指定する。
  • jQueryを使用せず、純粋なJavaScriptで同様の動作を実現する場合に使われる。

3. window.onload (通常のJavaScript):

構文:

window.onload = function() {
  // ここにページが開かれた瞬間に実行されるコードを書く
};

特徴:

  • 通常のJavaScriptで利用可能。
  • ページが完全に読み込まれた後に実行される関数を指定する。
  • DOMContentLoaded イベントよりも遅く、すべてのリソース (画像、スタイルシートなど) が完全に読み込まれた後に実行される。

これらの違いを踏まえて、プロジェクトやチームのニーズに応じて適切な方法を選ぶことが重要です。最近のフロントエンド開発では、通常のJavaScriptやモダンなフレームワークの利用が一般的になっていますが、古いプロジェクトや特定の状況ではjQueryや window.onload が依然として使われることがあります。

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。