TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでページ読み込み前に処理を実行する方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
JavaScript

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

初心者向けにJavaScriptでページ読み込み前に処理を実行する方法について現役エンジニアが解説しています。ページ読み込み前に処理を実行するにはDOMContentLoadedイベントを使います。HTMLの読み込みや解析が完了した時に発生するイベントで、まだスタイルシートや画像は読み込まれていません。

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

JavaScriptでページ読み込み前に処理を実行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptでページ読み込み前に処理を実行する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

DOMContentLoadedイベントとは

HTMLの読み込みと解析が完了したときに発生するイベントです。スタイルシートや画像などの読み込みが終わっていなくても発生します。

それに対して、スタイルシートや画像などの全てが読み込み完了した後は、Loadイベントが発生します。この2つのイベントは処理をしたいタイミングに合わせて使い分けます。

上記の2つのイベントとページを表示する流れは下記のようになります。

  1. HTMLの読み込み
  2. DOMContentLoadedイベント
  3. スタイルシートや画像などの全てのリソースの読み込み
  4. 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制作でメールアドレス入力フォームを作ることがあります。 入力された文字が、きちんとメールアドレスの形式になっているか確かめたいですよね。 そん...
JavaScript

JavaScriptのAudioオブジェクトの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのAudioオブジェクトの使い方について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向...
JavaScript

JavaScriptでフォーム要素にdisabledを設定・解除する方法を現役エンジニアが解説【初心者向け】

JavaScriptでフォーム要素にdisabledを設定・解除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向け...
JavaScript

JavaScriptで関数の引数にオブジェクト型データを指定する方法を現役エンジニアが解説【初心者向け】

JavaScriptで関数の引数にオブジェクト型データを指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向け...
JavaScript

JavaScriptでクイズアプリを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでクイズアプリを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 J...
JavaScript

JavaScriptで文字列を日付オブジェクトに変換する方法を現役エンジニアが解説【初心者向け】

JavaScriptで文字列を日付オブジェクトに変換する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
JavaScript

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

読み込み時にイベント処理を！JavaScriptでonloadを使う方法【初心者向け】現役エンジニアが解説

