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

はじめに

スマートスピーカーの発音サービスを作りながらReactを学んでいくシリーズ、第5弾です。
前回はデータをconstファイルに格納し、そちらをmapで展開しました。

今回はUIをリッチにして、ラジオボタンやフリーキーワードの発音ボックスを実装していきます。

UIを構築する

今回はデザイナーさんにUIをリッチにしてもらいました。

before

after

だいぶデザインが洗練されましたね！！
こちらで公開されています！

コンポーネント構成

新しいデザインについて、コンポーネントの構成を考えていきます。
全体はApp.jsで管理しますが、ヘッダー部分をheader.js、カード部分を含むメインの部分をmain.jsと分割することにします。

srcディレクトリのJavaScriptファイルはこのような構成になります。

├── App.js
├── components
│   ├── header.js
│   ├── main.js
│   └── speaker_button.js
├── const
│   ├── alexa.js
│   └── google.js
├── index.js

App.jsもこのようにシンプルになります。

import React, { Component } from 'react';
import './App.css';
import Header from './components/header';
import Main from './components/main';

class App extends Component {
  render() {
    return (
      <div>
        <div className="bg-dark header">
          <div className="container py-3">
            <div className="logo">
              <h1 className="text-white">
              <i className="fas fa-microphone"></i>
                SSCS
              </h1>
            </div>
            <p className="text-white">スマートスピーカーのコマンド発音代行サービス</p>
          </div>
        </div>
        <Header/>
        <Main/>
    </div>
    );
  }
}

export default App;

HeaderとMainに分けることでだいぶすっきりしましたね。
一番上のロゴなどについてもコンポーネントにまとめてしまい、App.jsをよりすっきりさせるのも良いかもしれません。

では、今回はheader.js部分を実装していきます！

スピーカーを切り替える

説明文などはそのままとして、AlexaとGoogle Homeを切り替えるボタンを実装していきます。

Alexa選択時

Google Home選択時

一見、どう実装するのかイメージがわかないかもしれませんが、考えてみるとこれはAlexaかGoogle Homeかを選択するラジオボタンである、とも言えそうです。

実装するこのラジオボタンの機能を整理してみましょう。
1. デフォルトでAlexaが選択され緑のスタイルが当たる
2. Google Homeを選択すると赤のスタイルが当たり、Alexaの選択が解除される
3. 再度Alexaを選択すると緑のスタイルが当たり、Google Homeの選択が解除される

こうしたなにかイベントを通じて見かけの変更（再レンダリング）が発生する場合、Stateを使用していきます。

Stateとは

Stateとは、コンポーネントが持つ「状態」です。
わかりやすく言ってしまえば、コンポーネントが持つデータのことです。

コンポーネントが持つデータといえば、以前の記事でPropsをご紹介しました。
PropsとStateのちがいはどこにあるのでしょうか。

Propsは親コンポーネントから渡される値であり、不変なデータです。
それに対してStateはコンポーネント自身が持っている状態であり、可変なデータです。
またコンポーネント内でStateを更新することで、コンポーネントが再描画されます。

少し難しいかもしれないので、今回のケースで考えていきましょう。

1. デフォルトでAlexaが選択され緑のスタイルが当たる
   →この状態（コンポーネントが描画された初期状態）ではスピーカーのStateにAlexaが設定されている。
   

2. Google Homeを選択すると赤のスタイルが当たり、Alexaの選択が解除される
   →Google Homeが選択されるとスピーカーのStateにGoogleが設定され、再描画され、Google Homeの選択状態になる。
   

3. 再度Alexaを選択すると緑のスタイルが当たり、Google Homeの選択が解除される
   →Alexaが選択されるとスピーカーのStateにAlexaが設定され、再描画され、Alexaの選択状態になる。
   

では、こちらをコードにしていきます。

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 = {
      speaker_type: "alexa",
    };
    this._toggleButton = this._toggleButton.bind(this);
  }

  _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>
        </header>
      </div>
    )
  }
}

では、ポイントを見ていきます。

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

まずconstructorで初期化処理を行っています。

    this.state = {
      speaker_type: "alexa",
    };

こちらでこのコンポーネントのstateを設定しています。
speaker_typeに初期値のalexaを設定しています。

this._toggleButton = this._toggleButton.bind(this);
こちらはわかりづらいかもしれません。
_toggleButtonは後で出てきますが、ボタンを切り替えるイベントです。
bindは以前こちらの記事でも解説しましたが、thisを拘束するためのものです。
初期化処理で一回bindをしておかないと、この_toggleButton上でthisのstate更新をできないので、必要な処理となります。

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

先程も解説しましたが、 _toggleButtonはスピーカの切り替えボタンが押された際のイベントです。
this.setState ではe.target.value、つまり選択されたボタンのvalueでStateの値を更新してます。

では、選択ボタン部分を見ていきます。

<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>

注目すべきは、ボタンのcheckedとonChange部分です。

  <input
    type="radio"
    value="alexa"
    name="s2"
    id="alexa"
    checked={this.state.speaker_type === "alexa"}
    onChange={this._toggleButton}
  />

checked={this.state.speaker_type === "alexa"}
checkedはこのボタンの選択状態を表します。
値として{this.state.speaker_type === "alexa"}が入っていますが、これはつまり「this.state.speaker_typeがAlexaの場合にチェックをする」ということです。

onChange={this._toggleButton}
ここは値が変わったら、つまりボタンが押されたら_toggleButtonイベントが発動します。

Google Home側も同じですね！

処理の流れを確認する

では、今回実装したスピーカー選択ボタンについて処理の流れを振り返っていきましょう。

1. constructorでStateの初期化が行われる。speaker_typeにalexaが入る。
2. Headerコンポーネントがレンダリングされる。checked={this.state.speaker_type === "alexa"} の部分がtrueになるので、Alexaボタンが選択状態になる
3. Google Homeボタンを押す
4. _toggleButtonイベントが発動し、speaker_typeにgoogleが入り、再レンダリングされる
5. checked={this.state.speaker_type === "google"} がtrueになるので、Google Homeボタンが選択状態になる

まとめ

今回はReactにおけるStateの役割、Propsとの違いなどを解説しながらスピーカーボタン（ラジオボタン）の実装を行いました。
header.jsには後、自由にコマンドを入力し発音してくれるフリーワード発音ボタンが必要となりますので、次回実装しながら解説していきます。