【JavaScript入門】初めてのコールバック関数の書き方と応用例!

こんにちは、ライターのマサトです!

今回は、特定の処理を意図したタイミングで実行できるコールバックについて学習をしていきましょう!

ある処理を実行したらこちらの処理を実行する…みたいなフローの制御が行えるようになります。

この記事では、

「コールバック」とは?
「コールバック」の使い方

という基本的な内容から、

「Ajax」でコールバックを使う
「bind」でコールバックに引数を使う

などの応用的な使い方に関しても解説していきます。

この記事で、コールバックをしっかり学習して自分のスキルアップを目指しましょう!

「コールバック」とは?

それでは、まず最初に「コールバック」の基本的な知識から学習を進めていきましょう!

「コールバック」は、簡単に言うと関数の引数に別の関数を指定する処理を指します。

これにより、Aという関数が実行されたあとに引数で指定していたBという関数を実行するということが可能になります。

よく使われるケースとして、例えばサーバーからデータを取得したあとに次の処理を実行したいという場合です。

サーバーへのアクセスは時間が掛かるため、処理を待たないで実行すると不具合の原因にも繋がります。

本記事では、コールバックの基本から応用まで学習できるように構成しているのでぜひ参考にしてみてください!

「コールバック」の使い方

この章では、コールバックの基本的な書き方や使い方について学習をしていきましょう。

一般的な構文や実際のプログラミング手法、即時関数の活用について学んでいきます。

コールバックの構文と書き方について

まずは、もっとも基本となる構文から見ていきましょう!

と言っても、方法は簡単で一般的な関数の引数に別の関数を指定して実行するだけです。

このように、通常の関数を記述する感覚で処理を実行していきます。

少し違うのは、引数に指定しているのが関数なので処理の最後にその関数を実行する記述をする点です。

これにより、関数が実行されたあとに引数で指定した関数が順番に実行するようになるわけです。

基本的なコールバックの実行方法

それでは、実際のプログラミング手法を見てみましょう。

コールバックの処理が分かりやすいように「setTimeout()」を使ってわざと時間の掛かる処理を作ってみます。

この例では、「testFunc()」という関数を作ってわざと2秒の時間を要する処理を記述しています。

引数には「callback」と記述していますが名称は何でも構いません。

重要なのは、処理の最後に引数で指定した関数を実行するということです。

次に、引数で指定する関数を以下のように作ります。

これは単純な文字列をコンソールログへ出力するだけの簡単な関数ですね。

そして、コールバックを使って処理を実行するには次のように記述します!

実行結果

最初に作成した「testFunc()」の引数に関数を指定しているのが分かりますね。

「testFunc()」は2秒掛かる処理を行ってから「myCallback()」関数をコールバックして実行します。

実行結果を見ると順番に関数が実行されているのが分かりますね!

即時関数(無名関数)を使ったコールバックの作り方

先ほどは、関数の引数に別の関数を指定すると解説しました。

しかしながら、単純な処理であれば即時関数(無名関数)を使った方が効率が良いこともあります。

もう一度、コールバックの記述を見てみましょう!

コールバック処理を記述した関数の引数に、別の関数を指定していますね。

これを即時関数に置き換えると次のようになります。

実行結果

引数へ関数を直接記述していますね。

このようにしても実行結果は同じで、順番通りに関数が実行されているのが分かります。

「Ajax」でコールバックを使う

この章では、「Ajax」通信によるコールバックの使い方について見ていきましょう!

主に、Ajaxの基本と実際のコールバック処理について学んでいきます。

Ajaxの基本的な使い方について

まずは、Ajaxの基本についておさらいをしておきましょう!

Ajax通信を行うと非同期処理が可能になり、処理の結果を待たなくても次の処理が行えるようになります。

例えば、サーバーから何らかのデータを取得する場合、結果が返ってくるまで待つ必要がないわけです。

一般的にJavaScriptでAjax通信を実現するには、「XMLHttpRequest()」を利用します!

この例では、サーバーから「sample.json」というファイルを非同期で取得する処理を行っています。

最終的に取得したデータを利用して処理を記述するのが一般的です。

Ajax通信についてまだよく分からない方は、次の記事で体系的にまとめているのでぜひ参考にしてみてください!

【JavaScript入門】Ajaxの使い方とGET・POST通信まとめ!
更新日 : 2019年3月28日

Ajaxでコールバックを使ったデータ取得方法