JavaScriptでonloadを使う方法について解説しています。 読み込み後、何かアクションを起こしたい時に役立つので、書き方をきちんと覚えておきましょう。   目次 onloadとは onloadの書き方 実際に書いてみよう onloadの注意点 まとめ   onloadとは onloadとは、HTMLなどの文書を操作するときに利用するイベントハンドラー（※1）のことです。 onloadは、ページや画像などのリソース類を読み込んでから処理を実行したいときに利用します。 利用ケースとしては、スライダーや画像ギャラリーのような画像を読み込んでから処理を実行したいときなどが挙げられます。 ※1 イベントハンドラーとは、特定のイベントが発生したときに実行される処理のことです。   [PR] コーディングで副業する方法とはonloadの書き方 onloadの書き方は以下のようになります。 obj.onload = function() { // ここに読み込みが完了したら実行したい処理を記述する } objには、windowオブジェクトやHTMLのbodyタグ、imgタグなどの要素を指定することができます。 そして、指定した要素の読み込みが完了したら、処理が実行されます。 そのため、指定する要素によって処理が実行されるタイミングが変わります。   例）指定した要素による実行タイミングの違い windowオブジェクトを指定した場合 ページの読み込みが完了したタイミングで処理が実行される HTMLのimgタグを指定した場合 ページの読み込み状況にかかわらず、imgタグの読み込みが完了したタイミングで処理が実行される   実際に書いてみよう ページが読み込まれたら実行する 以下の例を実行すると、windowオブジェクトが読み込まれたタイミングで処理が実行されていることが分かります。 window.onload = function() { alert("ページが読み込まれました！"); };   上記の例は以下のようにも記述できます。 function load() { alert("ページが読み込まれました！"); } window.onload = load;   画像が読み込まれたら実行する 下記は、画像が読み込まれたタイミングで処理を実行する例です。 var img = new Image(); img.onload = function() { alert("画像が読み込まれました！"); }; img.src = 'xxx.png';   onloadの注意点 onloadによるイベントハンドラーは、同一要素の同一イベントに対して複数のイベントハンドラーを設定することができません。 もし、同一要素の同一イベントに対して複数のイベントハンドラーを設定したい場合には、addEventListenerを使用しましょう。 addEventListenerの詳しい説明はこちらにあります。   また、onloadはページや画像などのリソース類を読み込んでから処理を実行したい場合に使用しますが、読み込みを待たずに処理を実行したい場合にはDOMContentLoadedを使用します。 DOMContentLoadedの詳しい解説はこちらにあります。   まとめ onloadはページの見た目部分を操作するDOM（Document Object Model）において非常によく利用するイベントになりますので、ぜひ覚えておきましょう。 普段見ているWebサイトでもよく使われているので、JavaScriptの基本として理解しておくと良いでしょう。   執筆してくれたメンター メンターSSさん 文系・未経験でIT企業に就職して、9年目。 環境構築から開発・設計・テストまで何でも屋さんをやっていました。 テックアカデミーではJavaコースを担当しています。   JavaScriptを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を完全オンラインでしっかり習得できます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
JavaScript

簡単に変換できる！PHPでCSVファイルを読み込む方法【初心者向け】現役エンジニアが解説

PHPでCSVファイルを読み込む方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 fgetcsv関数を使ってCSVファイルを読み込めば、表計算ソフトなどからPHPにデータを取り込めます。 たとえば、Excelで作った商品リストをCSVファイルで保存し、PHPで取り込めばショッピングサイトのデータとして活用できますし、Googleスプレッドシートで作成したタスクリストをCSVにしてPHPで読み込めばタスクの共有ができるアプリケーションが作成できます。 このように、他のアプリで作ったCSVファイルのデータ活用するために覚えておきたい知識なので、参考にしてみてください。   目次DOMContentLoadedイベントとはページ読み込み前に処理を実行する方法実際に書いてみようまとめ筆者プロフィール   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回はCSVファイルをPHPで読み込む方法をやっていくよ。 大石ゆかり 田島メンター！その前にちょっといいですか？ 「CSV」って何ですか？ 田島悠介 じゃあ、CSVとは何かを教えるね。 ゆかりちゃんは表計算ソフト、例えば「Excel」とか「Google スプレッドシート」は使ったことあるかな？ 大石ゆかり それならありますよ。大学時代にレポート作成でExcelを使ってましたし、仕事ではGoogle スプレッドシートを使っています。 田島悠介 もし、ゆかりちゃんが入力したデータをPHPのプログラムで読み込ませたいと思ったらどうしたらいいかな？ 大石ゆかり データを保存したファイルをPHPで読み込めばいいんじゃないですか？ PHPってファイルの読み込みもできましたよね？ 田島悠介 たしかに、PHPではファイルの読み込みができるんだけど、ExcelやGoogle スプレッドシートの専用ファイルはそのままでは読み込むのが難しいんだ。 PHPのファイル読み込みは、標準では文字だけで構成されたテキストファイルで作成されていることが前提だからね。 大石ゆかり そうなんですね・・・。じゃあ、表計算ソフトで保存するときPHPでも読み込めるテキストファイルの形式で保存したらいいんですか？ 田島悠介 その通り！さすがゆかりちゃん、理解が早い。 そのPHPにも対応しているテキストファイルの形式の1つがCSVファイルというわけだね。 大石ゆかり なるほどぉ。 今Google スプレッドシートでCSVの形式にエクスポートしてみました。 カンマ付きのシンプルな文字だけになるんですね。   Googleスプレッドシートの画面   名前,年齢,血液型 太郎,21,O ジョン,23,A ニキータ,32,AB 次郎,22,B CSVファイルの中身 田島悠介 そうだね。CSVファイルはカンマかタブ文字で区切られるんだ。 ちなみにCSVファイルはほとんどのアプリが対応しているから、PHPなどのプログラムからの読み込みだけでなく、アプリ同士でデータをやり取りしたいときにもよく使われるよ。 ただ、データの中身の文字だけしか保存されないから、罫線や文字色などの情報はなくなるけどね。 大石ゆかり CSVについてはよく分かりました！ 今回はそのCSVファイルをPHPで読み込む方法を教えてもらえるんですね！ 田島悠介 そういうことだね。 CSVは、読み込みと出力のそれぞれ書き方が違うから、今回は「読み込み」の方法について説明するね！ 大石ゆかり お願いしまーす！！   CSVファイルを読み込む関数「fgetcsv」 PHPでは、CSVファイルを読み込んで配列の形にしてくれる「fgetcsv関数」という関数があります。 fgetcsv関数を使うためには、まず対象のCSVファイルを開いておく必要があります。   ファイルを開く「fopen」 CSVファイルを開くには、fopen関数を使います。 $file_handler = fopen("読み込むCSVファイルのパス", "r"); fopen関数の戻り値で、読み込んだファイルを管理している名前（ファイルハンドル）を取得します。 fopen関数の2つ目のパラメータはファイルにアクセスする形式、つまり開いたファイルの書き込みを可能にするかどうかなどのファイルをアクセスする状態を設定します。 “r“は読み取り専用、つまり書き込みしない状態でファイルを開きます。 ※もし、対象ファイルが存在しなかったりファイルのアクセス権がない場合には、fopenは失敗しwarningを発行してFALSEを戻り値として返します。   CSVファイルを1行ずつ配列で読み込む「fgetcsv」 ファイルハンドルが取得できたら、fgetcsv関数でCSVファイルを1行ずつ読み込みます。 $data = fgetcsv($file_handler);   読み込まれた1行分のデータを項目（データ列）ごとに配列として戻り値で取得します。 たとえば下記のようなCSVファイルなら、1回目にfgetcsv関数を呼び出したときは、1行目のデータである「名前」「年齢」「血液型」の文字列が配列に代入されます。 名前,年齢,血液型 太郎,21,O ・ ・ ・   実際に書いてみよう では実際にプログラムを書いてみましょう。 事前に、以下のように書いた「test.csv」ファイルを作成しておきます。 名前,年齢,血液型 太郎,21,O ジョン,23,A ニキータ,32,AB 次郎,22,B   それでは、プログラムを書いてみましょう。 <?php // 読み取り専用でtest.csvを開きます。 $f = fopen("./test.csv", "r"); // test.csvの行を1行ずつ読み込みます。 while($data = fgetcsv($f)){ // 読み込んだ結果を表示します。 var_dump($data); } // test.csvを閉じます。 fclose($f); ?> 簡単にソースコードの説明をします。 最初に読み取り専用でtest.csvファイルを開き、while文で1行ずつファイルを読み込みます。 読み込んだ結果の配列を、var_dump関数でCSVファイル1行分のデータを表示しています。   以下、実行結果です。 1行ずつ読み込まれて、配列の形になっているのがわかります。   まとめ CSVファイルを読み込むときは、まずfopen関数でファイルを開きます。 そして、fgetcsv関数を使って1行ずつ配列にデータを読み込みます。   タブ文字で区切られたファイル 大石ゆかり 田島メンター、教えてもらった方法でデータをPHPで読み込もうとしたんですがうまくいきません・・・ 田島悠介 それは、データの区切り文字が違うからだよ。 CSVはカンマ区切りだけど、別の種類でタブ区切りのファイル形式が使われることがあるんだ。 大石ゆかり そうなんですね。よく見るとファイルの拡張子が.tsvになっていました。 田島悠介 そうだね。タブ区切りのファイルはtxtやtsvといった拡張子が使われるね。 タブ区切りのファイルを読み取るにはさっきと同じfgetcsv関数が使えるけど、パラメータを指定する必要があるよ。 大石ゆかり タブ区切りのファイルでも読み込めるんですね。 PHPで読み込む方法を教えてください！ fgetcsv関数でタブ区切りのファイルを読み込む fgetcsv関数でタブ区切りのファイルを読み込むには、3つ目のパラメータseparatorで区切り文字を指定します。 $data = fgetcsv($f, 0, "t") 今回はタブ区切りのファイルを読み込みたいので、区切りとしてタブ文字「t」を指定します。 ※2つ目のパラメータはlengthで、分割しない1行の最大文字数（改行文字なども含む）を指定します。0を指定するか省略すると、最大行長は制限されません。 (PHP 5.1.0以降)   まとめ タブ区切りのファイルをfgetcsv関数で読み込むときは、3つ目のパラメータでタブ文字 “t” を指定します。   [PR] コーディングで副業する方法とは空行がある場合 大石ゆかり CSVファイルを読み込んだら、値が空の配列が混じっていました。 田島悠介 それは読み込んだCSVに空の行が入っていたからなんだ。 1行ずつ繰り返すループの中で、空行かどうか判定する式を追加するだけで解決できるよ。 CSVファイルの読み込み時に空行の判定をする CSVファイルに空の行が含まれている場合、PHPの条件式で判定を行うコードを追加すれば、余分な空っぽの値が配列に入るのを防げます。 配列の1行分の要素すべてが空かどうか、配列の要素を文字列としてつなげて判定します。 1行分の配列の要素を文字列として結合するのに、implode関数を使います。   空行判定のコード例 配列に値があるかどうかで空行の判定をしています。 <?php // 読み取り専用でtest.csvを開きます。 $f = fopen("test.csv", "r"); // test.csvの行を1行ずつ読み込みます。 while($data = fgetcsv($f)){ // 1行分の要素すべてを文字列として結合しても空ではない、つまり空行でなければ出力します。 if(implode($data) != null){
PHP

JavaScriptでCSVファイルを読み込む方法を現役エンジニアが解説【初心者向け】

JavaScriptでファイルを読み込む方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次DOMContentLoadedイベントとはページ読み込み前に処理を実行する方法実際に書いてみようまとめ筆者プロフィール そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでファイルを読み込む方法について詳しく説明していくね！ 大石ゆかり お願いします！   JavaScriptによるファイルの読み込み Webサイトでは、ファイルをアップロードすることでアプリケーションの機能を利用することがよくあります。 例えばマイページがあるようなサイトで、自身のプロフィール画像を登録するために画像ファイルを登録する時には、ファイルをアップロードすることになります。 本記事では、ファイルの読み込み方法と、読み込んだ後の処理の方法について、ファイルの種類別に解説していきます。   実際にファイルを読み込んでみよう ファイルを読み込んで、JavaScriptで取得するまでの一連の手順を紹介します。   1．input要素をHTMLに記述する ファイルを読み込むには、まずHTMLに要素を追加する必要があります。 追加する要素はinput要素で、type属性に”file”を指定します。 また、あとでJavaScriptで取得できるよう、任意のidをつけておきましょう。 <input id="upload-file" type="file">   ブラウザで確認してみると、ファイルを選択できるボタンが設置されています。 「ファイルを選択」より任意のファイルを選ぶと、ブラウザ内に自動的にファイルが読み込まれます。   2．input要素をJavaScript側で取得する 1で指定したid属性の値によって、input要素を取得します。 idによる要素の取得には、document.getElementByIdを用います。 const input = document.getElementById('upload-file');   3．ファイルの読み込みを検知する ファイルを取得するには、「input要素にファイルが指定された」というイベントを検知する必要があります。 ファイルのアップロードは、changeというイベント名で取得できます。 changeイベントを取得するには、addEventListenerを用いて以下のように書きます。 input.addEventListener('change', (e) => { console.log('ファイルが検知された！'); }); 1行目の後半から始まる関数は、イベントリスナの「コールバック関数」と呼ばれ、指定したイベントが発生したタイミングで実行されます。 コールバック関数の関数の引数として、 e という変数が指定されていますね。 引数 e は、ファイルの情報を取得するための重要な引数です。 eについて、次の項目で詳しく説明します。   4．読み込まれたファイルを取得する 3では、「ファイルが読み込まれた」という状態を検知しましたが、まだファイルの中身は取得できていません。 アップロードされたファイルの情報を得るには、イベントリスナのコールバック関数の引数を利用します。 input.addEventListener('change', (e) => { console.log(e.target.files[0]); }); コールバック関数の引数（ここではe）には、発生したイベントに関する情報が入っています。 そのなかで、e.target.filesは、アップロードされたファイルが配列になっています。 アップロードされたファイルが1つならば、e.target.files[0]でそのファイルを取得できます。 ※複数ファイルのアップロードについては本記事の最後に紹介します。   一連の処理を行ってみよう それでは、解説した1〜4の処理を実際に行ってみましょう。 完成形のコードは以下の通りです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input id="upload-file" type="file"> <script> //JavaScriptの記述
JavaScript

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

JavaScriptのaddEventListenerの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次DOMContentLoadedイベントとはページ読み込み前に処理を実行する方法実際に書いてみようまとめ筆者プロフィール そもそも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でsubmitボタンのonclickイベントに処理を追加する方法を現役エンジニアが解説【初心者向け】

JavaScriptでsubmitボタンのonclickイベントに処理を追加する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 submitボタンのonclickイベントに処理を追加する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 submitボタンとは clickイベントについて submitボタンのclickイベントに処理を追加する方法 実際に書いてみよう まとめ   submitボタンとは submit とはWebページからサーバーに情報を送信することです。input 要素の type に submit を指定することで submit ボタンにすることができます。 <input type="submit" value="送信"> 関連記事：submitをCSSでおしゃれに設定する方法を現役エンジニアが解説【初心者向け】   [PR] コーディングで副業する方法とはclickイベントについて HTML 要素をクリックすると click イベントが発生します。イベントが発生した際に処理を行うにはイベントリスナーを紐付けます。 HTML要素.addEventListener('click', (e) => { // イベント発生時に行う処理 }   submitボタンのclickイベントに処理を追加する方法 submit ボタンには「form を submit する」という規定の動作が割り当てられています。submit ボタンの click イベントに処理を追加するには、まず規定の動作をキャンセルする必要があります。規定の動作のキャンセルは preventDefault() 関数で行います。 HTML要素.addEventListener('click', (e) => { // 規定の動作をキャンセル e.preventDefault();   // イベント発生時に行う処理 }   実際に書いてみよう 今回のサンプルプログラムでは submit ボタンの click イベントに処理を追加する方法を確認します。例として「入力された名前が5文字以上かチェックする」処理を追加してみましょう。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <form action="" method="get"
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

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

オーダーメイドコース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでページ読み込み前に処理を実行する方法を現役エンジニアが解説【初心者向け】