2018年5月7日

プログラミング

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

React スマートスピーカー作りながら覚えるReact

はじめに

smartspeaker.png (133.4 kB)

Facebook社によるReactは、フロントエンドはもちろん、モバイルアプリやWebVRと幅広く応用できるJavaScriptライブラリです。

ちょっと一言

React Nativeの学習シリーズはこちらをご覧ください。
これからはじめるReact Native

このシリーズでは、実際にReactのサービスを作りながらReactの基礎やライブラリを使いながら、少しずつリッチにしていきます。
また、ソースコード自体はオープンソースとして公開しています。
Smart Speaker’s Commands Speaker (SSCS)

ぜひ気軽にIssueを立てたり、Pull Requestを送ってください。

今回はReactのサービス開発を容易にする、Create React Appを使用していきます。

Reactとは

ReactはFacebook社が開発しているJavaScriptによるライブラリです。

公式ドキュメントには A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES とあります。
インタフェースを構築する為のライブラリ、つまりMVC（Model View Controller）で言うところのView部分のみを担当しているライブラリです。

特徴として、Declarative（宣言的）、Component-Based（コンポーネントベース）、Learn Once, Write Anywhere（一回学んだらどこでも書ける）が挙げられています。

Declarative（宣言的）

Reactは簡単にUIを作ることができます。
state（状態）がどう変化するかに応じて、どのビューを表示させるか宣言的に記載することで、シンプルかつデバッグしやすいコードにすることができます。

Component-Based（コンポーネントベース）

Reactではコンポーネント（部品）を組み合わせてUI（ページ）を構築します。
コンポーネントは再利用することができ、より効率的なUI構築を可能にします。
コンポーネントにstate（状態を）もたせ、その状態が変化することで自動でUIが再構成されます。

Learn Once, Write Anywhere

Reactは一回覚えてしまえばどこでも使えるという特徴を持っています。
これはReactを覚えることでReact Nativeやブラウザ上でVR体験を可能とするReact VRなどにも活用することができます。

作りたいサービス

では、今回作っていくサービスについて説明していきます。
サービス自体の作り方や考え方、についてはまた別の機会にご説明していきますが、重要なのは「何か困っていることに注目する」ことです。

eishisではスマートスピーカーのAlexaを使用してオフィス内に音楽を流しています。
ですが、たまに声がでないときや、みんなもくもくと作業している中で「アレクサ、音楽かけて！」と言いづらい、また発音するのが面倒などの困っていることがありました。
便利なはずの音声でのコマンドにも関わらず、それすら面倒というのも本末転倒な気もしますが！

そこで今回は困っていることを解決する為、スマートスピーカーのコマンド一覧が表示され、発音もしてくれるサービスを作ることにします。

少しずつリッチにしていくので、現時点ではこのような簡素なUIになっています。

2018-05-07 14.28.20.png (106.5 kB)

デモはこちらです

主な機能としてはこちらがあります。

AlexaとGoogle Home用のコマンド一覧が表示されている
コマンドをクリックすると発音してくれる（ちゃんとスマートスピーカーが認識してくれる）
スマホでも使えるようにレスポンシブデザインになっている
コマンドがカテゴリ登録されていてカテゴリで絞ることができる（今後実装予定）
任意のコマンドも発音してくれる（今後実装予定）

これらの機能をReactで実装していき、困っていることを解決していきましょう。

Create React Appで作り始める

こちらの記事でも解説していますが、Create React AppというReact環境を簡単に構築できる npm パッケージを使用していきます。

POINT!!

通常、Reactの環境構築にはJavaScriptを含むアセットファイルをまとめてくれるWebpackやES2015を含む最新のJavaScriptを使用可能な形に変換してくれる（トランスパイル）Bableの設定が必要ですが、Create React Appではデフォルトの状態で既にその設定がされている為、npm run start等の簡単なコマンドだけで動かすことができます。

まずcreate-react-appをインストールします。
npm install -g create-react-app

次にプロジェクトを作ります。
npx create-react-app smart-speakers-commands-speaker

では、作られたプロジェクトを動かしてみましょう。
cd smart-speakers-commands-speaker
npm start

すると http://localhost:3000/ が開かれてこちらの画面が表示されます。

2018-04-12 0.34.25.png (29.7 kB)

Create React Appの中身を解説

create-react-app コマンドを実行すると、このようなファイルが作られます。

