Reactにおけるオーディオプレイヤーの作成

Question

前提・実現したいこと

Reactを用いてのオーディオプレイヤーの作成

発生している問題・エラーメッセージ

ボタンクリックでtogglingという関数を呼び出しているが、togglingが実行されず、playingの値が変更されないため、際レンダリングされずにAudioが再生されない。

該当のソースコード

const url = "http://www.ne.jp/asahi/music/myuu/wave/hana.mp3";
  const useAudio = (url: string) => {
    const [audio] = useState(new Audio(url));
    console.log(audio);
    const [playing, setPlaying] = useState(false);
    const toggling = useCallback(e => {
      setPlaying(!playing);
      console.log(playing);
    }, []);

    useEffect(() => {
      playing ? audio.play() : audio.pause();
    }, [playing]);

    useEffect(() => {
      audio.addEventListener("ended", () => setPlaying(false));
      return () => {
        audio.removeEventListener("ended", () => setPlaying(false));
      };
    }, []);

    return [playing, toggling];
  };
  const [playing, toggling] = useAudio(url);

audioPlayerProps: {
      buttonPlayProps: {
        buttonType: 2,
        onClickAction: () => {
          toggling;
        },
        label: playing ? "Pause" : "Play"
      }
    }

###試したこと

const url = "http://www.ne.jp/asahi/music/myuu/wave/hana.mp3";
  const useAudio = (url: string) => {
    const [audio] = useState(new Audio(url));
    const [playing, setPlaying] = useState(false);
    const toggling = useCallback(
      e => {
        setPlaying(!playing);
        console.log(playing);
      },
      [playing]
    );

    useEffect(() => {
      playing ? audio.play() : audio.pause();
    }, [playing]);

    useEffect(() => {
      audio.addEventListener("ended", () => setPlaying(false));
      return () => {
        audio.removeEventListener("ended", () => setPlaying(false));
      };
    }, []);

    return [playing, toggling];
  };
  const [playing, toggling] = useAudio(url);

audioPlayerProps: {
      buttonPlayProps: {
        buttonType: 2,
        onClickAction: () => toggling(),
        label: playing ? "Pause" : "Play"
      }
    },

と変更

しかし

onClickAction: () => toggling(),

のtoggling()の部分でエラー

  型 'boolean | ((e: any) => void)' のすべての構成要素が呼び出し可能なわけではありません。
    型 'false' には呼び出しシグネチャがありません。

が出た

---

ここで、返り値として関数を返していないのが原因かと思い

return [playing, toggling];

を

return [playing, toggling()];

と変更するが、toggling()に引数が一つ必要だとエラーがでたので

useCallbackのeを削除してみて実行したことろ、描画の際にplayingの値がtrueとfalseを繰り返してエラーになってしまうようになった。

Answer 1

何点か間違いがあるかと思います。

まず、togglingが実行されない理由ですが、関数そのものと関数呼び出しの概念を誤認されていると思います。
まず関数についてですが、以下をご覧ください。

const hoge = () => {
    console.log(hoge)
}

hoge() // 関数呼び出しなので、実行されてコンソールに hoge と出力される

hoge // 関数呼び出しではないので、実行されない

次に onClick の指定についてですが、onClickには関数そのものを指定することで、クリック時にその関数を呼び出してくれます。

onClick={hoge} // onClick に hoge 関数が指定される
onClick={(e) => hoge()} // onClick にイベントを引数に取り、hogeを実行する関数が新規生成され、その関数が指定される（hogeに引数があれば、イベントにしたがった処理を実行できる）
onClick={(e) => hoge} // 関数になっていない
onClick={(e) => {hoge}} // 関数になっているが、内部でhogeが呼び出されていない

したがって、以下のように修正することで toggling を呼び出すことができるかと思います。

audioPlayerProps: {
  buttonPlayProps: {
    buttonType: 2,
    onClickAction: () => toggling(),
    label: playing ? "Pause" : "Play"
  }
}

また、今回の場合、togglingを呼び出しても想定通りの動作はしないと思います。
理由は useCallback を使って、依存関係も指定がなく、メモ化されてしまっているからです。
メモ化をすることによって、関数が他の変数の変更による再レンダリングされず、パフォーマンスの向上につながります。
ただし、関係のあるパラメータに関しては依存関係を指定しないといけません。

今回の場合で説明すると、

    const toggling = useCallback(e => {  //playing の初期値 false でメモ化
      setPlaying(!playing);  // !playing なので true でメモ化
      console.log(playing);  // playing の初期値 false でメモ化
    }, []);  // 依存関係のリストが[]なので、playingの値が変わってもメモ化された値に変化なし

となります。

したがって、最後の依存関係のリストを [playing] としてあげる必要があるかと思います。

厳密に動作検証をしていないので、上記で完全に動くかはわかりません。
わからないこと、うまくいかないことがあれば気軽にお尋ねください。

Comments

[ryota-code]

ご回答ありがとうございます。

useCallbackの意味を理解し、ご提案いただいた方法を試したのですが、

```
onClickAction: () => toggling(),
```
のtoggling()の部分に赤い波線でエラーが表示されて

「この式は呼び出し可能ではありません。
型 'boolean | ((e: any) => void)' のすべての構成要素が呼び出し可能なわけではありません。
型 'false' には呼び出しシグネチャがありません。」

と出てしまいます。

そこで、返り値としてtoggling()を返した方がいいのかと思い、

```
return [playing, toggling];
```
の部分を
```
return [playing, toggling()];
```
と変更したのですが、

今度は、最初の描画をしたとたんに、playingの値がtrue,falseの変更を繰り返し、エラーとなってしまいます。

[ryota-code]

質問に追記いたしました。