TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでonkeydownを使ってキーを押したときのイベントを処理する方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
JavaScript

JavaScriptでonkeydownを使ってキーを押したときのイベントを処理する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでonkeydownを使ってキーを押したときのイベントを処理する方法について解説しています。onkeydownはキーボードの入力を受け取り処理を行う際に使用されます。基本の書き方とonkeypress、onkeyupとの違いについて学びましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

JavaScriptでonkeydownを使ってキーを押したときのイベントを処理する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

JavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

onkeydownを使ってキーを押したときのイベントを処理する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

onkeydownとは

onkeydownとは、キーが押されるなどのイベントを検知して、処理を指定する属性です。

キーが押された際に処理が行われる例として、コントロールキーとCを押すことで選択した文字がコピーできます。

onkeydownは押されたキーを検知し、イベントを実行・処理を指定する際に割り込みで実行します。

また、どのキーが押されても処理方法は変わりません。

 

onkeydownを使ってキーを押したときのイベントを処理する方法

JavaScriptではキーが押された際に毎回「keydown」イベントが発生している状態です。

onkeydownに、keydownイベントが発生した際の処理をする関数を指定した場合、キーが押され処理が実行される動きにつながります。

 

[PR] コーディングで副業する方法とは

実際に書いてみよう

document.onkeydown = event => console.log(event.key);

解説

「document」は画面全体を指します。

「.onkeydown」にアロー演算子でeventという引数を持つ関数を指定しました。

そして、evnetという引数に押されたキーの情報が入っているため、「.key」と定義することで押されたキーの名前を取得できます。

 

onkeypress、onkeyupについて

onkeypressはonkeydownとほぼ同じものです。

onkeypressは矢印キーなどの特殊なキーが含まれず、すでに非推奨になっていてブラウザも対応しなくなっている状態です。

そのため、なるべく使用しないようにしましょう。

 

onkeyupはキーが上がったときのイベントを処理する属性です。

キーが押された時点ではonkeydownの処理が実行され、手を離してキーが上がるとonkeyupの処理が実行されます。

 

onkeyupを使用する場合、処理の順番はonkeydownが先です。

また、キーを押しっぱなしにしていると文字が何個も入力され、keydownイベントが何度も発生していることになります。

しかし、この場合onkeyupはキーを離した際だけ発生しているため、使い分けを意識してみましょう。

 

執筆してくれたメンター

横山茂雄（よこやましげお）

フリーエンジニアとして活動中。

サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。

TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

JavaScriptでonkeydownを使ってキーを押したときのイベントを処理する方法がよくわかったので良かったです！

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。

記事を検索

関連するキーワード

関連する記事

JavaScriptで配列の平均値を求める方法を現役エンジニアが解説【初心者向け】

JavaScriptで配列の平均値を求める方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

JavaScriptによるboolean型のif判定について現役エンジニアが解説【初心者向け】

JavaScriptによるboolean型のif判定について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 ...
JavaScript

jQueryでfindメソッドを使って子要素を選択する方法【初心者向け】

JavaScriptのライブラリであるjQueryでonメソッドを使ってイベントを設定する方法を解説しています。jQueryを使う上でよく使用するメソッドなので...
JavaScript

JavaScriptでアクセス元の端末がスマホかどうか判定する方法を現役エンジニアが解説【初心者向け】

JavaScriptでアクセス元の端末がスマホかどうか判定する方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう...
JavaScript

JavaScriptでscrollTopプロパティを使って要素のスクロールされるピクセル数を取得、設定する方法

JavaScriptでscrollTopプロパティを使って要素のスクロールされるピクセル数を取得、設定する方法について、テックアカデミーのメンター（現役エンジニ...
JavaScript

転職・在宅ワークにも繋がる！Web制作の副業の仕事内容と収入を徹底解説

皆さんは本業の収入やお仕事に満足していますか？ 「転職するほど不満があるわけではないけど将来を考えた時にこのままで良いか、なんとなく不安」という方が多いのでは...
ピックアップ

あわせてよく読まれている記事

