javascriptのコールバック関数について

Question

コールバック関数の書き方がイマイチわかっていません。
例えば下記のように書いたとします。

function aiueo(){
console.log("aiueo");
}

function hello(){
console.log("hello");
}

この時、必ずhelloを実行してからaiueoを実行したいとなった時に、私が調べた文献によると引数に関数を入れるということだったので
コードは下記のようになりますよね。

function HelloThenAiueo(callback){
hello();
callback();
}

そして呼び出す際にやっと引数に関数を入れて無事にコールバックが行われます（もしかしたら間違っているかもしれません）

HelloThenAiueo(aiueo);

以上のように処理の順番を変えるのに
１、一つ目の関数を定義する
２、二つ目の関数を定義する
３、順番が変わるようにコールバック関数を定義する
４、呼び出す

というように、処理の順番を変えるのに４ステップかかってしまいます。
もっと短く書く方法はあるのでしょうか？
それともこれがコールバック関数という地獄と呼ばれる物なのでしょうか？
もし短くスマートに書く方法がありましたら教えて欲しいです。

個人的には３つ目の二つの関数の順番を確定させるためにわざわざ三つ目の関数を定義する、というステップが一番無駄だと思っています。

Answer 1

もし短くスマートに書く方法がありましたら教えて欲しいです。

ただ並べて書くだけです。

hello();
aiueo();

Comments

[maisumakun]

単に「そのまま動くもの」の順番を変えるのにコールバック関数を使うのは無駄です。

[maisumakun]

「クリックされた時に」動く、「通信データが返ってきた」段階で動く、「配列の各要素」について1つに1回ずつ呼び出す、「条件によっては」呼ぶ必要があるなど、「同期的に1対1で実行する」わけではない場面が、コールバックを必要とする場面です。

Answer 2

結論としては以下を覚えて帰りましょう。

• 関数は引数や戻り値にして色んな所へ持ち運べる
• 変数や引数などのお尻に()をつければ何でも実行出来る
• 上2つを利用して、最善のタイミングまで関数の実行を待ってもらって、他人に実行を移譲する事が実現出来る

そこに至るまでに軽く解説していきます

処理の順番を変えるのに４ステップかかってしまいます。

もっと短く書く方法はあるのでしょうか？

ES2015で足されたアロー関数等を利用すればもう少し綺麗に書けますが

しかし、そもそもコールバックは普通の書き方を複雑にするだけなので
「他の手段も考えたけど、どうしてもこれが最善だ！」
というケース以外では使い物になりません。

普通に書けよ間抜けと罵倒されてしまいますね。
まさに同じ感想抱いていませんか？

じゃあどんなケースがコールバック使うのが最善になるの？

JavaScriptというのは基本的にブラウザ上で実行される言語です。
ブラウザはマウスをしゅっと動かすだけでAの要素にホバーされた！Bの要素のホバーが解除された！という風にイベントが大量に飛び交っています。

これのイベントをlistenして、
該当するイベントが呼び出された時に登録しておいた関数を実行するという仕組みになっています。

その最もよくある例がaddEventListenerであり、
elm.addEventListener('click', aiueo)という風に
アプリを作る側のエンジニアはコールバック関数を利用するだけで、
コールバック関数の記述を書く事はめったにありません。
これがコールバック関数の「最善のタイミングまで関数実行を遅らせる」の有効活用が出来た一例でしょう。

我々、Webサイトのエンジニアが書くのは
毎回elm.addEventListener('click', fn)と書くのは面倒やな…せや！

const elm = document.querySelector('.hoge');
const click = (elm, cb) => elm.addEventListener('click', cb);

// 楽になったわ
click(elm, aiueo);

// promise化したいな
const listen = (elm, type) => new Promise(resolve => {
  elm.addEventListener(type, resolve);
});
const main = async () => {
  await listen(elm, 'click');
  console.log("クリックされたで");
}
main();

とまぁ、こんな感じで「そもそもコールバック関数を要求する関数を扱う」ラッピング関数を書く程度だと思います。
必要に応じて作れるようになると捗るので覚えて損はないですが、
暫くの間は別に嬉しくもないので別の勉強した方が良いと思います。

Answer 3

hello()自体がcallbackを受ければいいんじゃないでしょうか？

function hello(callback){
    console.log("hello");
    if (callback) {callback()};
}

hello();
hello(function(){console.log("aiueo");});
hello(function(){console.log("kakikukeko");});

結果

hello
hello
aiueo
hello
kakikukeko

Answer 4

３つ目の二つの関数の順番を確定させるためにわざわざ三つ目の関数を定義する、というステップが一番無駄だと思っています

必要な処理であるなら無駄というものはありません。

callback関数は、何らかの処理結果を引数に受け付けることのできる関数でもあります、単純に順序云々という代物ではありません。

コールバックを実行する関数（HelloThen..）は、必要なら内部実装も膨大にもなりますし、コード上で行数を抑え、見やすくするために外部関数化されることもあります。

---

もし短くスマートに書く方法

jQuery の登場時に生まれた メソッドチェーン を実現するオブジェクトの定義手法を紹介しておきます。メソッドが thisを返すかぎり、処理を繋ぐことができるのが特徴で、ご質問のように順序を入れ替える必要があるときに使えるかもしれません。

const oj = {
  callback : null,
  setCb( cb ) {
    this.callback = cb;
    return this;
  },
  hello() {
    console.log( "hello" );
    return this;
  },
  aiueo() {
    console.log( "aiueo" );
    return this;
  },
  fire() {
    if ("function" === typeof this.callback) {
      this.callback()
    }
  }
}

// メソッドチェーンでの実行
oj.setCb(()=>console.log("hoge"))
  .hello()
  .aiueo()
  .fire();

oj.aiueo()
  .setCb(()=>console.log("hogu"))
  .hello()
  .fire();

---

これがコールバック関数という地獄と呼ばれる物なのでしょうか？

違います。受け付けた引数を次々と伝搬しなければならないときに、関数がネストして読みにくくなることをコールバック地獄と言います。

たとえば NodeJS でフレームワークを使わずに、チョットしたサーバー処理を書こうと以下のようなコードを書くとき、app 関数の内部実装です。

// NodeJS
const http=require("http")

const app = function( request, response ) {
  // any process #1
  function( request, response ) {
    // any process #2
    function( request, response ) {
      // any process #3
      function( request, response ) {
        // any process #4
        // サーバーからクライアントへのレスポンス処理
        response.writeHead( err, headers, opt );
        response.end( body );
      }
    }
  }
}

http.createServer( app ).listen(8080);