jQuery ページ初期表示時に処理を実行（サンプル有）

2014年5月14日 2023年12月11日

jQuery を使ってページが読み込まれるタイミングで処理を行う場合、以下の方法で処理を呼び出すことができます。

実装方法１

匿名関数を初期化する方法です。実装方法２も紹介していますが、今後新規で開発する際には、実装方法１の一択で OK です。

<body>
  <script>
    $(function () {
      // 初期処理を実装
      console.log("画面表示後の処理１");
    });
  </script>
</body>

document オブジェクトの ready イベントをハンドルします。

※ ready メソッドは、jQuery 1.8 以降では非推奨となっています。実装方法１で紹介している匿名関数を利用しましょう。

<body>
  <script>
    $(document).ready(function () {
      // 初期処理を実装
      console.log("画面表示後の処理２");
    });
  </script>
</body>

開発者ツールを開き（F12 押下、もしくは、Ctrl + Shift + i 押下）、コンソールを確認します。console.log メソッドによりテキストが出力されていることが分かります。

サンプルをダウンロードし、ブラウザで開いてみてください。開発者ツールを開くことで、実行結果を確認することができます。

jQuery について、動画コンテンツで網羅的に学習する際には、次の Udemy 講座がおすすめです！動画コンテンツですので、まずは全体を流して視聴し、特に学習したい項目を繰り返し学習することで、飽きなく学習に取り組めると思います。

即実践　手を動かして6時間でjQueryをマスターしよう。知識、経験ゼロからjQueryを使いこなそう
https://www.udemy.com/course/4jqueryjquery/

jQuery について、書籍で網羅的に学習する際には、次の書籍がおすすめです！丁寧に解説がなされているので、諸学者にも学習しやすいと思います。この一冊があれば jQuery の基礎固めはばっちりだと思います。