フィンランド語で音声入力をしよう！

# はじめに
最近、フィンランド語の勉強をはじめたソフトウェアエンジニアです。そのうち旅行に行けたらいいなと思っています。フィンランドを勉強するにあたり困ったことは、英語などとは異なり、会話ができる教材がないことです。それならば作ってしおうと思い、フィンランド語会話アプリを趣味で絶賛開発中です。

今回は、フィンランド語で音声入力をする方法まで解説します。

# 前提知識
### WebSpeechAPI
Webブラウザで音声入力をするには、WebSpeechAPIを利用します。Web Speech API とは、ウェブブラウザが音声認識と音声合成を行うためのインターフェースを提供する技術です。このAPIを使用することで、ウェブページやアプリケーションはユーザーの話し言葉をテキストに変換したり、テキストを音声で読み上げたりすることが可能になります。Web Speech APIは二つの主要な部分から成り立っています

https://developer.mozilla.org/ja/docs/Web/API/Web_Speech_API

### react-speech-recognition
Reactで音声入力を実装する際に便利なのがreact-speech-recognitionです。react-speech-recognition とは、Reactアプリケーションで簡単に音声認識機能を実装するためのライブラリです。このライブラリは、Web Speech API の音声認識機能を利用して、React コンポーネントで音声認識を容易に扱えるように設計されています。

https://www.npmjs.com/package/react-speech-recognition

# 実装方法
### 1. コンポーネントを作成する
まずは、音声入力するために必要な「Start」「Stop」「Reset」ボタンを持つコンポーネントを用意します。useSpeechRecognition を用いることで、それぞれのボタンが「Start」「Stop」「Reset」の機能を持つことができます。
```tsx
import 'regenerator-runtime';
import React from "react";
import SpeechRecognition, {
    useSpeechRecognition,
} from "react-speech-recognition";

const ReactSpeechRecognitionComponent: React.FC = () => {
    const {
        transcript,
        listening,
        resetTranscript,
        browserSupportsSpeechRecognition,
    } = useSpeechRecognition();

    if (!browserSupportsSpeechRecognition) {
        return <span>ブラウザが音声認識未対応です</span>;
    }

    return (
        <div id="react-speech-recognition">
        <p>Status: {listening ? "on" : "off"}</p>
        <button type="button" onClick={() => SpeechRecognition.startListening()}>
            Start
        </button>
        <button type="button" onClick={() => SpeechRecognition.stopListening()}>
            Stop
        </button>
        <button type="button" onClick={() => resetTranscript()}>
            Reset
        </button>
        <p>{transcript}</p>
        </div>
    );
};

export default ReactSpeechRecognitionComponent;
```

### 2. 画面に表示して使用する
画面に先ほどのコンポーネントを表示してみましょう。見栄えの問題でReactとViteのロゴは残しただけです。

```tsx
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import ReactSpeechRecognitionComponent from './components/ReactSpeechRecognitionComponent'

function App() {
  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <ReactSpeechRecognitionComponent />
    </>
  )
}

export default App
```
見事、このような画面を表示することができました。
![スクリーンショット 2023-12-19 18.21.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2065133/508c6b81-4469-19a6-fa1d-1c330edb3fc2.png)

### 3. フィンランド語に対応する
早速、フィンランド語を入力してみましょう。「Minä olen japanilainen.（私は日本人です）」と音声入力してみます。

![スクリーンショット 2023-12-19 18.24.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2065133/36505268-628d-008a-ae99-ffee92add620.png)

すると、このように入力されてしまいました。私の発音が悪いのもあるかもしれませんでが、日本語として音声が認識されてしまっているようです。フィンランド語に対応するにはどうすればいいのでしょうか。

> ### Changing language
> To listen for a specific language, you can pass a language tag (e.g. 'zh-CN' for Chinese) when calling startListening. See here for a list of supported languages.
> ```tsx
>SpeechRecognition.startListening({ language: 'zh-CN' })
>```

react-speech-recognition のドキュメントを見てみると、このような記述がありました。試してみましょう。

```tsx
<button type="button" onClick={() => SpeechRecognition.startListening({ language: 'fi-FI' })}>
```

![スクリーンショット 2023-12-19 18.28.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2065133/85dec62c-3bc4-8700-ffae-8dc72f33fdb3.png)

{ language: 'fi-FI' } を追加してから音声入力すると、無事に「Minä olen japanilainen.（私は日本人です）」と表示することができました。

# おわりに
「フィンランド語で音声入力をする」という第一歩を踏み出すことができました。今度は OpenAI API を利用して、インタラクティブなフィンランド語会話をできるようにアップデートしたいと思っています。