小林聡美
名前：小林 聡美（こばやし さとみ） ニックネーム：さと・さとみん 年齢：25歳 性別：女性 職業：季節・暮らし系ブログを運営するブロガー／たまにライター業も受注 居住地：東京都杉並区・阿佐ヶ谷の1Kアパート（築15年・駅徒歩7分） 出身地：長野県松本市（自然と山に囲まれた町で育つ） 身長：158cm 血液型：A型 誕生日：1999年5月12日 趣味： ・カフェで執筆＆読書（特にエッセイと季節の暮らし本） ・季節の写真を撮ること（桜・紅葉・初雪など） ・和菓子＆お茶めぐり ・街歩きと神社巡り ・レトロ雑貨収集 ・Netflixで癒し系ドラマ鑑賞 性格：落ち着いていると言われるが、心の中は好奇心旺盛。丁寧でコツコツ型、感性豊か。慎重派だけどやると決めたことはとことん追求するタイプ。ちょっと天然で方向音痴。ひとり時間が好きだが、人の話を聞くのも得意。 1日のタイムスケジュール（平日）： 時間 行動 6:30 起床。白湯を飲んでストレッチ、ベランダから天気をチェック 7:00 朝ごはん兼SNSチェック（Instagram・Xに季節の写真を投稿することも） 8:00 自宅のデスクでブログ作成・リサーチ開始 10:30 近所のカフェに移動して作業（記事執筆・写真整理） 12:30 昼食。カフェかコンビニおにぎり＋味噌汁 13:00 午後の執筆タイム。主に記事の構成づくりや装飾、アイキャッチ作成など 16:00 夕方の散歩・写真撮影（神社や商店街。季節の風景探し） 17:30 帰宅して軽めの家事（洗濯・夕飯準備） 18:30 晩ごはん＆YouTube or Netflixでリラックス 20:00 投稿記事の最終チェック・予約投稿設定 21:30 読書や日記タイム（今日の出来事や感じたことをメモ） 23:00 就寝前のストレッチ＆アロマ。23:30に就寝
loadとonloadの基本を押さえる
loadとonloadはWebページの動作を決める「イベント」という仕組みの一部です。イベントとは、何かが起きたときに実行される“約束”のようなもので、ページの読み込みが完了したとき、リンクをクリックしたとき、スクロールしたときなど、さまざまなタイミングで発火します。特に重要なのは「load」というイベントで、これはページとその中のすべてのリソース（画像や動画、スタイルシート、外部スクリプトなどを含む）が完全に読み込まれた瞬間に発生します。一方で「onload」はこのイベントを受け取って処理を実行する関数を HTML の属性として直接指定する古い書き方の名前として使われることが多いです。つまり load はイベントそのものを指す名前であり、onload はそのイベントが発生したときに動く処理を設定する方法の総称です。現代の開発では多くの場面で addEventListener を使って複数の処理を同じイベントに登録する方法が推奨され、コードの再利用性と保守性が高まります。オンロードの考え方を理解しておくと、後で別のイベントと組み合わせるときにも混乱が少なくなります。
HTML 内の onload 属性は古い教材や既存コードの中でまだ見かけますが、新規開発では基本的に使わず、代わりに JavaScript 側でイベントを登録する癖をつけるとよいでしょう。これにより、表示の順序をより細かく制御でき、他のイベントとの競合を避けやすくなります。
1) 基本の意味と歴史
この節では load と onload の語感の違いを、歴史的な背景と現在の意味の違いとして整理します。昔の HTML では onload は body あるいは window タグに直接記述して、ページが読み込まれたときに実行する関数を指定する手法が主流でした。DOM0 の時代には属性の形での実装が多く、イベントを複数同時に扱うのは難しい場面がありました。そこから DOM レベルのイベントが整備され、 addEventListener という方法が登場します。これにより、同じイベントに複数のリスナーを登録でき、別のコードからの干渉を避けられるようになりました。現代のコーディングでは、 onload を使う場面は徐々に減り、代わりに window.addEventListener で load というイベントを監視するのが一般的です。こうすることで、HTML と JavaScript の責務を分け、スクリプトの読み込み順序や依存関係をより正確に管理できます。
2) 発火タイミングとコードの考え方
発火の順序を正しく理解することは、ページの動作を安定させるうえでとても大事です。DOMContentLoaded は HTML の構造がすべて解析され、DOM ツリーが完成した時点で発生します。ここで DOM に対する操作を行えば、画像や外部リソースの読み込みを待たずに済む場合が多く、ページの初期化には適しています。一方で load はページ内のすべてのリソースが読み込み完了した時点で発生します。これを使って、画像のサイズを取得したり、外部マップや広告などのリソースが揃ってから初期化をする必要がある場合に有効です。実務では、初期表示を速くしたい場合は DOMContentLoaded を優先し、リソースの完了を待つ必要がある場合だけ load を利用する、という使い分けが一般的です。onload を HTML 側に書く方法もかつては一般的でしたが、現在は主に addEventListener を使いイベントを登録する方法に移行しています。
3) 実務での使い分けと注意点
現場の開発では、まず DOM の準備ができた瞬間にユーザーが使える状態にすることが求められる場面が多いです。そのため、初期化の処理には DOMContentLoaded を使い、その後に外部リソースの読み込みを待つ必要がある場合だけ load を利用します。onload を HTML の属性として書くのは元々のやり方ですが、現在はこの方法だと複数の処理を順序良く登録するのが難しくなることが多いです。代わりに JavaScript 側で addEventListener を使い、必要なイベントを複数登録できるようにすると、後から別の機能を追加する際にも衝突が起きにくくなります。さらに、script タグの defer や async 属性を使ってスクリプトの実行タイミングを調整することも重要です。これらの原則を守ると、ページ表示の速さと安定性の両方を高めることができます。
授業中のある日、loadとonloadの話題で盛り上がった。友だちは onload って本当に使えるのかと聞いてきたが、私は現在の現場では addEventListener を使うのが主流だと説明した。その場で私たちは、ページの読み込み順序が表示や動作の体感に影響することを体感した。画像が先に表示されるページとテキストが先に出るページでは、ユーザーの印象が大きく変わる。こうした体感を通じて、onload の使い方が時代とともに変わる理由が理解できた。学習ノートにも、 DOMContentLoaded での初期化と load での最終化を分けてメモしておくと、将来の開発にきっと役立つだろう。
ITの人気記事
