ReactHooks + Netlify でサクッとTOEFLスピーキング練習用アプリを作る

概要

最近、ReactでサクッとTOEFLの勉強用便利アプリを作るのにハマってます。

簡単なものを一個紹介します。
「TOEFLスピーキング練習用アプリ」です。

URLはこちらです。 toefl-speaking-trainer.netlify.app

ソースコードはこちら。 github.com

利用の仕方は簡単で「Start」を押すとカウントダウンが始まり、同時に録音開始（スピーキング開始）
タイマーが終わると、録音した音声を何回でも聞ける、という代物です。(再録音も可能)

作った動機

TOEFLのスピーキングは以下の条件の英語の練習にしてはやや特殊な環境で行われます。

スピーキングだけどPCに声を吹き込む
45秒や60秒でタイマーがあり、時間がくると強制終了

この特殊なやつを何回も繰り返すんですが、あんまりいい練習アプリが無く、サクッと作ることにしました。

要素

以下を組み合わせてます。

タイマーのReactHook

github.com

タイマーのReactHookで以下のサンプルの通り、利用するだけでタイマーが作れます。

import React from 'react';
import { useTimer } from 'react-timer-hook';

function MyTimer({ expiryTimestamp }) {
  const {
    seconds,
    minutes,
    hours,
    days,
    isRunning,
    start,
    pause,
    resume,
    restart,
  } = useTimer({ expiryTimestamp, onExpire: () => console.warn('onExpire called') });


  return (
    <div style={{textAlign: 'center'}}>
      <h1>react-timer-hook </h1>
      <p>Timer Demo</p>
      <div style={{fontSize: '100px'}}>
        <span>{days}</span>:<span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span>
      </div>
      <p>{isRunning ? 'Running' : 'Not running'}</p>
      <button onClick={start}>Start</button>
      <button onClick={pause}>Pause</button>
      <button onClick={resume}>Resume</button>
      <button onClick={() => {
        // Restarts to 5 minutes timer
        const time = new Date();
        time.setSeconds(time.getSeconds() + 300);
        restart(time)
      }}>Restart</button>
    </div>
  );
}

export default function App() {
  const time = new Date();
  time.setSeconds(time.getSeconds() + 600); // 10 minutes timer
  return (
    <div>
      <MyTimer expiryTimestamp={time} />
    </div>
  );
}