JavaScriptでconfirmを使って確認ダイアログを表示させる方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptでconfirmを使って確認ダイアログを表示させる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 また、入門向けにJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。 目次onkeydownとはonkeydownを使ってキーを押したときのイベントを処理する方法実際に書いてみようonkeypress、onkeyupについて執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   確認ダイアログとは Webサイトでユーザー情報を登録している時など、次のようなポップアップが表示され、[OK]と[キャンセル]ボタンによってWebサイト側から確認を求められることがあります。 これを確認ダイアログといいます。Webページを作る上では使用頻度の高い機能なので、alertやpromptなどと合わせ是非作り方を覚えましょう。   大石ゆかり 田島メンター！前にalertメソッドを使ってダイアログを表示させましたが、確認ダイアログを表示させる関数もあるんですか？ 田島悠介 alertメソッドとほぼ同じなんだけど、確認ダイアログの場合、ユーザーが選択したボタンの情報を受け取れるんだよね。OKとかキャンセルとかのボタンの結果なんだけど。 大石ゆかり じゃあ、結果によって表示や処理を変えるといったことができそうですね。 田島悠介 そうそう。それが違いかな。さっそく確認ダイアログを表示させてみよう！   confirmを使って確認ダイアログを表示させる JavaScriptで確認ダイアログを表示させるときは、confirmメソッドを使います。 構文 OKボタンが押されたかの真偽値 = window.confirm('メッセージの文字列'); 引数に確認ダイアログに表示するメッセージを文字列で指定します。 戻り値は「OK」ボタンが押されたらtrue、「キャンセル」ボタンが押されたらfalseの値が真偽値で返されます。 ※confirmメソッドはWindowオブジェクトのメソッドです。本当なら「window.confirm」と呼び出す必要がありますが、「window」は省略できるので「confirm」だけで呼び出せます。 ※オブジェクトとは関連のある値を記憶する変数（プロパティ）や関数のように呼び出す処理（メソッド）をグループにしたものです。 真偽値とは？ JavaScriptの値の型のひとつに真偽値があります。 真偽値は真（true、トゥルー）と偽（false、フォールス）の2つの値をとります。 trueは条件が成立している、または有効なものを表しています。 falseは条件が成立していない、または無効なものを表しています。 if文の条件には真偽値が使われるので、「if(条件式)」だと条件式がtrueの場合に実行される処理を指定します。 ※真偽値はシングルクォーテーションなどで囲みません。’true’だと文字列になります。 ソースコード では、ためしに「入力に間違いはないですか？」という文字列を表示させてみましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScriptの練習</title> </head> <body> <script> const answer = confirm('入力に間違いはないですか？'); document.write(answer); </script> </body> </html> ※「const」は再代入できない固定された値として使える変数を宣言するキーワードです。constキーワードについて詳しくは解説記事「JavaScriptで書く「var,let,const」の違いと使い分け方法」をご覧ください。 表示結果 PC画面上でほかのウィンドウよりも手前にダイアログボックスがポップアップ表示されます。   さらに、[OK]を押すとダイアログボックスが消え、ブラウザに「true」と表示されました。   ちなみに、[キャンセル]を押すと「false」と表示されます。 まとめ JavaScriptで確認ダイアログを表示するにはconfirmメソッドを使います。   [PR] プログラミングで挫折しない学習方法を動画で公開中確認ダイアログ内のテキストを改行する 確認ダイアログに表示するテキストを改行するにはエスケープシーケンス「n」を使います。 たとえば 「confirm(‘こんにちは、n山田さん’);」とすると、「こんにちは、」で改行されて、その下の行に「山田さん」が続きます。 エスケープシーケンスでの改行は確認ダイアログを表示するconfirmメソッドはもちろん、アラートを表示するalertでも使えます。 エスケープシーケンスとは？ エスケープシーケンス（エスケープ文字）とは、改行のような特殊な文字を表現する方法です。 エスケープシーケンスは「」（バックスラッシュ。機種によっては¥記号で表示）と特定の文字を組み合わせて特殊な意味を持たせます。 以下の表はエスケープシーケンスの例です。 エスケープシーケンス 意味 n 改行 ‘ シングルクォーテーション “ ダブルクォーテーション t タブ バックスラッシュ（または¥）を表示 ※Windowsなど機種によってはエスケープシーケンスを「」ではなく「¥」記号で表現します。バックスラッシュの入力方法について詳しくは解説記事にある「バックスラッシュの入力方法について」の見出しをご覧ください。 ソースコード [件名]ボックスが未入力の状態で[確認]ボタンを押すと「以下の項目が未入力です。」で改行されて「件名：」がアラートで表示されます。 [件名]ボックスに文字が入力されている状態で[確認]ボタンを押すと「以下の件名にしますか？」で改行されて入力された内容が表示されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>confirmを使った改行 |
JavaScript

