コピペによって要素にアニメーションを実装できたのですが、コードの意味が分からないので解説してほしいです。

Question

前提

Reactで要素の表示・非表示にアニメーションを付けています。
下記は動作サンプルです。
サンプル

使用しているライブラリ

React Spring
アニメーションに使用しています。
上記のサンプルはReact Spring公式サイトのuseTransitionのページのサンプルを参考に作りました。

公式サイトの接続が不安定なので、githubのページも貼っておきます。
react-spring/react-spring: ✌️ A spring physics based React animation library

ソースコード

export default function App() {
  const [toggle, setToggle] = useState(false);
  const transition = useTransition(toggle, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  });

  return (
    <>
      <button onClick={() => setToggle(!toggle)}>表示切替</button>
      {transition(
        (props, item) =>
          item && (
            <animated.div style={props}>
              <div style={block} />
            </animated.div>
          )
      )}
    </>
  );
}

const block = {
  background: "red",
  height: "300px"
};

分からない点

return頭の

{transition(
        (props, item) =>
          item && (
            <animated.div style={props}>

が何をやっているのかがよく分かりません。
具体的に分からない点を下記に記載します。

---

分からない点1

transition変数にはuseTransition関数を実行した結果が代入されているかと思いますが、それを踏まえるとtransition(...)のように関数を呼び出す書き方でなぜエラーが出ないのでしょうか。

例えば、

const useTransition = (x, y) => {
  console.log(x * y);
};
const transition = useTransition(3, 2);

transition();

と書くと

transitions is not a function

というエラーメッセージが出ます。

const transition = useTransition;

transition();

上記のようにtransitionにuseTransition関数そのものを代入すれば、transition()が有効になります。

分からない点2

{transition(
        (props, item) =>
          item && (
            <animated.div style={props}>

transitionが関数だとすると、二つの引数を必要とする無名関数を引数にtransition関数を呼び出しているかと思いますが、この無名関数が必要とする二つの引数はどこから渡されているのでしょうか。

分かりやすくするために無名関数に名前を付け、関数の中身を変えて考えてみたのですが、

const mumei = (props, item) => {
  return props + item;
};

const transition = x => {
  console.log(x);
};

transition(mumei());

これだと具体的な数値を渡していないため、結果はundefinedになります。
transition(mumei(2,2))のように、mumei関数呼び出し時に数値を二つ与えれば結果が出ます。

挙動から見れば、無名関数の必要とする二つの引数の内、propsがtransition変数でitemが<animated.div>タブ以下のアニメーションを適用する要素かと思いますが、この項で述べた通り挙動とロジックの繋がりが理解できません。

分からない点3

{transition(
        (props, item) =>
          item && (
            <animated.div style={props}>

上記の

item &&

はどういった意味の記述なのでしょうか。

条件付きレンダーで

{ state && <div /> }

のようにbooleanの判定で&&を記述することはありますが、上記における&&の意味合いが分かりません。

---

以上になります。

挙動は上手く行っているので、これまで挙げた私の例え及び考え方や認識に誤りや足りない部分があるかと思います。
ですのでよろしければ正しい例えや理論をご教示いただけますと幸いです。

Answer 1

1と2についてお答えします。
useTransition関数は以下のような内容になっているはずです。

const useTransition = (x, y) => {
  const props='something'
  const item='something'
  return (callback)=>{
    const foo=callback(props, item)
    return 'something'
  }
}

関数を返す関数です。

Comments

[whoiwhoi]

ご回答いただきありがとうございます。関数を返す関数で考えたら理解できました。

Answer 2

3についてです。
以下が問題の無名関数ですよね。

    (props, item) =>
          item && (
            <animated.div style={props}>
              <div style={block} />
            </animated.div>
          )

これは、itemがfalseであればitemを出力、そうでなければ、<animated.divに続くコンテンツを出力します。
以下の記事が参考になります。
https://qiita.com/Imamotty/items/bc659569239379dded55

Comments

[whoiwhoi]

参考記事確認しました。条件分岐の省略形だったのですね。やっとこさ理解できました。ありがとうござました。