JavaScriptのコールバック関数の使い方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのコールバック関数の使い方について解説しています。コールバック関数とは、上から順番に実行されない関数のことです。プログラムは上から下へと実行されますが、コールバック関数は何らかの条件の後に登録され実行される関数のことになります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのコールバック関数の使い方について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptのコールバック関数の使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

コールバック関数とは

コールバック関数とは、他の関数に引数として渡される関数です。

コールバック関数はイベントハンドラとして多く用いられます。イベントハンドラとは、ボタンクリック時や通信完了時など、何らかのイベントが発生した際に実行する関数を指します。

コールバック関数について、詳しくは以下の記事を参考にしてください。

Callback function

 

コールバック関数の使い方

コールバック関数の使い方は以下の通りです。以下は、コールバック関数func1を、func2の引数として渡しています。

var func1 = function() { // 関数の定義 }
func2(func1);

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

今回のサンプルプログラムでは、同期型コールバックと非同期型コールバックの2つを確認します。

非同期型コールバックでは、以下のAPIテスト用のサイトを使用しました。通信が完了したタイミングでコールバックが実行されます。

https://jsonplaceholder.typicode.com/

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>sample</title>
</head>
<body>
  <button onclick="sayHello()">あいさつ(同期型コールバック)</button>
  <button onclick="sayHello2()">あいさつ(非同期型コールバック)</button>
  <script language="javascript" type="text/javascript">

  // 同期型コールバック

  // コールバックで呼ばれる関数
  function funcPrint(name) {
    console.log("こんにちは!", name, "さん");
  }

  // コールバックを呼ぶ関数
  function hello(name, callback) {
    callback(name);
  }

  // ボタンを押した時に呼ばれる関数
  function sayHello() {
    hello('煌木 太郎', funcPrint);
  }

  // 非同期型コールバック

  var funcPrint2 = function (response) {
    // コールバックで呼ばれる関数
    var data = this.response;
    console.log("こんにちは!", data.name, "さん");
  }

  // ボタンを押した時に呼ばれる関数
  function sayHello2() {
    var request = new XMLHttpRequest();
    request.open('GET', 'https://jsonplaceholder.typicode.com/users/1', true);
    request.responseType = 'json';
    // コールバックを呼ぶ関数
    // レスポンスが返って来た時にfuncPrint2が実行される。
    request.addEventListener('load', funcPrint2);
    request.send();
  }
  </script>
</body>
</html>

非同期型コールバックは同期型コールバックのソースコードと対比するとわかりやすいでしょう。

実行結果は以下のようになります。それぞれのボタンを押すと結果が表示されます。

 

筆者プロフィール

この記事を監修してくれた方

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握(実証実験)、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

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

大石ゆかり

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

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

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