PHPの配列でjoinメソッドを使う方法を現役エンジニアが解説【初心者向け】

PHPで配列を結合する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPではさまざまな方法で配列を結合できますので、この記事では用途に合わせた使い分けについて解説しています。 目次onkeydownとはonkeydownを使ってキーを押したときのイベントを処理する方法実際に書いてみようonkeypress、onkeyupについて執筆してくれたメンター そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   大石ゆかり PHPの配列を結合するにはどうしたらいいですか？ 田島悠介 配列を結合する方法はいろいろあるけど、array_mergeが使えるよ。 ただ連想配列でキーが同じだった場合に値が上書きされるよ。 大石ゆかり 連想配列？キー？上書き？　なんだか難しそうですね・・・ 田島悠介 聞いただけではイメージするのが難しいかもしれないね。 たとえば$sum[5]の「5」の数値が配列の添字、つまりキーだよ。 連想配列はこのキーが文字列の配列だね。 じゃあ、配列を結合する方法を実際のサンプルコードを使って説明するね。 大石ゆかり お願いします！ ※この解説記事では配列のキー（添字）が数値のものを添字配列といい、キーが文字列の連想配列と区別しています。PHPの配列については解説記事「PHPの配列の基本を現役エンジニアが解説【初心者向け】」を、連想配列については解説記事「PHPで連想配列を使う方法【初心者向け】」をご覧ください。   array_mergeで結合する方法 PHPで配列を結合するには、array_merge関数が使えます。 複数の配列をひとつに結合した配列を取得できます。 構文 結合された配列 = array_merge(配列1, 配列2); 配列1の後ろに配列2の要素が追加されて結合された配列が取得できます。 ※引数に指定する配列の数は、ひとつでも3つ以上でも指定できます。 ※結合された配列はarray_merge関数の戻り値で取得します。上記の構文だと配列1そのものが更新されるわけではありません。 配列のキーが同じ要素を結合すると？ 配列が連想配列（キーが文字列の配列）かどうかで結果が異なります。 キーが数値の添字配列の場合は、同じキーがあっても添字がゼロから振りなおされ、要素が追加されていきます。 キーが文字列の連想配列の場合は、同じキーがあると新しい要素に上書きされて追加にはなりません。 添字配列を結合する 配列のキーが数値の添字配列をarray_merge関数で結合すると、すべての要素のキーがゼロから振りなおされて追加されます。 ソースコード 色の名前が入った2つの配列 $colors1と$colors2の要素をarray_mergeで結合し、$colorsに代入します。 $colors1と$colors2の配列はキーが数値のため、結合したときにキーが降り直されます。 <?php $colors1 = array('赤', '緑', '青'); $colors2 = array('シアン', 'マゼンタ', '黄'); //配列を結合 $colors = array_merge($colors1, $colors2); //結合した配列を出力（preタグで改行させる） print_r('<pre>'); print_r($colors); print_r('</pre>'); ?> ※本来なら出力したいWebページ内で<html>タグなどを含める必要がありますが、今回はPHPのプログラムの解説が目的なので省略しています。基本的なPHPの書き方について詳しくは解説記事「基本的なPHPの書き方」をご覧ください。 表示結果 解説 $colors1 = array('赤', '緑', '青'); $colors1に3つの要素がある配列を代入しています。 配列 $colors1の中身は以下のように0から2のキーがあります。 Array ( [0] => 赤 [1] => 緑 [2] => 青 ) ※配列を作成するときに、値だけ指定すると自動的にゼロから始まる添字がついてキーが作成されます。配列の作成について詳しくは解説記事「PHPの配列の基本を現役エンジニアが解説【初心者向け】」をご覧ください。 $colors2 = array('シアン', 'マゼンタ', '黄'); $colors2にも3つの要素がある配列を代入しており、中身は以下の状態です。 Array ( [0] => シアン [1] => マゼンタ
PHP

JavaScriptでキーイベントを受け取る方法を現役エンジニアが解説【初心者向け】