それでは、実際にAjax通信を使ったコールバックを作成してみましょう!

まずは、先ほど作成したAjaxのプログラムを関数内に記述していきます。

この例では、「getJsonData()」という関数内にAjaxの処理を記述しています。

この関数はコールバックを使うので、引数に別の関数を指定するように記述しているのがポイントです。

そして、サーバーから取得したデータをコールバック関数に設定しているのが分かりますね。

次にコールバック関数を作ってみましょう!

取得したデータから「name」プロパティだけを抽出してコンソールログへ出力しています。

そして、次のように記述することでコールバックは実行されます!

まず最初に「getJsonData()」が実行されてサーバーからデータを取得します。

そのあとに、「getUserName()」を実行してnameプロパティだけを抽出してコンソールに出力するという流れです。

「bind」でコールバックに引数を使う

この章では、「bind」を活用したコールバック処理について見ていきましょう!

主に、bindの基本とコールバックに引数を設定する方法について学んでいきます。

bindの基本的な使い方について

まずは、bindの使い方について見ていきましょう!

「bind」は、対象となる関数の「this」を変更(固定化)したり、新しく引数を設定することができるメソッドになります。

例えば、次のような関数があるとします。

これは、単純にthisの値を返すだけなので結果は「windowオブジェクト」が出力されます。

これをbindを使ってthisの値を変更するには次のように記述します。

bindの引数に注目してください!

文字列が指定されていますが、実行するとwindowオブジェクトではなく設定した文字列が出力されます。

つまり、thisの値を任意のデータに変更できるわけです。

さらに、引数を設定することも可能です。

こちらもbindの引数に注目してください!

今回はthisの値を変更しないので第1引数はnullにして、第2引数に「10」を設定しています。

これにより、sample関数の引数へ「10」が設定されるというわけです。

bindでコールバックに引数を設定する方法

bindの基本が分かったところで、実際にコールバックへ組み込んでみましょう!

まずは次のようなコールバック処理を見てください!

この例では、「myCallback()」の引数に「name」が設定されているという点に注目してください。

このまま実行すると「name」の部分が何も指定されていないので「undefined」になってしまいます。

このようなケースで、あとから引数に何らかの値を設定するにはbindが便利です。

実行結果

この例では「myCallback()」にbindを使って引数を設定しているのが分かります。

これにより、実行結果のようにコールバック関数の引数へ任意の値を指定できるわけです。

まとめ

今回は、関数の引数に別の関数を指定して処理を制御できる「コールバック」について学習をしました。

最後に、もう一度ポイントをおさらいしておきましょう!

・コールバックは通常の関数に別の関数を実行する処理を記述する
・コールバックを使うと意図的に処理の順番を制御して実行できる
・bindを使うとコールバック関数へ任意の値を引数に設定できる

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

JavaScriptカリキュラム無料公開中!


この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。

JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。

JavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】
更新日 : 2018年12月13日

JavaScriptを最短で習得したい方へ

弊社マンツーマンレッスンでは、未経験者の方でも安心して学習できるように

  • プログラミング基礎学習
  • オリジナルアプリ開発
  • 仕事獲得

まで徹底したサポートを行っています。

まずは『無料体験レッスン』で、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか?

JavaScriptならではの学習方法や仕事獲得方法など、より具体的なアドバイスもさせていただいています。

詳しくは下の画像をクリックして弊社サービス内容をご確認ください。

cta_js5

非常識な結果を出す卒業生多数!

エンジニアキャリア戦略

人気記事セレクション

3000名以上来場の人気セミナーが開催決定

18歳で時給6000円だった侍エンジニア塾代表の木内より、『プログラミングで人生を変える』ための学習方法をお教えます。

0からプログラミングを習得し、フリーランスエンジニアになる方法プログラミング学習の効率を劇的に上げる学習メソッドを解説しますので、奮ってご参加ください。

  • 日付:4/20(土),4/27(土)
  • 時間:14:00〜17:35終了予定
  • 場所:当社 道玄坂オフィス
  • 住所:〒150-0043 東京都渋谷区道玄坂2丁目11-1 Gスクエア渋谷道玄坂 4F *Googleマップでは「東京都渋谷区道玄坂2丁目11-1」で検索してください。近隣にスクエア渋谷という別のビルがあるためご留意ください。
  • 参加費:無料
  • URL:https://seminar.sejuku.net/
詳しくは下の画像をクリックして弊社セミナー内容をご確認ください。

LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。