├── node_modules # 外部ライブラリが格納されているディレクトリ
├── package.json # node module（外部ライブラリ）を指定するファイル
├── public　# 公開用ファイルのディレクトリ
│   ├── favicon.ico # favicon（ブラウザのタブの左側に出てくるアイコン）
│   ├── index.html # 公開されるHTMLファイル
│   └── manifest.json # PWAで必要なアプリケーションの情報を設定するファイル
├── src # Reactで使用するディレクトリ
│   ├── App.css # App.jsに当てるCSSファイル
│   ├── App.js # index.jsから呼び出されるJavaScriptファイル
│   ├── App.test.js # App.jsのテスト用ファイル
│   ├── index.css # index.js用のCSSファイル
│   ├── index.js # index.htmlに対してReactを使用する設定をしているReactの基点のファイル
│   ├── logo.svg # ロゴ画像ファイル
│   └── registerServiceWorker.js # PWA用のServiceWorkerファイル
└── yarn.lock # node_modulesのバージョン等依存関係を管理しているファイル（yarnを使用しています）

YarnについてはRails5.1でReact を動かそう【webpackerによる環境構築編】でも解説しています。

PWAについてはこれからはじめるPWAシリーズをご覧ください。

Create React Appの仕組み

では簡単にどのような流れで、このCreate React Appで作られたコードが動いているか解説していきます。

まず公開されるHTMLファイルである、index.htmlを見ていきます。

public/index.html

  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>

bodyの中身を抜粋してみました。
<div id="root"></div>
ここでbodyの中にidがrootのdivがあるというのがポイントです。

次にsrc/index.js を見ていきます。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

import で依存するモジュールを取り込んでいます。
ReactやReactDOM（ReactでDOM操作、つまりHTMLの要素をReactで操作できるようにする）、またCSSファイルや先述のAppファイル、ServiceWorkerを取り込んでいます。

Appの解説は後ほどしますが、こちらでAppをレンダー（表示）しています。
document.getElementById('root') とあるように、先程見たindex.htmlの<div id="root">部分にAppを表示させている、と考えてください。

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

では、最後にApp.jsを見ていきます。

src/app.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

こちらも同じように依存しているモジュールをimportで取り込んでいます。

注目すべき点はこちらと

class App extends Component {
  render() {
    return (

最後の行のこちらです。

export default App;

こちらはReactのComponentを継承し、Appというクラスを定義しています。
class App extends Component

その中にあるrender()部分はReactのコンポーネントを返す部分です。
中にあるreturn() の中身を出力しています。

そして最後の export default App; でこのファイルとしてAppクラスの中身を返します、と定義しています。

stateの話など細かい部分はあるのですが、このファイルはAppというクラスを定義しており、そちらでreturn()の中身を返している、と今は理解すると良いと思います。

JSX

次にreturn() の中身を見ていきます。
見かけの部分をこちらはJSXというもので実装されています。

  <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h1 className="App-title">Welcome to React</h1>
    </header>
    <p className="App-intro">
      To get started, edit <code>src/App.js</code> and save to reload.
    </p>
  </div>

一見HTMLとほぼ同じように見えますが、JavaScriptでHTMLのように書くことができる拡張機能と考えてください。

あくまでもJavaScriptなので、こちらのような、importしてきた外部のモジュールを指定することもできます。
<img src={logo} className="App-logo" alt="logo" />

UIを実装する

では、見た目（UI）を作っていきます。
今回のサービスはスマートフォンでもPCでも操作したいので、レスポンシブ対応のCSSフレームワークのBootstrapを使っていきます。

React用のReact-Bootstrapではなく、今回はBootstrapのCDNを使用することにします。

POINT!!

React-Bootstrapは現時点（2018年5月7日）ではbootstrap 4 に対応していない為、今回はCDNを使用します。
CDN（Content Delivery Network）を使用することで、URLを指定することでBootstrapが使用できるようになります。
ちなみにこちらのissueにあるように、React-Bootstrapでのバージョン4対応は現在進行中のようです。

公式サイトからCDNのURLを取得し、公開用HTMLファイルのindex.htmlに指定していきます。

public/index.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

また、今回は便利なアイコンを気軽に実装できるFont Awesomeも使っていきます。
同じようにCDNを公式サイトからコピーして、index.htmlに追加します。

public/index.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">

これでBootstrapとFont Awesomeの準備ができました！
長くなりそうなので、UIを実装していく箇所は次回の記事にしていきます。

まとめ

今回はCreate React Appの使い方を見ていきながら、Smart Speaker’s Commands Speaker (SSCS)のUI部分として使用するBootstrapとFont Awesomeを設定しました。
次回はJSXを使いながらUIを作り、またコンポーネント分割もしていきます。