JavaScriptでキーイベントを受け取る方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでキーイベントを受け取る方法について詳しく説明していくね！ 大石ゆかり お願いします！   キーイベントとは キーイベントとは、JavaScriptでキーボードからの入力を受け取ることができるオブジェクトです。キーイベントには以下の種類があります。 キーイベント 説明 keydown キーが最初に押された時に発生 keypress キーが修飾キー(※)でなかった場合に発生 keyup  ユーザーがキーを離した時点で発生 ※修飾キーはShiftやAlt、Ctrlなどのキーです。 キーボードを押しっぱなしにすると、一定間隔でkeydownとkeypressが発生します。その他キーイベントについての詳細は、公式ドキュメントを参考にしてください。 https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent なお、現在はキーボードからの入力の他に、音声入力や手書入力等、様々な入力方法があります。これらの入力を受け取る場合、キーイベントの代わりにHTML5のinputイベントを使用することが推奨されています。   JavaScriptでキーイベントを受け取る方法 JavaScriptでキーイベントを受け取るにはイベントリスナーを使用します。 document.addEventListener('キーイベント', イベント発生時に実行する関数); イベントリスナーとは、イベント（ユーザーの操作やページの読み込みなど）の発生をJavaScriptのプログラムで処理するための仕組みです。 https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener   [PR] プログラミングで挫折しない学習方法を動画で公開中実際に書いてみよう 今回のサンプルプログラムでは、キーイベントの種類毎に押されたキーをログに出力します。ログはChromeであれば、デベロッパーツールのConsoleで確認できます。 <!DOCTYPE html> <html>   <head>     <script>       document.addEventListener('keydown', (event) => {          var keyName = event.key;          if (event.ctrlKey) {            console.log(`keydown:Ctrl + ${keyName}`);          } else if (event.shiftKey) {            console.log(`keydown:Shift + ${keyName}`);          } else {  
JavaScript

JavaScriptのaddEventListenerの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのaddEventListenerの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次onkeydownとはonkeydownを使ってキーを押したときのイベントを処理する方法実際に書いてみようonkeypress、onkeyupについて執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのaddEventListenerの使い方について詳しく説明していくね！ 大石ゆかり お願いします！   addEventListenerとは Webサイト開発において、「イベント」という概念はとても重要です。 イベントとは、例えば「ユーザーがボタンをクリックする」「ページの読み込みが完了する」など、Webサイトにおいて発生する現象の総合的な名称です。 JavaScriptではこのイベントを検知し、検知したイベントの情報を使ってさまざまな処理ができます。 イベントを検知するための仕組みのことを「イベントリスナ」といい、イベントリスナを定義するためのJavaScriptのメソッドが「addEventListener」（イベントリスナをadd = 追加する）です。   addEventListenerの使い方 addEventListenerは、以下のような文法で使用できます。 イベントを検知する対象要素.addEventListener('イベント名', イベントを検知した時にする処理（関数）, オプション) 「イベントを検知する対象要素」には、さまざまな要素が指定できますが、Web開発でよく使うのはページ全体を表すwindowやdocument、または任意のHTML要素です。 addEventListenerの第一引数には、イベント名が入ります。 “click”（クリック）、”scroll”（スクロール）などが当てはまります。 第二引数には任意の処理を含む関数を指定できます。 第三引数には、より詳細な検知に関する設定を指定できますが、普段から頻繁に使うものではないため、今回は割愛します。 addEventListenerの詳細な仕様が気になる方は、こちらのMDNドキュメントで確認してみてください。   この文法を利用して、「ユーザーがページをスクロールした時」というイベントリスナを定義する場合、以下のように記述します。 //対象要素がページ全体なので、windowを使う window.addEventListener('scroll', () => { console.log("スクロールされました") })   [PR] プログラミングで挫折しない学習方法を動画で公開中検知したイベントに関する情報を取得する addEventListenerの第二引数に指定した関数が実行されるとき、引数として1つのオブジェクトが渡されます。 このオブジェクトには、検知したイベントに関するさまざまな情報が格納されています。   実際にコードでイメージをつかみましょう！ window.addEventListener('click', (e) => { console.log(`クリックした位置は上から${e.pageY}、左から${e.pageX}です`) }) サンプルコードでは、ページの任意の箇所をクリックした際に、クリックした場所の座標を表示しています。 ここで登場している “e” が、イベントオブジェクトです。 実はこのeという名前はなんでもよいのですが、一般的にeventの頭文字であるeが広く使われています。 このeに格納されている情報はイベントの種類によって異なるため、実装の際にconsole.log(e) と記述してイベントオブジェクトの内容を把握することができます。   実際に書いてみよう それでは実際に書いてみましょう。 今回は、3つのボタンのうちどれか1つをクリックした際に、クリックされたボタンの名前を表示するプログラムを書いてみましょう。 <button id="A">ボタンA</button> <button id="B">ボタンB</button> <button id="C">ボタンC</button> //3つのボタンを一括で取得　 const buttons = document.getElementsByTagName('button'); //3回繰り返す処理 for (let i = 0; i < 3; i++) { buttons[i].addEventListener('click', (e) => { //イベントオブジェクトを参照して、クリックした要素（e.target）のidを取得
JavaScript

JavaScriptのイベントリスナーについて現役エンジニアが解説【初心者向け】

JavaScriptのイベントリスナーについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。   JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をみてみましょう。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのイベントリスナーについて詳しく説明していくね！ 大石ゆかり お願いします！   目次 イベントリスナーとは 主要なイベント一 実際に書いてみよう まとめ   イベントリスナーとは イベントリスナーとは「ページが表示された」、「ボタンをクリックした」などの動作のことを表します。 JavaScriptにはあらかじめ様々なイベントが定義されており、それらのイベントが発生した際に動作するように対応付けておいた関数のことを「イベントリスナー」と呼びます。 イベントが発生する仕組みまでは JavaScript 側で用意するものの、イベントとイベントリスナーとの対応付けは開発者が行わなければなりません。 具体的にはaddEventListener()メソッドを使って対応付けを行います。 button.addEventListener("click", () => { // イベントが発生した時に動かす処理を記述 });   [PR] プログラミングで挫折しない学習方法を動画で公開中主要なイベント一覧 JavaScriptで発生する主要なイベントは、下記MDNのページで一覧にまとめられています。 MDN – イベントリファレンス   実際に使ってみよう 今回のサンプルプログラムでは、主要なイベントの中から「keydown」と「click」を使用してイベントリスナーの記述方法を確認しましょう。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <input type="text" id="text1"><br> <input type="button" id="button1" value="入力完了"> <div id="div1"></div> <div id="div2"></div> <script language="javascript" type="text/javascript"> const text1 = document.getElementById('text1'); const button1 = document.getElementById('button1');
JavaScript

JavaScriptでページ読み込み前に処理を実行する方法を現役エンジニアが解説【初心者向け】

JavaScriptでページ読み込み前に処理を実行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでページ読み込み前に処理を実行する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 DOMContentLoadedイベントとは ページ読み込み前に処理を実行する方法 実際に書いてみよう まとめ   DOMContentLoadedイベントとは HTMLの読み込みと解析が完了したときに発生するイベントです。スタイルシートや画像などの読み込みが終わっていなくても発生します。 それに対して、スタイルシートや画像などの全てが読み込み完了した後は、Loadイベントが発生します。この2つのイベントは処理をしたいタイミングに合わせて使い分けます。 上記の2つのイベントとページを表示する流れは下記のようになります。 HTMLの読み込み DOMContentLoadedイベント スタイルシートや画像などの全てのリソースの読み込み Loadイベント [PR] プログラミングで挫折しない学習方法を動画で公開中ページ読み込み前に処理を実行する方法 DOMContentLoadedイベントの発生タイミングで処理をおこなうことで、スタイルシートや画像などのリソースの読み込み前に処理をおこなうことができます。 DOMContentLoadedイベントの発生タイミングに処理を紐付ける方法について説明します。ブラウザに読み込まれたウェブページを表すDocumentオブジェクトに対して、addEventListenerメソッドを使い、DOMContentLoadedイベントと処理を関連付けます。 実際に書いてみよう 今回は処理を単純にするため、DOMContentLoadedイベントが発生したらコンソールにメッセージを表示するような処理にします。 document.addEventListener('DOMContentLoaded', (event) => { console.log(`DOMContentLoadedイベントが発生しました。`); }); これでDOMContentLoadedイベントと、コンソールに「DOMContentLoadedイベントが発生しました。」と表示する処理が紐づきました。 必要に応じて処理の内容は書き換えるだけで使用できます。 参考までに、Loadイベントで同様に処理を紐付けたい場合は、addEventListenerメソッドの第1引数のDOMContentLoadedをLoadに変更するだけです。 両方のイベントに処理を紐付けた場合はDOMContentLoadedイベントが先に実行され、その後にLoadイベントが実行されます。 まとめ DOMContentLoadedイベントを紹介しました。 ページが読み込まれる前に処理をする場合は、DOMContentLoadedイベントを使ってください。また、ページの読み込みの後に処理をする場合は、Loadイベントを使ってください。 使い分けることでより細かく画面を制御することができます。 筆者プロフィール 横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） プログラミング JavaScript JavaScriptでonkeydownを使ってキーを押したときのイベントを処理する方法を現役エンジニアが解説【初心者向け】