質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.91%

ES6の文法でわからないところが

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 4,452

mattun

score 30

コードがわからなくて困っております。

ちなみにこれはreact-reduxのコードを見ております。

arrow関数が連続で使用されている場合どの順番で評価されて行くのか理解できないです。

function createThunkMiddleware(extraArgument) {
  //このreturnでarrow関数を呼び出してnextもactionも多分関数なのでしょうか?どのようにかんがえたらよいのか。。。
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

上のコードの2行目のところが何をやっているのかわからなくて困ってます。

ES5風に書くと

return function({dispatch, getState}){
  next({dispatch, getState}){
    action({dispatch, getState})
  }
}

のような処理が実行されているということでしょうか?

ちなみにこれはreact-reduxのコードを見ております。
宜しくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+7

この書き方は関数型プログラミングでよく使われるカリー化された関数の作り方です。

例えば、

const f = x => y => z => x + y + z;
console.log(f(1)(2)(3));

これは右から左に結合されて、

const f = (x) => {
  return (y) => {
    return (z) => {
      return x + y + z;
    };
  };
};
console.log(f(1)(2)(3)); // => 6

と解釈され、ES5に変換すると

var f = function f(x) {
  return function (y) {
    return function (z) {
      return x + y + z;
    };
  };
};
console.log(f(1)(2)(3));

となります。実際にBabelで変換してみて、どうなるかを見てください。

カリー化された関数というのは関数を返す関数、いわゆる高階関数の一種です。この関数は、引数を一つ取り、引数を一つ取る関数を返します。無限にネストすることができますので、どんどん深めることができます。複数の引数を取る関数との違いは、簡単に部分適用することができると言うことです。上の例ですが、

const f = x => y => z => x + y + z;
const g = f(1);
console.log(g(2)(3)); // => 6
console.log(g(4)(5)); // => 10

というような書き方ができます。

その他、これがどのように役に立ち、どのように振る舞うかというのはちょっと言葉では言い表せないです。たぶん、Haskell等の本物の関数型言語で関数型プログラミングを学ばないと感覚的な物はつかめないと思います。JavaScriptは関数型言語としての最低条件のもの(関数が第一級オブジェクトであると言うもの)はありましたが、言語としては決して関数型プログラミングしやすい物ではありませんでした。ES6以降に追加されたアロー関数やRamda等便利なライブラリを使うことで、なんとか関数型プログラミングが可能な物になってきています。そのため、Redux等の最近のライブラリは関数型プログラミングの考えを取り入れた物が多くなっているようです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+3

とりあえず使ってみました。

var _お寿司屋さん = createThunkMiddleware('さび抜き')
({dispatch:'まぐろ', getState:2})
(
  () => alert('売り切れだよ!')
);

_お寿司屋さん(
  (x,y,z) => alert(`${x}${y}貫おまち!${z}ね!`)
);
//まぐろ2貫おまち!さび抜きね!

_お寿司屋さん('品切れ');
//売り切れだよ!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

実行結果としては関数が返る形です。
なので、thunkの中には関数が入っています。

function createThunkMiddleware(extraArgument) {
  return function({dispatch, getState}) {
    return function(next) {
      return function(action) {
        if (typeof action === 'function') {
          return action(dispatch, getState, extraArgument);
        }
        return next(action);
      };
    }
  }
};

const thunk = createThunkMiddleware();

/*
function({dispatch, getState}) {
    return function(next) { (略) }
}
*/

さらにthunkを実行すると、1つ内側の関数が返されます。
基本はそれだけです。

thunk();

/*
function(next) {
 return function(action) {(略)};
}
*/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る