2018年5月17日

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

はじめに

Reactで簡単なサービスを作りながら、使い方を覚えていくシリーズの第３弾です。

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

前回は、ReactでSmart Speaker’s Command Speaker（SSCS）のインタフェースを作り、部分的にコンポーネント化しました。
今回は実際に発音させていく部分を作ります。

発音させる

前回まで作っていたのがこちらです。

カードにコマンドはちゃんと表示されていますが、特にクリックすることもできず、また発音もしてくれません。
このカードをクリックしたらコマンドが発音される部分を作っていきましょう。
src/components/speaker_button.js にまず、クリックイベントを作っていきます。

import React, { Component } from 'react';

export default class SpeakerButton extends Component {
  _onClick() {
    console.log("クリックされたよ");
  }

  render() {
    return (
      <div className="col-sm-6 mb-2 mt-2">
        <button className="card" onClick={this._onClick}>
          <div className="card-body">
            <h4 className="card-title text-left">
              <i className="fas fa-play"></i>　
              {this.props.speaker_type}音楽かけて
            </h4>
            <p className="card-text text-left">
              ランダムで音楽をかけてくれるコマンドです。
            </p>
          </div>
        </button>
      </div>
    );
  }
}

まずこちらで_onClick() を定義しています。

  _onClick() {
    console.log("クリックされたよ");
  }

そしてこちらでボタンがクリックされたら、_onClickを実行しています。

<button className="card" onClick={this._onClick}>

ここまではシンプルですね。
では、実際に発音させてみます。
ブラウザ上で発音させる為には、SpeechSynthesisUtterance という音声合成APIを使用します。

詳しくはMDNのリファレンスをご覧ください。

これだけで_onClickが実行されたらコマンドを発音してくれます。

  _onClick() {
    let ssu = new SpeechSynthesisUtterance();
    ssu.text = "音楽かけて"
    ssu.lang = 'ja-JP';
    speechSynthesis.speak(ssu);
  }

簡単に解説していきます。
let ssu = new SpeechSynthesisUtterance();
こちらでSpeechSynthesisUtteranceのインスタンスを作ります。

話す内容の設定をします。
ssu.text = "音楽かけて"

そして言語の設定をします。
ssu.lang = 'ja-JP';

最後に発音のコマンドを実行するだけです。
speechSynthesis.speak(ssu);

簡単ですね。
話す内容については、漢字でも正しく発音してくれますが、読み方次第では上手く発音してくれないので、場合によってはひらがなにしましょう。

これで、少しぎこちないですが「音楽かけて」とコマンドを発音してくれるようになりました。

Propsの値を使う

発音はできましたが、Alexaの場合には「アレクサ、」、Google Homeの場合には「OK, Google」とコマンド前につける必要があります。

なので、このコンポーネントのPropsの値を判定し、そこからコマンド前の「アレクサ、」「OK, Google、」という呼びかけ文言を発音してもらうようにしていきましょう。

src/app.js 上ではこのようにSpeakerButtonを使っていましたね。

<SpeakerButton speaker_type="alexa">
</SpeakerButton>

<SpeakerButton speaker_type="google">
</SpeakerButton>

そしてsrc/components/speaker_button.js ではこのようにしてpropsの値を取り出していました。
this.props.speaker_type

これを利用して条件分岐していきましょう。

これでどうでしょうか。この先様々なスピーカーが出てくると考え、ifではなくswitchで条件を書いています。

  _onClick() {
    let ssu = new SpeechSynthesisUtterance();
    let pre_commands = '';
    switch (this.props.speaker_type) {
      case 'alexa': {
        pre_commands = "Alexa、";
        break;
      }
      case 'google': {
        pre_commands = "OK, Google、";
        break;
      }
      default:
      break;
    }
    ssu.text = `${pre_commands}音楽かけて`
    ssu.lang = 'ja-JP';
    speechSynthesis.speak(ssu);
  }

POINT!!

`${pre_commands}音楽かけて` としているところは、JavaScriptのテンプレートリテラルを使用しています。
従来であれば pre_command + “音楽かけて” としなければいけなかったことを、すっきりとかけるようになっています。”#{pre_commands}音楽かけて” のように書くRubyなどの式展開と似ていますね。

さて、これでOKかと思いきや、このようなエラーが表示されます。

TypeError: Cannot read property 'props' of undefined
エラーメッセージの通り、propsが定義されていないよというメッセージです。

なぜこうなるのでしょうか。
ポイントはthis です。

thisをbindさせよう

実はthisは呼ばれ方によって値が変わってきます。
要はどの時点のthisなのかによって値が変わってくる、という扱いが難しいものなのです。

そこでES5（ECMAScript 5というJavaScriptの言語仕様のバージョン）では、bindというthisの値を拘束してしまうメソッドが使われるようになりました。
更に、ECMAScript 2015ではより便利にしたアロー関数というものが使われるようになりました。

ちょっと一言

bindが導入される以前は、thisの値を一時的に_thisやthatに格納する、などで対応することが多くありました。。thisをthatに入れる（「これ」を「あれ」に入れる）というのは、ちょっとよくわかりづらいですね。

では、早速使い方を見ていきましょう。
MDNのアロー関数の例を見ると、このようにあります。
(param1, param2, …, paramN) => { statements }

// 引数がない場合、丸括弧を書かねばいけません:
() => { statements }

今回の場合、引数はない為にこのようになります。
onClick={() => this._onClick()}

ちょっとわかりにくいかもしれませんが、onClickイベントのときに実行される関数として、onClickを実行する際のthisをbindし、この呼び出す時点のthisを_onClickに渡しています。
なので、これで_onClickの中で this.props.speaker_type が使えるようになります。

さて、これでGoogle HomeとAlexaどちらで実行しても正しくコマンドを発音してくれるようになりました！

最終的にはこちらのコードとなりました。
src/components/speaker_button.js

import React, { Component } from 'react';

export default class SpeakerButton extends Component {
  _onClick() {
    let ssu = new SpeechSynthesisUtterance();
    let pre_commands = '';
    switch (this.props.speaker_type) {
      case 'alexa': {
        pre_commands = "alexa";
        break;
      }
      case 'google': {
        pre_commands = "OK Google";
        break;
      }
      default:
      break;
    }
    ssu.text = `${pre_commands}、音楽かけて`
    ssu.lang = 'ja-JP';
    speechSynthesis.speak(ssu);
  }

  render() {
    return (
      <div className="col-sm-6 mb-2 mt-2">
        <button className="card" onClick={() => this._onClick()}>
          <div className="card-body">
            <h4 className="card-title text-left">
              <i className="fas fa-play"></i>　
              音楽かけて
            </h4>
            <p className="card-text text-left">
              ランダムで音楽をかけてくれるコマンドです。
            </p>
          </div>
        </button>
      </div>
    );
  }
}