}); 初めてJavaScriptでDOMを扱うようになってくると、実行タイミングがズレてエラーになることがよくあります。, この場合、ほとんどの理由がHTML（DOM）のレンダリングとタイミングが合っていないことに起因します。これを上手く解消するには、HTML内の書く場所に注意したり、「onloadイベント」の正しい書き方を知る必要があります。, しかしながら、「実行タイミング」についてはいろんな罠が潜んでいるため、この記事で正しい知識を身につけてスッキリと理解できるようにしておきましょう。, まずは基本的なことですが、HTMLのソースコードは上から下へ順番に読み込まれて解析されていきます。, 当然ながら、HTMLの中にはJavaScriptも存在しており、どの場所に書くかによって結果が変化することがあります。, JavaScriptを書く場所としては、大きく分けると「head要素内」と「body要素内」の2箇所があります。, 基本的には「body要素内」にJavaScriptを書くことが多いのですが、その理由も合わせてもう少し詳しく見ていきましょう！, 上記の例では、「jquery.js」や「bootstrap.js」などの外部ファイルを読み込んだり、「scriptタグ」内に直接コードを書いています。, このように、「head要素内」にJavaScriptを書くことはできますが、すべての読み込みが完了しないとDOMがレンダリングされないのでWebページの表示が遅くなってしまうというデメリットがあります。, こうすることで先にDOMのレンダリング始まり、Webページが表示された後にJavaScriptが読み込まれるので、体感的に速く表示されると感じるわけです。, このような理由から、基本的にJavaScriptは「body要素内」に書くことが多い傾向にあります。, HTMLの中で読み込むJavaScriptのファイルには自分で作成したファイルの他に外部の人が作成したファイルを読み込む場合など様々なケースがあります。, そのあたりの詳しい内容は以下の記事にてご紹介していますので、ぜひ参考にしてみてください。, 先ほどは「書く場所」について学びましたが、今度は「書き方」についてもう少し見ていきましょう！, 例えば、よくある間違いとして「head要素内」から「pタグ」のDOMを取得しようとした事例がコチラ！, 理由は冒頭でも書きましたが、HTMLは上から下へ順番に読み込まれて解析されるからです。, つまり、JavaScriptを読み込んだ時点では、まだ「pタグ」が存在していないのに文字列を代入しようとしているため、「pタグなんてないよ！」というエラーになるわけです。, なぜなら、JavaScriptが読み込まれる前にDOMがレンダリングされており、「pタグ」が存在しているからですね。, ただし、bodyの閉じタグ直前に書いたからといって、必ずDOMのレンダリングが完了していることは保証されていません。, そのため、DOMを扱う場合には次の項目以降でご紹介する「onloadイベント」を利用するのがベストな選択となります！, そして、DOMを扱うのであれば、最終的に「onloadイベント」を利用するのがベストな選択肢になるわけですが、こちらも書き方について注意するべきポイントがあるので詳しく見ていきましょう！, このように書くことで、すべてのDOMツリー構造及び関連リソースが読み込まれたあとにJavaScriptが実行されるようになります。, つまり、「head要素内」でDOMを扱うプログラムを書いてもエラーにはなりません。（もちろん「body要素内」でもOK）, 上記コードは、普通に書くとエラーになりかねませんが、「onloadイベント」を利用することで正常に動作します。, あらかじめJavaScriptで関数を作成しておき、それを「bodyタグ」の「onloadイベント」で実行すれば良いわけです。, このように「onloadイベント」を覚えると、JavaScriptの「書く場所」を意識しなくてもDOMを扱えるようになるので非常に便利ですね！, それは、複数の「onloadイベント」書いてしまうと上書きされてしまい、最後に書いたイベントだけが実行されるという仕様によるものです。, 「window.onload」は関数を代入するという特性上、最後に代入された関数が上書きされて実行されるわけです。これは、簡単に言うと「変数」に「値」を代入する行為に似ているでしょう。, このような特性があることによって、複数人でプログラムを書いている場合に誤って「onloadイベント」を上書きしてしまうリスクがあるので注意が必要です。, そこで、このようなリスクを考慮しないイベント処理の書き方が存在しており、それが「addEventListener()」を使った方法です！, 先ほどのコードを「addEventListener()」に置き換えるとこうなります！, つまり、複数の「onloadイベント」を登録してもすべて実行されるようになっているわけですね。, これまでに「onloadイベント」として、「window.onload」と「addEventListener()」の2種類を学んできました。, どちらにしても、「onloadイベント」はDOMのレンダリングやCSS・画像などの関連リソースをすべて読み込んだ後に実行される処理でした。, しかしながら、大抵の場合はDOMの「ツリー構造」さえ完了していればJavaScriptからDOMを扱えるので、すべてのリソースを読み込むまで待つ必要はないはずです。, そこで、知っておくと便利に使えるのが「DOMContentLoadedイベント」です。これはDOMの「ツリー構造」が完了した時点で実行されるので、通常の「onloadイベント」よりも速く動作するというメリットがあります。, それでは、先ほどのサンプルコードに「DOMContentLoaded」を使ってみましょう！, 最後のイベント処理だけ「DOMContentLoaded」を使っていますが、出力結果はどうなると思いますか？, つまり、「メロン」のイベント処理だけが「DOMContentLoaded」を利用しているので、最も速く実行されたというわけです！, さて、これまではDOMを扱った事例を見てきましたが、少しステップアップした応用編として、今度は「画像ファイル」の扱いについて見ていきましょう！, JavaScriptから画像を読み込んで処理するケースにおいて、実はDOMを扱う事例と同じような現象が発生します。このあたりの事情について、知っているのと知らないのではかなり差がつくのでしっかりと学んでおきましょう！, まずは、JavaScriptから画像ファイルを読み込む方法について見ていきましょう！, 一般的な書き方としては、「Image()」コンストラクタを使ってインスタンス化する方法です。, 「img.src」に画像のパスを代入した時点で、ファイルの読み込みが自動的に始まるわけですが、画像ファイルは容量が大きいものが多いので読み込み完了までにある程度の時間が必要です。, この現象は、DOMのツリー構造が完了するまで待たないといけなかったケースとよく似ていると言えます。, 例えば、読み込んだ画像の「幅サイズ」を取得するためのメソッドに「img.width」がありますが、次のように書いてしまうと取得することができません。, 上記コードの場合、コンソールログに出力されるのは「0」になります。つまり、幅サイズを取得できていないということになります。, これは、「img.src」に画像のパスが代入されて読み込みが開始されているものの、まだ読み込みが完了していないうちに「img.width」が実行されているので、正確なサイズが取得できていないことになります。, DOMを扱った時と同じように、画像を扱う場合でも「onloadイベント」を使うことができます。, このように、「img.onload」を使うことで、意図的に読み込みが完了した時の処理を書くことが出来るわけです。, 先ほどの「img.width」による幅サイズの取得は、次のように書けば上手く実行されます。, このように書くことで、コンソールログには画像の幅サイズがしっかりと出力できるわけです。, ちなみに、「img.onload」も関数を代入するという性質上、複数書いた場合に上書きされるため、「addEventListener」を使った書き方にすることも可能です！, 上記の画像ファイルの読み込みの他にもExcelやCSVファイルの読み込みやJSONファイルと呼ばれるプログラムで処理しやすいように加工されたファイルを読み込むなど、様々なファイルを読み込むケースがあると思います。, そのような方法については以下の記事で詳しく紹介していますので、ぜひ参考にしてください。, このイベントは、基本的に「何らかの処理を待つ」ことで、実行タイミングを調整していたわけですが、逆に「何らかの処理に移行」しようとした時に実行するイベントも用意されているのでご紹介しておきます！, これは主に、Webページをリロードする際や、別のURLに遷移する時などに実行されるイベントで、離脱防止や誤ってリロードするのを防止するような目的で使われることが多いでしょう。, まずは基本的な書き方について見ていきたいのですが、利用するのは「onbeforeunload」と呼ばれるイベント処理です。, 一般的な使い方としては、これまでの「onloadイベント」とまったく同じで、書き方も2種類あります。, 「onbeforeunload」は、Webページの離脱防止に使われることから、次のように書くことで「メッセージダイアログ」をポップアップ表示することができます。, ページの読み込み時に処理を行うには、jQueryの「ready」と「load」を使う方法もあります。, jQueryのreadyとloadの違いと使い方についてはこちらの記事で詳しく解説しているので、ぜひ確認してください。, 今回はJavaScriptの実行タイミングについて、主に「onloadイベント」に潜むいくつかの罠をまとめて紹介いたしました。, 当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。 イベント名 説明; show.bs.modal: モーダル・ダイアログを開くshowメソッドを呼び出した時のイベント。 クリックによってshowメソッドを呼び出した場合、クリックされた要素を、イベントのrelatedTargetプロパティとして使用可能。: shown.bs.modal var pbjs=pbjs||{}; googletag.cmd.push(function() { googletag.defineSlot('/21812778492/blog_300x250_common_fixed01_adsense', [[300, 250], [336, 280]], 'div-gpt-ad-1565194485392-0').addService(googletag.pubads()); googletag.cmd = googletag.cmd || []; pbjs.que=pbjs.que||[]; googletag.defineSlot('/21812778492/blog_728x90_common_overlay_adsence', [728, 90], 'div-gpt-ad-1583302554779-0').addService(googletag.pubads()); Nick Craverさんの回答を参考にしています。 googletag.defineSlot('/21812778492/blog_300x250_common_fixed02_adsense', [[300, 250], [336, 280]], 'div-gpt-ad-1565198391774-0').addService(googletag.pubads()); jQuery で特定の DOM の表示が完了したタイミングを取る ... HTML5 ドラッグ＆ドロップ API の drop イベントが発動しない ... JavaScript (121) PHP (60) jQuery (51) Android (47) … JavaScriptオブジェクトにキー/値ペアを追加するにはどうすればよいですか. googletag.defineSlot('/21812778492/blog_728x90_common_eyecatch01_adsence', [728, 90], 'div-gpt-ad-1566564252373-0').addService(googletag.pubads()); googletag.enableServices(); var googletag = googletag || {}; googletag.defineSlot('/21812778492/blog_300x250_common_sidemiddle01_adsense', [[300, 250], [336, 280]], 'div-gpt-ad-1565198726712-0').addService(googletag.pubads()); 知識のある方お手数をお掛けいたしますが、ご教授いただける幸いでございます。, 上記コードは(div内はかなりフェイクいれています)色々なサンプルを混ぜ合わして作っている為、私自身理解しきれていません。 googletag.defineSlot('/21812778492/blog_300x250_common_sidemiddle02_adsense', [[300, 250], [336, 280]], 'div-gpt-ad-1565198822157-0').addService(googletag.pubads()); googletag.defineSlot('/21812778492/blog_300x250_common_ctc02_adsence', [300, 250], 'div-gpt-ad-1566564559478-0').addService(googletag.pubads()); ※BLUEPIXYさんの指摘を受け、画像読み込み完了待ちするように修正しました。, “回答を投稿”をクリックすることで利用規約、プライバシーポリシー、及びクッキーポリシーに同意したものとみなされます。, このRSSフィードを購読するには、このURLをコピーしてRSSリーダーに貼り付けてください。, サイトデザイン / ロゴ © 2020 Stack Exchange Inc; ユーザーの投稿はcc by-saでライセンスされます。 rev 2020.11.13.38000, スタック・オーバーフロー をより快適に使うためには JavaScript を有効化してください. img要素の読み込み完了を検知し、非表示要素を表示するため、onload=""を使用してCSSの生成を行いたいのですが、いまいち方法が理解できておりません。 上記のCSSを、onloadを使用して