Reactでスマートスピーカーのコマンド発音サービスを作ろう（６）【作りながら覚えるReact】

はじめに

スマートスピーカーの発音サービスを作りながらReactを学んでいくシリーズ、第6弾です。
前回、UIをリッチにして切り替えボタン（ラジオボタン）によるAlexa、Google Home切り替え部分を実装しました。

Reactでスマートスピーカーのコマンド発音サービスを作ろう（５）【作りながら覚えるReact】

今回はフリーワード発音機能を実装していきます。

フリーワード発音を実装する

前回、UI変更に伴いこのようなファイル構成にしていきましたね。

今回、このようなフリーワードの入力エリア、また発音ボタンを実装していきます。

入力フォームの実装

通常のHTMLでのテキストフォームはこのような形で実装します。

<input type="text" name="name">

そして通常のJavaScriptの場合、この入力フォームに入力された値を取得し、送信ボタンが押されたらその値を送信するという流れになります。

ですが、Reactの場合には入力フォームを監視し、文字入力（値変更）がある毎にStateを更新しフォームをレンダリングし、送信ボタンが押されたらStateの値を送信するとなります。

ちょっとわかりづらいかもしれないので、実際のこのフォーム部分のコードを見ていきましょう。

constructor

初期化処理を行います。

  constructor(props) {
    super(props);
    this.state = {
      text_value: "",
      speaker_type: "alexa",
    };
    this._changeText = this._changeText.bind(this);
    this._toggleButton = this._toggleButton.bind(this);
  }

前回の記事でspeaker_typeを設定しましたが、今回はtext_valueを設定します。
これはフォームの入力内容に関するStateです。
また、this._changeText = this._changeText.bind(this); も前回の記事にあったように、thisをbindしておきます。

次にフォームの変更イベントを見ていきます。

  _changeText(e) {
    this.setState({text_value: e.target.value});
  }

先程の説明ですと 文字入力（値変更）がある毎にStateを更新しフォームをレンダリングし にあたる部分です。
e.target.valueは後ほど見ていく入力フォームの値が入ってきます。
Stateのtext_valueに入力フォームの値を設定していますね。

次に入力フォーム部分を見ていきます。

<div id="form1">
  <input
    type="text"
    id="sbox"
    defaultValue={this.state.text_value}
    onChange={this._changeText}
    placeholder="キーワードを入力"
  />
</div>

defaultValueにthis.state.text_value を設定しています。
こちらはその名の通り、デフォルト値を設定するオプションです。
constructor内で””、つまり空文字を設定していました。

次にonChangeの部分を見ていきます。
onChange={this._changeText}
ここはonChange、つまりフォーム入力内容の変更があった場合にイベントが発動します。
先程の_changeText が呼び出されます。

つまり、ここの入力フォームについてはこのような流れとなります。

1. constructor内でStateのtext_value を初期化
2. 入力フォームをレンダリング、デフォルト値に1のtext_valueの値を使用
3. 入力フォームに変更がある（文字入力や削除）があるたびにonChangeイベントが発動
4. onChange 内で入力フォームの値（入力値）を取得しStateのtext_valueを更新
5. 入力フォームを再レンダリング

発音ボタンの実装

では、発音ボタンを実装していきます。
先にJSX部分を見ていきます。

  <button id="sbtn" value="" onClick={() => this._onClick()}>
    <i className="fas fa-microphone fa-2x"></i>
  </button>

onClick={() => this._onClick()}
こちらは何回か今までみた形ですね。アロー関数でthisをbindしています。

では、呼び出される_onClick() を見ていきます。
ここで実現したい仕様はスピーカーの種類を見てコマンド発音前の呼びかけコマンドを実行し、そちらと入力フォームのテキストと合わせ発音するというものです。
Googleが選択され、入力フォームに「音楽かけて」と入力されている状態でボタンが押されると「OK Google、音楽かけて」と発音してくれるイメージです。

  _onClick() {
    let ssu = new SpeechSynthesisUtterance();
    let pre_commands = '';
    switch (this.state.speaker_type) {
      case 'alexa': {
        pre_commands = Alexa.pre_commands;
        break;
      }
      case 'google': {
        pre_commands = Google.pre_commands;
        break;
      }
      default:
      break;
    }
    ssu.text = pre_commands + this.state.text_value;
    ssu.lang = 'ja-JP';
    speechSynthesis.speak(ssu);
  }

SpeechSynthesisUtterance の使い方はこちらの記事でも解説しましたね。

前回の記事で設定したthis.state.speaker_type を使用しswitch文で場合分けしています。
alexaの場合には、constのalexa.js内のデータから呼びかけコマンド（pre_commands）をpre_commandsに代入しています。

そして、発音するテキストには呼びかけコマンドのpre_commandsと入力フォームのテキストであるthis.state.text_value と合わせ、その内容を発音しています。

今回のコード

では、通しで一旦コードを確認してみます。

header.js

import React, { Component } from 'react';
import {Alexa} from '../const/alexa';
import {Google} from '../const/google';

export default class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text_value: "",
      speaker_type: "alexa",
    };
    this._changeText = this._changeText.bind(this);
    this._toggleButton = this._toggleButton.bind(this);
  }

  _onClick() {
    let ssu = new SpeechSynthesisUtterance();
    let pre_commands = '';
    switch (this.state.speaker_type) {
      case 'alexa': {
        pre_commands = Alexa.pre_commands;
        break;
      }
      case 'google': {
        pre_commands = Google.pre_commands;
        break;
      }
      default:
      break;
    }
    ssu.text = pre_commands + this.state.text_value;
    ssu.lang = 'ja-JP';
    speechSynthesis.speak(ssu);
  }

  _changeText(e) {
    this.setState({text_value: e.target.value});
  }

  _toggleButton(e) {
    this.setState({speaker_type: e.target.value});
  }

  render() {
    return (
      <div className="jumbotron mv">
        <header className="mv_ttl">
          <h2>Smart Speaker's Commands Speaker （SSCS）</h2>
          <p>スマートスピーカーのコマンドを日本語で発音して代行してくれるサイトです。コマンドをクリックすると発音されます。<br/>
            コマンドの追加は<a href="https://github.com/eishis/smart-speakers-commands-speaker" target="_blank" rel="noopener noreferrer">こちらから</a>お願いします。
          </p>
          <div>
            <div className="radio_button">
              <input
                type="radio"
                value="alexa"
                name="s2"
                id="alexa"
                checked={this.state.speaker_type === "alexa"}
                onChange={this._toggleButton}
              />
              <label htmlFor="alexa" className="switch-alexa">Alexa</label>
              <input
                type="radio"
                value="google"
                name="s2"
                id="google"
                checked={this.state.speaker_type === "google"}
                onChange={this._toggleButton}
              />
              <label htmlFor="google" className="switch-google">Google Home</label>
            </div>
            <div id="form1">
              <input
                type="text"
                id="sbox"
                defaultValue={this.state.text_value}
                onChange={this._changeText}
                placeholder="キーワードを入力"
              />
              <button id="sbtn" value="" onClick={() => this._onClick()}>
                <i className="fas fa-microphone fa-2x"></i>
              </button>
            </div>
          </div>
        </header>
      </div>
    )
  }
}

まとめ

今回はReactにおける入力フォームの使い方、またそちらの値を送信する処理をご紹介しました。
次はスピーカーの種類を選択し、コマンドのカード部分を発音させる処理を実装していきます。