こんにちは！DMM WEBCAMPでメンターをしている人です！
アドベントカレンダー16日目は、（僕の中で）最近話題のReact Nativeを使って電卓を作ってみます。

チュートリアル形式でReact未経験の方でも分かるように専門用語を出来るだけ削って書いていきます。

是非トライしてみてください！

1.React Nativeとは？🤔

Facebookが開発した「React」というJavaScriptのフレームワークの亜種で、iOSやAndroidのアプリを作ることが出来る代物です。Reactは仮装DOMが実装されているので表示が早いというメリットがあります。

・jsなら任せて！
・Reactならわかるぞ！
・さくっとアプリ作りたい！
・スマホのアプリが作りたいけどSwift・Kotlinやる時間がない・・・
なんて方にオススメのアプリケーションフレームワークです。

さらに踏み込んだ解説が知りたい方はこちらの記事がオススメです。
「React Nativeとは何なのか」

2.今回やること

この記事では、四則演算が出来る電卓アプリを作っていきます。

3.開発環境＆構築

・Androidの開発を行う場合は、「Android studio」
・iOSの開発を行う場合は、「Xcode」が必要になります。

今回はiOSのアプリを作るのでAndroidの環境構築は省かせていただきます。ごめんなさい
（Androidの開発が行いたい方はこちらの記事が分かりやすかったです！）

まずはnodeとwatchmanというものをインストールします。

$ brew install node
$ brew install watchman

次にexpoのダウンロードです。
nodeをインストールしたときにnpmが入っているのでnpmコマンドが使えます。

$ npm install expo-cli --g

Expoを深く知りたい方はこちらの記事がGoodです。

これで完了！といいたいところですがExpoはXcodeがないと開けないため、Xcodeのダウンロードをしましょう。
Xcodeで開いたiOSシュミレーター（PC上で開かれるiPhone）の中にExpoアプリがインストールされるのでXcode必須です。

Xcodeとは

XcodeはAppleが開発したソフトウェア開発者向けの主にMacやiPhone、iPadのアプリケーションを作るのに向いています。XcodeのおかげでMac上でiOSのシュミレーターが起動できます。

ダウンロードしたことがない方はApple Storeからダウンロードしてください！

ただ、めちゃくちゃサイズがデカいのでインストールに時間がかかります。

待ち時間にReactNativeの公式ドキュメント でも読んで時間を潰しちゃいましょう。

ここまできたら準備完了です！

プロジェクトの新規作成

以下のコマンドを実行してReactNativeアプリを新規作成しましょう！

$ expo init お好きな名前

プロジェクトのテンプレート選択

expo init ○○○後に、画像のようにテンプレートをどうするか聞かれますがここは「blank」を指定しましょう。

名前の設定をしよう

テンプレート選択した後はこのような画面になると思います。

ここでは実際のアプリ名を設定します。（アプリアイコンの下に表示される名前）

リリースを考えているアプリの場合変な名前にしてはいけません！！！

Yarnは使わなくてOK!

Yarn v1.19.1 found. Use Yarn to install dependencies? (Y/n) 

このような質問がされる場合があります。
これは「Yarnが見つかったけどYarnは使う？どうする？」と聞かれています。
今回はnpmを使用しているので「n」を押してEnterです。

最終行にこのような記述があればアプリの作成完了です！

：（省略）
：
Your project is ready at　〜〜略〜〜〜
To get started, you can type:

  cd アプリ名
  npm start

npm start を実行してこの画面が表示されれば下ごしらえも完了です！

Railsに比べてシックで落ち着いたスタート画面ですね、おしゃれ。

補足：自分のスマホで開いてみよう

なんと自分の携帯にも開発しているアプリを開くこともできます。

まず。ご自身のスマホにExpoのアプリ（AppleStoreもしくはGooglePlayにて「Expo」で検索です！）をインストールします。

次に、アプリを読み取るQRコードをための作業をPCでします。

アプリが立ち上がった後のターミナルで

Press ? to show a list of all available commands

と出たら、「？」を入力します。次に「d」を押すとブラウザでデベロッパツールが開かれます。

デベロッパーツールにあるQRコードを読み取ると作っているアプリのURLが出るのでタッチしましょう！これでExpoアプリが開かれます！！

4.実装！

まず初めに、開発するアプリケーションの階層から見ていきましょう。

.expo
　├ packager-info.json
　├ setting.json
.expo-shared
　├ assets.json
.assets
　├ icon.png
　├ splash.png
.node_module
　├ 色々入ってます
.gitignore
App.js　← 主にこれを使います
babel.config.js
package-lock.json
package.json
style.js　← こちらを新規作成します

5.アプリ作成後に書かれている記述の意味は？

アプリの新規作成後にデフォルトで開かれるのは「App.js」というファイルです。そこにいろいろな記述を書いていき、最終的にはかっこいい電卓を作ります。

では、App.jsに最初から書かれている記述を見ていきましょう。

App.js

import React from 'react'; // ①
import { StyleSheet, Text, View } from 'react-native';  // ②

export default function App() {  // ⑤
  return (
    <View style={styles.container}> // ③
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
};

const styles = StyleSheet.create({ // ④
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

importってなに？

①と②はReact Nativeを使って開発するときのおまじないのようなものです。

①は、"react"モジュールからimport（=輸入する）して、Reactの記述を使用できるようにしています。

アプリケーションの中にnode-moduleというフォルダがあり、更にその中のreactというフォルダからimportしてきて色々読み込んでいます。

②は、"react-native"モジュールからimportして、StyleSheetやTextクラスを使えるようにしています。

こちらもnode-moduleの中のreact-nativeフォルダからimportしてきています。

「なんで全部importしておかないの？」と思った方いませんか？僕は思いました。

実は、全ファイルやコンポーネントをimportするより、各々が使いたいファイルやコンポーネントを選んでimportする方が読み込み速度が上がるらしいです。言われてみれば納得です

Reactの描画速度が早いと言われる理由はこんなところにもあるんです！

コンポーネントについて

React Nativeでは描画するために独自のコンポーネントを使用する必要があります。
理由としては、divやspanタグが使えないので、Viewなどのコンポーネントを使う必要があるというわけです。
（この概念が難しいと言うか、コードを理解不能にしている要因の１つですが、慣れると余裕です）

現状のコードの中だと、VIewとTextとStyleSheetがReact Nativeのコンポーネントです。

importせずにこれらのコンポーネントを使用するとエラーを吐いてしまいます。

だから自分が使用したいコンポーネントに合わせて②に追記していく感じです。

例えば入力フォームを作成したい場合は、以下のように追記します。

App.js

import React from 'react'; 
import { StyleSheet, Text, View, TextInput } from 'react-native';  //←追加！！！

export default function App() {  
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
        <TextInput style={styles.input} />  //←追加！！！ 
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {     //←追加！！！
    width: 100,
    borderColor: "gray",
    borderWidth: 1,
  },
});

　＜TextInput /＞　 ＜TextInput＞ ~~ ＜/TextInput＞の省略系です、便利！

コンポーネントはたくさん種類があり公式ドキュメントにたくさん載っています。

StyleSheet.createってなに？

続いて、③と④についてです。この２つはスタイル（見た目）を担っている部分です

何をしているかというとStyleSheetというコンポーネントを作成し、その中にスタイルの記述をたくさん書いています。

では、文字を赤くさせたい！なんて時はどうすればよいでしょうか。

３ステップです。
1. stylesの中に、新しく「redColor」を定義します。（ここの命名は自由です）
2.「redColor」を反映させたいコンポーネントにstyle={styles.redColor}を足します
3. 完成

App.js

import React from 'react'; 
import { StyleSheet, Text, View, TextInput } from 'react-native'; 

export default function App() {  
  return (
    <View style={styles.container}>
      <Text style={styles.redColor}>Open up App.js to start working on your app!</Text>   //←　追記！！
        <TextInput style={styles.input} /> 
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {     
    width: 100,
    borderColor: "gray",
    borderWidth: 1,
  },
   redColor: {        //←　追記！！！
    color: "red" 
  },
});

いちいちこんなことするの面倒臭い！って方には、コンポーネントに直接スタイルを書くのがオススメです。こんな風に直書きができます。

   <TextInput
     style={{width:100, borderColor: 'gray', borderWidth: 1 }}　
   />

ハマりポイント スタイルはキャメルケースで！

注意点としてはReact Nativeではプロパティーの部分はキャメルケースのみ使えます。

キャメルケースとは、「backgroundColor」のような、単語と単語の間にスペースや"-"を置かずに、文字の始まりを大文字にする形式です。
（ラクダのこぶに似てることからキャメルケースと呼ばれます。他にもスネークケース、ケバブケースがあります）

普段「background-color」としていたところを「backgroungColor」としなければなりません。

ようやくコンポーネントが描画される！

export default function App() {  // ⑤
  return (
    <View style={styles.container}> 
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
};

ラストです。
ここではimportしたViewとTextコンポーネントを使用しています。

HTML/CSS経験者であればこの書き方に違和感を感じますよね。

意訳ですが、HTML/CSSに変換して記述してみるとこんな感じです。
コンポーネントの使い方とイメージがつかめば全然怖くありません。

意訳.html

<div style="省略">
  <p>Open up App.js to start working on your app!</p>
</div>

続いて、以下の部分です。

export default function App() {  // ⑤

};

exportとは先ほど出てきたimportの反対の意味です。

export内で定義した記述を他の場所で使えるようにするものです。

例えばsample.jsを新規作成し、そこにexport~~の記述をしたコンポーネントを2つ書きます。

これをApp.jsで受け取りたいとしましょう。

sample.js

import React, {Component} from 'react';
import {Text, View} from 'react-native';

export class Sample1 extends Component {
    render(){
        return(
            <View>
              <Text>サンプルの１です</Text>
            </View>
        );
    };
};

export class Sample2 extends Component {
    render(){
        return(
            <View>
              <Text>サンプルの２です</Text>
            </View>
        );
    };
};

App.js

import React from 'react'; 
import { StyleSheet,  View,  } from 'react-native';
import {Sample1 , Sample2} from "./sample"; //←ここでimportしています


export default function App() {  
  return (
    <View style={styles.container}>
      <Sample1 />  //←ここでimportしたSample1を
      <Sample2 />  //←ここでimportしたSample2を使っています
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

defaultオプション付きのexportは、そのファイルの中においてデフォルトでexportされるコンポーネントを決めることができます。default付きexportはimportする時の名前はなんでもよく、ついていないものはclass名をimportする側で同じにしなければなりません。（面倒くさい）

例えば先ほどのSample1クラスにdefaultを設定します

sample.js

export default class Sample1 extends Component {
//略

次にApp.jsでimportします。

App.js

import hogehoge ,{Sample2} from "./sample"; //←import名を適当にしてます

//略

    <View style={styles.container}>
      <hogehoge />  //←ここでimportしたhogehogeを使える！
      <Sample2 />  
    </View>

defaultが付いていないものは{ }で囲う必要があるので要注意です！

export defaultについて詳しくはこちらです。

6.スタイルを適応させよう

次にレイアウトを整えるためにスタイル（≒CSS）を作っています。

ここはそれほど重要ではないので、何をしているか理解したらコピペしちゃって大丈夫です。

また、App.jsにスタイルの記述をしてもいいのですが個人的に見辛いのでファイルを分けました。

２ステップです。

①App.jsと同じ階層にstyle.jsを新規作成する

②以下のコードを貼り付ける

style.js

import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
    container: {
      backgroundColor: '#FFF',
    },
    countArea: {
      marginTop: 140,
      justifyContent: "center",
      alignItems: "center", 
      marginBottom:10
    },
    buttonArea: {
      marginTop: 5,
      justifyContent: 'center',
      alignItems: 'center'  
    },
    value: {
      fontSize: 30
    },
    topbutton: {
      marginTop: 50
    },
    button: {
      marginTop: 5,
      justifyContent: 'center',
      alignItems: 'center',
      width: 50,
      height: 40,
      borderRadius: 5,
      borderWidth: 1,
      borderColor: '#fff'
    },
    buttonText: {
      fontSize: 25,
      color: '#fff'
    },
    buttonUp: {
      backgroundColor: '#A53434',
      fontWeight: "bold"
    },
    buttonUpText: {
      backgroundColor: 'red'
    },
    buttonMinus: {
      backgroundColor: '#343EA5'
    },
    buttonTimes: {
      backgroundColor: 'purple'
    },
    buttonDivide: {
      backgroundColor: "green"
    },
    buttonReset: {
      borderColor: '#AFADAD',
      marginBottom: 200
    },
    buttonResetText: {
      color: '#000',
      fontSize:11
    },
    buttonNum: {
      backgroundColor: 'grey',
      fontWeight: "bold",
      justifyContent: 'center',
      alignItems: 'center',
      flexDirection: 'row',
      width: 60,
      height: 40,
      borderRadius: 5,
      borderWidth: 1,
      borderColor: '#fff'
    },
    buttonEqual: {
      backgroundColor: "black"
    }
  });

  export default (styles);

"react-native”から”StyleSheet”コンポーネントをimportしています。

こうすることによって

３行目でStyleSheet.createが使えるようになります。

この記述をすることによって、このコンポーネントはスタイルの記述をしますよ〜！と明示することが出来ます。
（StyleSheet.createしなくても動作はしますが、一応書いたほうがいいです。詳しくはこちら の記事です。）

そして、最終行では、このstyle.jsがどこでも使えるようにexportしています。

これをApp.jsでimportすればスタイルの土台は完成ですね。

7.電卓のレイアウトを作ろう

スタイルを作成したので、次はそれを適応させるためのコンポーネントを作っていきます。
App.jsに書いている記述は１度全て消してから以下のコードを書いていきましょう！ここからスタートです！！

まずは先ほどのstyle.jsをApp.jsでimportします。

ついでに、この後使う「TouchableOpactity」というコンポーネントもimportしておきます。

App.js

import React, {Component} from 'react';
import { Text, View, TouchableOpacity } from 'react-native'; //←StyleSheetとInputTextがある方は削除でOK!
import styles from "./style"  //←追記！

次にコンポーネントの作成を行っていきます。

App.js

//↓import ~~~の下に↓

export default class App extends Component {
    render() {
      return (
        <View>
          <View style={styles.countArea}>
            <Text style={styles.value}>0  ?  0  =  0</Text>
          </View>
        </View>
      );
    };
};

　画像のようなものが画面に写ればOKです！

計算用ボタンの設置

次に電卓のボタンを作っていきましょう。

先ほどimportした「TouchableOpacity」がここで出番です。

TouchableOpacityとは、簡単に言うとクリックできる要素のことです。
これを用いることでボタンが簡単に作れます。

App.js

//↓import ~~~の下に↓

export default class App extends Component {
    render() {
      return (
        <View>
          <View style={styles.countArea}>
            <Text style={styles.value}>0  ?  0  =  0</Text>
          </View>

          <View style={styles.buttonArea}>
            <View style={{ flexDirection: 'row'}}>
               <TouchableOpacity style={[styles.button, styles.buttonUpText]}>
                 <Text style={styles.buttonText}>+</Text>
               </TouchableOpacity>
            </View>
           </View>
        </View>
      );
    };
};

画像のようなボタンが表示されたでしょうか？

あとは、数字のボタンや四則演算のボタンを設置していきます！

一気に書いていきましょ〜！

App.js

export default class App extends Component {
    render() {
      return (
        <View>
          <View style={styles.countArea}>
            <Text style={styles.value}>0  ?  0  =  0</Text>
          </View>

          <View style={styles.buttonArea}>
//足し算ボタン
            <View style={{ flexDirection: 'row'}}>
               <TouchableOpacity style={[styles.button, styles.buttonUpText]}>
                 <Text style={styles.buttonText}>+</Text>
               </TouchableOpacity>
//引き算ボタン
               <TouchableOpacity style={[styles.button, styles.buttonMinus]} >
                 <Text style={styles.buttonText}>-</Text>
               </TouchableOpacity>
//掛け算ボタン
               <TouchableOpacity style={[styles.button, styles.buttonTimes]} >
                 <Text style={styles.buttonText}>x</Text>
               </TouchableOpacity>
//割り算ボタン
               <TouchableOpacity style={[styles.button, styles.buttonDivide]} >
                 <Text style={styles.buttonText}>÷</Text>
               </TouchableOpacity>
//＝ボタン
               <TouchableOpacity style={[styles.button, styles.buttonEqual]} >
                 <Text style={styles.buttonText}>=</Text>
               </TouchableOpacity>
//リセットボタン
               <TouchableOpacity style={[styles.button, styles.buttonReset]} >
                 <Text style={[styles.buttonResetText]}>リセット</Text>
               </TouchableOpacity>
             </View>
           </View>
        </View>
      );
    };
};

画像のようにボタンが６つ表示さえれば計算ボタンは完成です。

数字ボタンの設置

次は０〜９の数字ボタンを作っていきます。

先ほどの計算ボタンはボタンごとに色や文言が変わるので個別に作成しました。

しかし、０〜９の数字ボタンは値やボタンの文字が変わるだけです。なので繰り返し処理を使って簡潔に記述しましょう！

まずは、以下のように配列を定義してあげます。

App.js

//〜〜〜略
exporet ~~
  render() {
    return (
      <View>
　　　　　　//略
      </View>
    );
  };
};
//↓ここの下に記述

const ZeroToFour = [];
for (let i = 0; i< 5; i++) {
  ZeroToFour[i] = i
};

const FiveToNine = [];
for (let i = 5; i< 10; i++) {
  FiveToNine[i] = i
};

まずは繰り返し処理に使う配列を２つ用意します。ZeroToFourは0〜4、FiveToNineは5〜9のボタンを作ります。
（レイアウト調整のためここは敢えて配列２つ使っています、10個まとめて作るとレイアウトが綺麗に整えられませんでした。甘えです、ごめんなさい）

App.js

//略
export default class App extends Component {
    render() {
      return (
        <View>
          <View style={styles.countArea}>
            <Text style={styles.value}>0  ?  0  =  0</Text>
          </View>

          <View style={styles.buttonArea}>

//↓追加↓
            <View style={{flexDirection: 'row'}}>
              {ZeroToFour.map(i => (
                  <TouchableOpacity style={styles.topbutton,styles.buttonNum} key={i} >
                    <Text style={styles.buttonText}> {i} </Text>
                  </TouchableOpacity>
              ))};
            </View> 

            <View style={{ flexDirection: 'row'}}>
              {FiveToNine.map(i => (
                  <TouchableOpacity style={styles.topbutton, styles.buttonNum} key={i}>
                    <Text style={styles.buttonText}> {i} </Text>
                  </TouchableOpacity>
              ))};
            </View>

//ここより上を追加
//足し算ボタン
            //<View style={{ flexDirection: 'row'}}>
              //<TouchableOpacity style={[styles.button, styles.buttonUpText]}>
                 //<Text style={styles.buttonText}>+</Text>
               //</TouchableOpacity>

少し複雑な記述です。

ここはZeroToFourとFiveToNineの値を繰り返し処理（map)で出力させています。

実際は見本のように描画されていますが１０個分の記述を書くとなると非常に長いので繰り返し処理を用いてボタンを作っています。

styleのflexDirection: "row"は、要素を横並びにするスタイルです。
このおかげでかっこいい電卓のレイアウトが出来ましたね。

見本

        <View style={{flexDirection: 'row'}}>
              <TouchableOpacity style={styles.topbutton,styles.buttonNum}>
                <Text style={styles.buttonText}> 0 </Text>
              </TouchableOpacity>
                           .
                           . （1~8省略）
                           .
              <TouchableOpacity style={styles.topbutton,styles.buttonNum}>
                <Text style={styles.buttonText}> 9 </Text>
              </TouchableOpacity>
        </View>

ようやくここまででレイアウトが整いました。お疲れ様です

後半では実際にデータをやりとりしたり計算する処理を作っていきます。

前半戦の完全版コードをこちらに置いておきます。うまくいかない方は確認してみましょう！

後編はこちらです！！！

8.数字ボタンを押してその値を描画しよう！

レイアウトが完成したので次は機能を作っていきます。
複雑な部分が多いので頑張っていきましょう

まずは、数字ボタンが押されたらその数字が描画されるところまでやっていきましょう。

①「ボタンが押されたら値（= 押したボタンの数字）が送信される」という記述を作る

②送信された値を受け取る

③その値を描画する

という流れで作っていきます。

①「ボタンが押されたら値が送信される」という記述を作る

早速作っていきましょう。ボタンを作っているコードに追加していきます。

App.js

        <View style={styles.buttonArea}>
          <View style={{flexDirection: 'row'}}>
            {ZeroToFour.map(i => (
                <TouchableOpacity style={styles.topbutton,styles.buttonNum} key={i} onPress={() => this.onNum({i})}>
                  <Text style={styles.buttonText}> {i} </Text>
                </TouchableOpacity>
            ))}
          </View> 

          <View style={{ flexDirection: 'row'}}>
            {FiveToNine.map(i => (
                <TouchableOpacity style={styles.topbutton, styles.buttonNum} key={i} onPress={() => this.onNum({i})} >
                  <Text style={styles.buttonText}> {i} </Text>
                </TouchableOpacity>
            ))}
          </View>

onPress={() => this.onNum({i})}という記述を追加しています。

onPressはjsやJQueryの「click関数」とほぼ同じ意味です。

{i}には繰り返し処理中のindexが入るので、０〜９の値が入りますよね。
これを利用して押されたボタンの数字を取得して送信しているという仕組みです。

②送信された値を受け取る

値の送信は完了したので、その値を処理して受け取る作業をしていきます。

①に追記したonNumは未定義のものなので、定義してあげましょう。

App.js

//import 略

export default class App extends Component {
//ここから
  constructor(props){
    super(props);
    this.state = {
      leftNum: 0
    }
  }
  onNum(input){
    console.log(input); //←デバック用
    this.setState({ leftNum:  input["i"] })
  } 
//ここまで


//render(){
  //return(

onPressイベントから送信された値は、onNumイベントで受け取っています。引数(input）に値が送られてきています。

console.log(input)でどんなものが送られてきたか確認してみましょう！

「７」のボタンを押すと、こんなデータが送信されていることが分かりました。

7のボタン

//inputの中身
Object {
  "i": 7,
}

オブジェクトとして送信されていて、"i"がkey、７がvalueですね。

では、ここから「７」を取得したい場合は以下のようにすれば良いですよね。

input["i"] 
//valueの７が取れる

そして、最後に取得した値を保存します。

保存

this.setState({ leftNum:  input["i"] })

この記述を行うことでstateにあるlaftNumにinput["i"]の値を保存しています。

setStateはstateを変化させたい時に使用するもので「stateにsetする」的なイメージを持ってくれたらOKです。

こうすることで、

    this.state = {
      leftNum: 0
    }

０だったleftNumが

    this.state = {
      leftNum: 7
    }

7に変化します！

③保存した値を描画する

ラストは保存した値を描画する作業です。これは秒です、2秒です。

先ほどまで、「０　？　０　＝　０」としていたところを少し変更します！

１番左の０の部分を{this.state.leftNum}にするだけです。

これで現在のleftNumの値を描画してくれるというわけです。（すごい！）

App.js

//略

  render() {
    return (
      <View>
        <View style={styles.countArea}>
          <Text style={styles.value}>{this.state.leftNum}  ?  0  =  0</Text>
        </View>

9. ２桁以上の入力をできるようにしよう！

ここまででようやく押したボタンの数値が適応されるようになりました。でも、現状だと数字ボタンを押しても値が変更されるだけで１桁しか表示されません。

１桁しか計算できない電卓なんで全然かっこよくないですよね。むしろダサいです。

しかし、僕は２桁以上の入力を出来るようにするやり方に悩みに悩みました、何日も悩みました。１度考えることを辞めた僕はなぜか閃きました。

「１回文字型に変換して足して、数値型に戻せば良いんだ！！！！」

（僕はこのやり方しか思いつかなかったので他にもあれば教えていただきたいです。）

数値型のまま、既存のstateの値と入力された値を足すと普通に足し算されてしまいます。

悪い例

//デフォルトでleftNumに2、input["i"]に４があるとする
this.state.leftNum + input["i"]

2 + 4 = 6になってしまう

成功例

//デフォルトでleftNumに2、input["i"]に４があるとする
String(this.state.leftNum) + String(input["i"])

(文字列の)"2" + (文字列の)"4" = "24"

既存の値と入力された値の両者を文字列に変換して、＋してあげると文字列同士の足し算が行われるのでこれを利用しました。

これを使って記述を変更しましょう！

App.js

  onNum(input){
    //console.log(input);
    //this.setState({ leftNum:  input["i"] })
    const num = Number(String(this.state.leftNum) + String(input["i"])) //文字列同士の足し算を行い、最後に数値型に変換
    this.setState({ leftNum:  num }) //leftNumに計算した値をset!
  } 

だんだん完成に近付いてきました。現在70％くらいの完成度です。ラストスパートです！

10.四則演算の選択を可能に！

左側の数値の入力は可能になったので、計算方法の選択が出来るようにしましょう。

数字ボタンの時とやることは同じなのでサクッといきましょう！

App.js

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      leftNum: 0,
      mark: "?",
    }
  }

//~~~略

  render() {
    return (
      <View>
        <View style={styles.countArea}>
          <Text style={styles.value}>{this.state.leftNum}  {this.state.mark}  0  =  0</Text>
        </View>

//~~~略
//~~~略
        <View style={{ flexDirection: 'row'}}>
        //以下４つにonPressを追記
          <TouchableOpacity style={[styles.button, styles.buttonUpText]} onPress={() => this.onMark("plus")}>
            <Text style={styles.buttonText}>+</Text>
          </TouchableOpacity>

          <TouchableOpacity style={[styles.button, styles.buttonMinus]} onPress={() => this.onMark("minus")}>
            <Text style={styles.buttonText}>-</Text>
          </TouchableOpacity>

          <TouchableOpacity style={[styles.button, styles.buttonTimes]} onPress={() => this.onMark("times")}>
            <Text style={styles.buttonText}>x</Text>
          </TouchableOpacity>

          <TouchableOpacity style={[styles.button, styles.buttonDivide]} onPress={() => this.onMark("divide")}>
            <Text style={styles.buttonText}>÷</Text>
          </TouchableOpacity>

やっていることは３つです。

①stateに[＋ ー ➗X]を表すための「mark」を追加

②常に今のmarkの値を描画するために{ this.state.mark }を追加

③四則演算のボタンにonPressイベントを追加

この３つは数字ボタンと流れは同じですよね。

この状態でボタンを押してもエラーが出るので、入力したボタンの値を受け取って正常に描画させましょう。

入力してきた値が"plus"ならmarkを「＋」に変更というようなイメージです
たくさん条件分岐させていきます。

App.js

onMark(input){
    if (input == "plus"){
      this.setState({ mark: "+"  })
    } else if (input == "minus") {
      this.setState({ mark: "-" })
    } else if (input == "times") {
      this.setState({ mark: "x"} )
    } else if (input == "divide") {
      this.setState({ mark: "➗"})
    }
  }
}

（↑の➗マークが見えづらくなってます。）

11.右側の数字を入力可能に使用！

現状は左の数値と四則演算のマークの入力は可能になっています。

次は右側の数値の入力ができるようにしましょう！ここも今までと同じ流れで完了です。

APp.js

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      leftNum: 0,
      mark: "?",
      rightNum: 0, //←追記
    }
  }
  onNum(input){ //以下追記
    if (this.state.mark == "?"){
      let num = Number(String(this.state.leftNum) + String(input["i"]))
      this.setState({ leftNum: num })
    } else {
      let num = Number(String(this.state.rightNum) + String(input["i"]))
      this.setState({ rightNum: num })
    } 
  }

//~~~~~略

  render() {
    return (
      <View>
        <View style={styles.countArea}>　//以下追記
          <Text style={styles.value}>{this.state.leftNum}  {this.state.mark}  {this.state.rightNum}  =  0</Text>
        </View>

ここまでのコードはこちらです。困ったら確認してください

12. 「＝」を押したら計算を実行する！

ようやく計算式の入力が出来るようになりました。

「＝」が押されたら四則演算のマークに応じて計算が行われるようにしましょう。

まずは「＝」ボタンの所に追記しましょう。

App.js

 <TouchableOpacity style={[styles.button, styles.buttonEqual]} onPress={() => this.onEqual()} >
   <Text style={styles.buttonText}> = </Text>
 </TouchableOpacity>

onEqualを定義して、markの値によって条件分岐を行います。

そして、結果の値をsetすれば完了です。

App.js

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      leftNum: 0,
      mark: "?",
      rightNum: 0,
      result: 0 //追記
    }
  }
      :
      :略
      :
  onEqual(){
    if (this.state.mark == "+") {
      this.setState( { result: this.state.leftNum + this.state.rightNum })
    } else if (this.state.mark == "-") {
      this.setState( { result: this.state.leftNum - this.state.rightNum})
    } else if (this.state.mark == "x") {
      this.setState( { result: this.state.leftNum * this.state.rightNum})
    } else if (this.state.mark == "➗") {
      this.setState( { result: this.state.leftNum / this.state.rightNum})
    }
  }

  render() {
    return (
      <View>
        <View style={styles.countArea}>
          <Text style={styles.value}>{this.state.leftNum}  {this.state.mark}  {this.state.rightNum}  =  {this.state.result}</Text> //追記
        </View>

「＝」ボタンを押したらonEqualが発火します。

onEqualイベントは、markの値によって条件分岐しています。

例えばmarkが「➗」だったら、leftNumとrightNumを割り算して、resultにsetしています。

これでようやく計算ができるようになりました！！！！！

次でラストです！！！

13.リセットを反映させよう！

最後はリセットボタンです。iPhoneアプリの電卓なら「AC」にあたるところです。

リセットボタンを押したらstateにあるleftNumとrightNumを「０」に、markを「？」に変更します。

App.js

:
:略（onEqual）の下に記述
:
  onReset(){
    this.setState({ leftNum: 0, mark: "?", rightNum:0, result:0 })
  }

：
：略　リセットボタンに追記

   <TouchableOpacity style={[styles.button, styles.buttonReset]} onPress={() => this.onReset()}>
      <Text style={[styles.buttonResetText]}>リセット</Text>
   </TouchableOpacity>

これで値のリセットが完了しました！

まとめ

ようやく電卓が完成しました。お疲れ様でした。
Reactが初めての方はとても大変でしたよね。

今回のアドベントカレンダーでアウトプットの重要性が身に染みてわかりました。
この記事を書くために調べて、実践して、改善してと非常に良い勉強になりました。

とりあえず本当にお疲れ様でした！
完成版コードの確認をしたい方はこちらです。

あらゆるウェブページをRSSフィードに変換するHappyou Final Scraperという便利なものがあり愛用していたのですが、
かなり昔のあるときからInoreaderからのアクセスが非常に遅くなり、タイムアウトになりRSSを取得できない状態が続いていました。

新規追加のときはタイムアウトが長いのか、かなり待てば追加されるのですが、普段の巡回はエラーに書いてあるように3秒以内に応答がなければ失敗扱いとなります。

原因はわからず、私の環境かHappyou Final ScraperとInoreaderの経路間の問題なのか不明で放置していたのですが、
一念発起して迂回スクリプトを書くことに。
普通のアクセスは高速なので、別のところで取得してそのままInoreaderに返せばよかろうとなりました。
ラムダとかでいいのですが簡単なGASで書きます。

function doGet(e) {
  var URL = ''
  if (e.parameter.url) {
    URL = 'https://' + decodeURIComponent(e.parameter.url)
  } else {
    URL = 'https://www.happyou.info/fs/gen.php?u=1525577309&p=-453397430'
  }
  const res = UrlFetchApp.fetch(URL)
  return ContentService.createTextOutput(res.getContentText())
  .setMimeType(ContentService.MimeType.XML);
}

GETパラメーターで取得先のRSSURLを渡してあげて、fetchはGASで行いInoreaderにレスポンスを返す単純なアプリを公開します。

こうするとフェッチを加味してもInoreaderとGAS間の応答は3秒以内に収まるので、

このようにInoreaderでHappyou Final ScraperのRSSが再び取得できるようになりましたとさ。めでたしめでたし。

URLを指定すると

https://script.google.com/macros/s/fugafuga/exec?url=www.happyou.info%2Ffs%2Fgen.phphogehoge

こんなかんじですね。

はじめに

間も無く終了する2010年代はJavaScriptが大きく成長した十年でした。Reactなどの革新的なフレームワークが登場し、Node.js、React Naitive などブラウザ以外でのエコシステムも大きく成長しました。また言語自体もES2015以降日々進歩しており、JavaScriptは2010年代でもっとも多くの人に使われたプログラミング言語となりました。さらにJavaScriptに静的型付を導入したTypeScriptとそのエコシステムもここ数年で大きく成長しており、JavaScriptは大規模なソフトウェアの開発にも耐えうるようになってきています。

出典: https://octoverse.github.com/#top-languages

一方で2010年代にJavaScript以上に大きく人気を伸ばしたプログラミング言語がありました。Pythonです。2010年代に大きく伸びた分野であるデータサイエンスと機械学習(AI)の分野ではPythonはその利便性で他のメジャーなプログラミング言語を圧倒しています。2010年代はPython2から下位互換性のないPython3への移行という混乱と困難があったにも関わらず、Pythonはデータ分析・機械学習分野の成長と歩みをともにして大きく人気を伸ばしました。2019年のGitHubの報告ではJavaを抜いて遂にユーザー数が2位となっています。JavaScriptはまだPythonにユーザー数では優っているもののデータ分析・機械学習の分野では大きく遅れをとっており、この分野の今後の伸び次第では近いうちにランキングが逆転するかもしれません。逆にユーザー数で優位にあるJavaScriptがこの分野でも人気を獲得し、その地位を不動のものとするかもしれません。

2020年代がJavaScript, Pythonにとってどのような時代になるのか楽しみです。この記事では2020年代におけるJavaScriptの機械学習、特にディープラーニングにおける成長の可能性を探るべく、JavaScriptのみを使ってディープニューラルネットワークモデルを構築することに挑戦してみます。

TensorFlow

TensorFlowはGoogleが公開しているディープラーニングのフレームワークです。FacebookのPyTorchと人気を二分するディープラーニングの二大フレームワークの1つです。学術分野では最近PyTorchに追い上げられているとの指摘もありますが、産業分野では一日の長があり2019年現在もっとも広く使用されているディープラーニングのフレームワークです。

TensorFlowのメインのターゲットはPythonですが、Python以外にもJavaScript, C++, Java, Go, Swiftなどが(実験的に)サポートされています。

TensorFlow.js

TensorFlow.js is a JavaScript Library for training and deploying machine learning models in the browser and in Node.js.

TensorFlow.jsはTensorFlowのJavaScript版のAPIです。TensorFlow.jsのもっとも重要な用途は他の環境で作成したTensorFlowのトレーニング済みモデルをウェブブラウザ上のアプリケーションに組み込めるようにすることです。ただしTensorFlow.jsはブラウザ上でのトレーニング済みモデルの実行だけでなく、Node.js上での実行やJavaScriptを使ったディープラーニングモデルのトレーニングもサポートしています。そのためTensorFlow.jsを使えばPythonを使うことなく、JavaScriptのみでディープラーニングモデルの構築からトレーニング、実際のアプリケーションとしての利用までエンドツーエンドで行うことが可能になっています。

Jupyter

Pythonをブラウザからインタラクティブに実行するための環境です。コードや実行結果が「ノート」として保存されるので非常に便利です。JavaScriptユーザーにはあまり知られてないツールかもしれませんが、Pythonを用いたデータ処理や機械学習、あるいは教育分野で非常に人気のあるツールであり、ここ数年で急激にユーザを増やしています。2019年のGitHub OctoverseでもJupyterの急激な成長が言及されています。Jupyter Notebook自体についてもっと知りたい人はGoogleでJupyterを検索して下さい。

Jupyterは「カーネル」を追加することでPython以外の言語もサポートすることが可能です。さまざまな言語のカーネルが存在しています。今回は僕が作っているJavaScript/TypeScript用のカーネルを使用してJupyter上で機械学習を行います。

出典: https://octoverse.github.com/#industry-spotlight-data-science

tslab

Jupyter上でJavaScriptおよびTypeScriptをインタラクティブに実行するためのJupyterカーネルです。

yunabe/tslab - Interactive JavaScript and TypeScript programming with Jupyter (GitHub)

(気に入ったらぜひStarもして下さい)

tslabはTypeScriptをベースに作られており、以下のような特徴があります:

• Jupyter上でのJavaScriptおよびTypeScriptのインタラクティブな実行
• TypeScript由来の静的型情報の活用
  • JavaScriptでも静的型チェックが行われる。
  • 静的型情報を利用した、コード補完やtipsの表示
• TypeScript 3.7のサポート
• Top-level await のサポート

またtslabはJavaScript/TypeScriptのリッチなREPLとして使用することもできます。

この記事ではtslabを使って、Jupyter上でインタラクティブにディープラーニングモデルを構築していきます。

環境構築

Node.js

Node.jsがインストールされていない場合はNode.jsを導入しましょう。現在の最新のLTSであるv12を前提に話を進めますが、v10, v13でも問題はないと思います。

Jupyter

Jupyterを使ってインタラクティブにディープラーニングモデルの構築を行いたいので、Jupyterもインストールしましょう。Pythonがよくわからない場合はAnacondaを使って導入するのが一番簡単だと思います。最新版のJupyterはPython2のサポートをすでに停止しています。特に理由がなければPython3版を使用して下さい。

tslab

tslabのREADME.mdに従ってインストールしてください。

npm install -g tslab

インストールに成功したら、tslabをJupyterに登録します

tslab install

tslab installが成功したら、jupyter kernelspec listでカーネルがJupyterに登録されていることを確認しましょう。

$ jupyter kernelspec list
Available kernels:
  jslab      /usr/local/google/home/yunabe/.local/share/jupyter/kernels/jslab
  tslab      /usr/local/google/home/yunabe/.local/share/jupyter/kernels/tslab

これでJupyter上でJavaScript/TypeScriptを実行できる環境が整いました。

jupyter notebook [--port=8888]

を実行して、JavaScript, TypeScriptの「ノートブック」がJupyterで作成でき、JavaScriptをインタラクティブにノートブック上で実行できることを確かめてください。

npmプロジェクトの作成

Node.js, Jupyter, tslab のセットアップができたら環境のセットアップは完了です。npmのプロジェクトを作ってTensorFlowをインストールし、ディープニューラルネットーワークをJavaScriptで行っていきましょう。今回は僕が作成したnpmプロジェクトとJupyterのノートがGitHubに置いてあるのでそれを取得してください。

git clone https://github.com/yunabe/qiita-20191202-jsml.git
cd qiita-20191202-jsml
npm install # or yarn

一からプロジェクトを構築する場合は通常通り、npm initやyarn initでプロジェクトを作ってください。

TensorFlow.js のインストール

チュートリアルTensorFlow.js in Nodeに従って、TensorFlow.jsをプロジェクトにインストールしてください。

npm install @tensorflow/tfjs-node

TensorFlow.jsはGPUによる高速化にも対応しています。
LinuxでGPU/CUDAが使用可能な環境であれば、tsjs-nodeではなく、@tensorflow/tfjs-node-gpuをインストールしてください。

これでJupyter上でTensorFlow.jsを使ってディープラーニングを行う準備は完了です。Jupyterを起動してJavaScriptあるいはTypeScriptのノートブックを作成してください。ここから先のコードはJupyter上で実行していきます。

jupyter notebook

ここで使ったノートブックはGitHubにコミットしてあります。ここから先はGitHub上のノートブックを直接参照してもらっても構いません。この記事ではJavaScriptを使用していますが、ノートブックはTypeScript版も用意しています。TypeScriptが分かる人にはTypeScript版をお勧めします。

GitHub

• JavaScript版ノートブック
• TypeScript版ノートブック

nbviewer (GitHubよりノートブックがみやすいです)

• JavaScript版ノートブック
• TypeScript版ノートブック

JavaScriptと静的型チェック

今回使用するJavaScript/TypeScriptの実行環境 tslabはTypeScriptをベースに実装されており、JavaScriptに対してもある程度の静的型チェックを行います。

let x = 123;
x += ' hello';
console.log(x);

例えば上のコードは1行目ではxの型はnumberであることを意図しているようにみえるのに、2行目でstringを代入しています。tslabはこのようなケースに対してエラーを表示します。

2:1 - Type 'string' is not assignable to type 'number'.

ただし、上記のコードはstringの代入が本当に意図的なのであれば正当なJavaScriptのコードです。そのような場合にはJSDocを使ってxが任意の型(any)をとりうることを明示する必要があります。

/** @type {any} */
let x = 123;
x += ' hello';
console.log(x);

このノートブックでは

• @param, @returnによる関数の型情報の宣言
• 型チェックをパスするためのキャスト

を利用しているので留意して下さい。型チェックの詳細についてはType Checking JavaScript Files
を参照して下さい。

またtslabでは静的型情報を使っているので、強力なコードの補完(Tab)と変数・関数定義情報の表示(Shift-Tab)が使用可能です。活用しながらコーディングして下さい。

TensorFlow.jsがインストールされていることの確認

まず初めに、TensorFlow.jsが正しくimportでき実行できるかバージョンを表示して確かめてみましょう。ちなみにtslabでHTMLや画像を表示するにはtslab.displayを使用します。無事バージョン番号が表示されたでしょうか。

ちなみにJupyter上ではTabでコード補完、Shift-Tabで関数定義などの表示が行えます。活用しながらコードを書いてください。

// const tf = require('@tensorflow/tfjs-node') も可能。
import * as tf from '@tensorflow/tfjs-node'
import * as tslab from "tslab";

tslab.display.html('<h2>tf.version</h2>')
console.log(tf.version);
tslab.display.html('<h2>tslab.versions</h2>')
console.log('tslab.versions:', tslab.versions);

MNIST をダウンロードする

TensorFlowが無事にNodeにインストール出来たので、ニューラルネットワークモデルを実際に構築してJavaScriptでトレーニングを行ってみましょう。ここでは機械学習のチュートリアルで常に使わる手書き文字認識のデータセットMNIST databaseを使って、数字の文字認識の機械学習を行ってみましょう。

TensorFlow.jsのサンプルコードの中にMNISTをダウンロードしてTensorFlowの内部表現に変換するコードの例が存在するので今回はそれを利用します。このコードはすでに例のレポジトリにコピーしてあるのでここではそれをimportします。興味があればどのような実装になっているかのぞいてみてください。

loadData()はPromiseを返すのでタスクの終了まで待機するのを忘れないでください。tslabはtop-level awaitをサポートしているのでawaitをつけるだけでOKです。

import mnist from '../lib/mnist';
await mnist.loadData();

データの確認と可視化

WikipediaのMNISTの記事にも書かれているように、MNISTのデータは60,000の訓練用データ(training data)と10,000の評価用データ(test data)に事前に分けられています。実際にダウンロードされたデータの大きさを確認してみましょう。

訓練データに60,000個、評価データに10,000個の数字の画像(images)と文字認識の正解データ(labels)が存在することが確認できたと思います。数字の画像データは28x28の白黒1チャンネル（グレースケール）であることも分かります。

ちなみにデータの内部表現として使われているTensorのAPIはここにドキュメントがあります。

tslab.display.html('<h2>訓練データのサイズ</h2>')
console.log(mnist.getTrainData());
tslab.display.html('<h2>評価データのサイズ</h2>')
console.log(mnist.getTestData());

// 訓練データのサイズ
{
  images: Tensor {
    kept: false,
    isDisposedInternal: false,
    shape: [ 60000, 28, 28, 1 ],
    dtype: 'float32',
    size: 47040000,
    strides: [ 784, 28, 1 ],
    dataId: {},
    id: 0,
    rankType: '4'
  },
  labels: Tensor {
    kept: false,
    isDisposedInternal: false,
    shape: [ 60000, 10 ],
    dtype: 'float32',
    size: 600000,
    strides: [ 10 ],
    dataId: {},
    id: 10,
    rankType: '2',
    scopeId: 6
  }
}
// 評価データのサイズ
{
  images: Tensor {
    kept: false,
    isDisposedInternal: false,
    shape: [ 10000, 28, 28, 1 ],
    dtype: 'float32',
    size: 7840000,
    strides: [ 784, 28, 1 ],
    dataId: {},
    id: 11,
    rankType: '4'
  },
  labels: Tensor {
    kept: false,
    isDisposedInternal: false,
    shape: [ 10000, 10 ],
    dtype: 'float32',
    size: 100000,
    strides: [ 10 ],
    dataId: {},
    id: 21,
    rankType: '2',
    scopeId: 14
  }
}

次にMNISTのデータの可視化もしてみましょう。MNISTの画像データは28x28の0から1.0のグレースケールのデータの配列です。画像ライブラリjimpを使用してPNGに変換して可視化してみます。

import Jimp from 'jimp';
import {promisify} from 'util';

/**
 * @param {tf.Tensor4D} images
 * @param {number} start
 * @param {number} size
 * @return {Promise<Buffer[]>}
 */
async function toPng(images, start, size) {
    // Note: mnist.getTrainData().images.slice([index], [1]) is slow.
    let arry = images.slice([start], [size]).flatten().arraySync();
    let ret = [];
    for (let i = 0; i < size; i++) {
        let raw = [];
        for (const v of arry.slice(i * 28 * 28, (i+1)*28*28)) {
            raw.push(...[v*255, v*255, v*255, 255])
        }
        let img = await promisify(cb => {
            new Jimp({ data: Buffer.from(raw), width: 28, height: 28 }, cb);
        })();
        ret.push(await img.getBufferAsync(Jimp.MIME_PNG));
    }
    return ret;
}

{
    const size = 8;
    const labels = await mnist.getTestData().labels.slice([0], [size]).argMax(1).array();
    const pngs = await toPng(mnist.getTestData().images, 0, size);
    for (let i = 0; i < size; i++) {
        tslab.display.html(`<h3>label: ${labels[i]}</h3>`)
        tslab.display.png(pngs[i]);
    }
}

ディープラーニングで文字認識を行う

MNISTのデータの素性が一通り分かったので、TensorFlow.jsを使って「ディープニューラルネットワーク」機械学習のモデルを設計、訓練し文字認識を行ってみます。
初めはPythonのTensorFlowチュートリアルでも利用されている、128ノードの中間層を一つ持つ単純なニューラルネットワークモデルを使って文字認識を行います。

TensorFlow.jsは、PythonのTensorFlowでも使われているkerasをベースにしたAPIを提供しています。そのためこの程度のシンプルなディープニューラルネットワークはTensorFlow.jsでも非常に簡単に実装できます。Layer APIの詳細はTensorFlow.jsのドキュメントを参照してください。

const model = tf.sequential();
model.add(tf.layers.flatten({inputShape: [28, 28, 1]}));
model.add(tf.layers.dense({units: 128, activation: 'relu'}));
model.add(tf.layers.dropout({rate: 0.2}));
model.add(tf.layers.dense({units: 10, activation: 'softmax'}));

model.compile({
  optimizer: 'adam',
  loss: 'categoricalCrossentropy',
  metrics: ['accuracy'],
});

/**
 * @param {tf.Sequential} model
 * @param {number} epochs
 * @param {number} batchSize
 * @param {string} modelSavePath
 */
async function train(model, epochs, batchSize, modelSavePath) {
  // Hack to suppress the progress bar by TensorFlow.js
  process.stderr.isTTY = false;
  const {images: trainImages, labels: trainLabels} = mnist.getTrainData();
  model.summary();

  let epochBeginTime;
  let millisPerStep;
  const validationSplit = 0.15;
  const numTrainExamplesPerEpoch =
      trainImages.shape[0] * (1 - validationSplit);
  const numTrainBatchesPerEpoch =
      Math.ceil(numTrainExamplesPerEpoch / batchSize);
  const batchesPerEpoch = Math.floor(trainImages.shape[0]*(1-validationSplit)/batchSize);
  /** @type {tslab.Display} */
  let display = null;
  await model.fit(trainImages, trainLabels, {
    callbacks: {
      onEpochBegin: (epoch) => {
        display = tslab.newDisplay();
      },
      onBatchBegin: (batch) => {
        display.text(`Progress: ${(100*batch/batchesPerEpoch).toFixed(1)}%`)
      },
    },
    epochs,
    batchSize,
    validationSplit,
  });

  const {images: testImages, labels: testLabels} = mnist.getTestData();
  const evalOutput = model.evaluate(testImages, testLabels);

  console.log(
      `\nEvaluation result:\n` +
      `  Loss = ${evalOutput[0].dataSync()[0].toFixed(3)}; `+
      `Accuracy = ${evalOutput[1].dataSync()[0].toFixed(3)}`);

  if (modelSavePath != null) {
    await model.save(`file://${modelSavePath}`);
    console.log(`Saved model to path: ${modelSavePath}`);
  }
}

const epochs = 5;
const batchSize = 32;
const modelSavePath = 'mnist'
await train(model, epochs, batchSize, modelSavePath);

_________________________________________________________________
Layer (type)                 Output shape              Param #   
=================================================================
flatten_Flatten1 (Flatten)   [null,784]                0         
_________________________________________________________________
dense_Dense1 (Dense)         [null,128]                100480    
_________________________________________________________________
dropout_Dropout1 (Dropout)   [null,128]                0         
_________________________________________________________________
dense_Dense2 (Dense)         [null,10]                 1290      
=================================================================
Total params: 101770
Trainable params: 101770
Non-trainable params: 0
_________________________________________________________________
Epoch 1 / 5
Epoch 2 / 5
Epoch 3 / 5
Epoch 4 / 5
Epoch 5 / 5
14906ms 292us/step - acc=0.974 loss=0.0845 val_acc=0.975 val_loss=0.0796 

Evaluation result:
  Loss = 0.083; Accuracy = 0.980
Saved model to path: mnist

トレーニングしたモデルを実行する

98%とそこそこ精度のよい文字認識のモデルができたので実際にテストデータを使って文字認識を行ってみましょう。

const predicted = /** @type {number[]} */(tf.argMax(/** @type {tf.Tensor} */ (model.predict(mnist.getTestData().images)), 1).arraySync());
const labels = /** @type {number[]} */(tf.argMax(mnist.getTestData().labels, 1).arraySync());
console.log('predictions:', predicted.slice(0, 10));
console.log('labels:', labels.slice(0, 10));

predictions: [
  7, 2, 1, 0, 4,
  1, 4, 9, 5, 9
]
labels: [
  7, 2, 1, 0, 4,
  1, 4, 9, 5, 9
]

正しく文字認識ができていますね。せっかくなので文字認識に失敗する例を可視化してみましょう。精度が98%程度あるとはいえ、人間であれば間違えないようなものが多いですね。

const predicted = /** @type {number[]} */(tf.argMax(/** @type {tf.Tensor} */ (model.predict(mnist.getTestData().images)), 1).arraySync());
const labels = /** @type {number[]} */(tf.argMax(mnist.getTestData().labels, 1).arraySync());

const numSamples = 32;
let count = 0;
for (let i = 0; i < predicted.length && labels.length; i++) {
    const pred = predicted[i];
    const label = labels[i];
    if (pred === label) {
        continue;
    }
    tslab.display.html(`<h3>予測: ${pred}, 正解: ${label}</h3>`)
    const pngs = await toPng(mnist.getTestData().images, i, 1);
    tslab.display.png(pngs[0]);
    count++;
    if (count >= numSamples) {
        break;
    }
}

CNN (convolutional neural network) による画像認識

MNISTの文字列認識は典型的な画像を対象としたディープラーニングなので、CNNによるディープラーニングも試してみましょう。モデルの構造はTensorFlow.jsの例から拝借してきます。

const cnnModel = tf.sequential();
cnnModel.add(tf.layers.conv2d({
  inputShape: [28, 28, 1],
  filters: 32,
  kernelSize: 3,
  activation: 'relu',
}));
cnnModel.add(tf.layers.conv2d({
  filters: 32,
  kernelSize: 3,
  activation: 'relu',
}));
cnnModel.add(tf.layers.maxPooling2d({poolSize: [2, 2]}));
cnnModel.add(tf.layers.conv2d({
  filters: 64,
  kernelSize: 3,
  activation: 'relu',
}));
cnnModel.add(tf.layers.conv2d({
  filters: 64,
  kernelSize: 3,
  activation: 'relu',
}));
cnnModel.add(tf.layers.maxPooling2d({poolSize: [2, 2]}));
cnnModel.add(tf.layers.flatten());
cnnModel.add(tf.layers.dropout({rate: 0.25}));
cnnModel.add(tf.layers.dense({units: 512, activation: 'relu'}));
cnnModel.add(tf.layers.dropout({rate: 0.5}));
cnnModel.add(tf.layers.dense({units: 10, activation: 'softmax'}));

const optimizer = 'rmsprop';
cnnModel.compile({
  optimizer: optimizer,
  loss: 'categoricalCrossentropy',
  metrics: ['accuracy'],
});

最初のモデルに比べると構造が複雑なのでトレーニングには時間がかかります。GPUが使える場合はGPUによる高速化の威力がよく実感できると思います。

const epochs = 20;
const batchSize = 128;
const modelSavePath = 'cnn_mnist'
await train(cnnModel, epochs, batchSize, modelSavePath);

Layer (type)                 Output shape              Param #   
=================================================================
conv2d_Conv2D5 (Conv2D)      [null,26,26,32]           320       
_________________________________________________________________
conv2d_Conv2D6 (Conv2D)      [null,24,24,32]           9248      
_________________________________________________________________
max_pooling2d_MaxPooling2D3  [null,12,12,32]           0         
_________________________________________________________________
conv2d_Conv2D7 (Conv2D)      [null,10,10,64]           18496     
_________________________________________________________________
conv2d_Conv2D8 (Conv2D)      [null,8,8,64]             36928     
_________________________________________________________________
max_pooling2d_MaxPooling2D4  [null,4,4,64]             0         
_________________________________________________________________
flatten_Flatten3 (Flatten)   [null,1024]               0         
_________________________________________________________________
dropout_Dropout4 (Dropout)   [null,1024]               0         
_________________________________________________________________
dense_Dense5 (Dense)         [null,512]                524800    
_________________________________________________________________
dropout_Dropout5 (Dropout)   [null,512]                0         
_________________________________________________________________
dense_Dense6 (Dense)         [null,10]                 5130      
=================================================================
Total params: 594922
Trainable params: 594922
Non-trainable params: 0
_________________________________________________________________
Epoch 1 / 20
  ...
Epoch 20 / 20

Evaluation result:
  Loss = 0.022; Accuracy = 0.994
Saved model to path: cnn_mnist

テストデータに対する精度が99.4%まで上昇しました。先の精度98%の単純なモデルでやったように、CNNでも認識に失敗している画像を表示してみましょう。
最初の単純なモデルの失敗例に比べると、人間でも認識に失敗しそうな、あるいはラベルが間違っていると言いたくなるような例が多くなっており、文字認識の精度が大きく向上していることが体感できると思います。

const predicted = /** @type {number[]} */(tf.argMax(/** @type {tf.Tensor} */ (cnnModel.predict(mnist.getTestData().images)), 1).arraySync());
const labels = /** @type {number[]} */(tf.argMax(mnist.getTestData().labels, 1).arraySync());

const numSamples = 32;
let count = 0;
for (let i = 0; i < predicted.length && labels.length; i++) {
    const pred = predicted[i];
    const label = labels[i];
    if (pred === label) {
        continue;
    }
    tslab.display.html(`<h3>予測: ${pred}, 正解: ${label}</h3>`)
    const pngs = await toPng(mnist.getTestData().images, i, 1);
    tslab.display.png(pngs[0]);
    count++;
    if (count >= numSamples) {
        break;
    }
}

以上でJavaScriptのみで複雑なディープラーニングモデルを構築・訓練から実際にアプリケーション上で推論を行うところまでエンドツーエンドで行うことができました。TensorFlow.jsを使っているので、完成したモデルをブラウザ上で実行することも最小限の追加コードで実現できます。詳しくはTensorFlow.jsのドキュメントや他の人による解説記事を参照してください。

最後に

JavaScript (TypeScript) でもTensorFlowとJupyterを使用してディープラーニングのトレーニングが行えることを示しました。TensorFlow.jsを使えばPythonを使用しなくてもJavaScriptだけで最新のディープラーニングをモデルのトレーニングから実際のプロダクションでの利用までエンドツーエンドで行うことが可能です。

もちろん現状では機械学習の分野でのPythonの地位は圧倒的なものであり、TensorFlowがJavaScriptをサポートしているとはいえ、APIやドキュメントの充実度には同じTensorFlowの中でも天地ほどの差があります。また周辺のデータ分析関係のライブラリの充実度やエコシステムの規模も考えると機械学習のプロジェクトにJavaScript（というよりPython以外の言語）をメインで採用する合理的な理由は現時点ではほとんど存在しないと思います。

一方でPythonは2010年代に大きく成長したもう一つの分野であるモバイルアプリ開発やWebの分野ではそれほど成功していない現状や、Webフロントエンド開発でのJavaScriptの地位は当分の間は揺らぎそうにないこと、TypeScriptとそのエコシステムが大きく成長しているおり大規模開発にも耐えうるようになってきていることなどを踏まえるとデータ分析分野でのPythonの不動の地位と、それによるPythonの人気の上昇も必ずしも向こう10年間安泰ではないかもしれません。いずれにしてもプログラミング言語のある分野での人気と人気を裏付ける利便性は鶏と卵の関係にあるので誰かが初期投資をする必要があります。2019年末現在、この分野におけるJavaScriptのライブラリ、フレームワークは非常に貧弱であり、Pythonにおけるnumpy, pandas, sklearnなどのようなデファクトスタンダードは存在しません。JavaScriptユーザのみなさん、ブルー・オーシャンであるJavaScriptの機械学習分野での成長に賭けてみるのも面白いかもしれませんよ。

本日もjavascriptについて書き込みこみます。
今日はHTMLを指定して画面上の表示を帰る方法です。

DOM

DOMとはDocument Object Model(ドキュメントオブジェクトモデル)の略です。
HTMLを解析し、データを作成する仕組みです。

ユーザーが画面をみる仕組みは

1,HTMLを解析、DOM(WEBページ)に変換
2,CSS,javascriptを読み込み装飾
3,ユーザーが画面をみる。

という工程です。
要はCSSのように装飾を担当するのがjavascriptの役目です。

HTMLは階層構造になっていることが特徴です。
DOMによって解析されたHTMLは、階層構造のあるデータとなります。
これを、DOMツリーやドキュメントツリーと呼びます。

DOMツリー

基本的に各タグがネスト(入れ子構造になっていて)
ツリーのようになっている感覚です。

body
|
--header--p
|
--main--p
|
--footer--p

簡単に書くとこのようになります。

ノード

HTML1つ1つのタグが、DOMツリーの中ではノードと呼ばれます。

例として
body,header,fooder,main,など

下記にHTMLの取得方法について紹介します。

document

documentは、開いているWebページのDOMツリーが入っているオブジェクトです。
documentに対していくつかのメソッドを利用することで
DOMツリーに含まれる要素を抽出して取得することができます。

大文字小文字
単数形、複数形に注意してください。

document.getElementById("id名");

.getElementById("id名")はDOMツリーから特定の要素を取得するためのメソッドの1つです。
引数に渡したidを持つ要素を取得します。

IDの場合

document.getElementById("id名");

document.getElementsByClassName("class名");

classを指定して取得する際はこちらを利用します。
ここで気をつけたいのは
getElementsと複数形になっていることです。

id名はhtml上に必ず一つしか存在しないのに対して
class名を指定するgetElementsByClassName("class名")の場合は
同じclassを持つ要素を全て取得することが可能です。

クラスの場合

document.getElementsByClassName("クラス名");

document.querySelector("セレクタ名");

セレクタ名とは、CSSでスタイルを適用するために指定している要素です。
セレクタ名を指定してDOMを取得する場合
querySelectorメソッドを使用します。

HTML上から、引数で指定したセレクタに合致するもののうち一番最初に見つかった要素1つを取得します。

セレクタの場合

document.querySelector("セレクタ名");

セレクタの例

p.menu{  /*p.menuがセレクタにあたります*/
color:red
}

querySelectorメソッドでは、複雑なセレクタも指定できます。

複雑な例

document.querySelector("button#Button2"); // idがButton2のbuttonタグ要素
document.querySelector("footer a.next"); // footerタグ要素の中の、クラスがnextのaタグ要素

イベント

JavaScriptにおけるイベントとは、HTMLの要素に対して行われた処理要求のことをいいます。
例えば

• 「ユーザーがブラウザ上のボタンをクリックした」
• 「テキストフィールドでキー入力をした」
• 「要素の上にマウスカーソルを乗せた」

などがいずれもイベントです。

また、イベントを起こすのはユーザーだけでなく

• 「ドキュメントの読み込みが終わった」

などブラウザが発生させるものもあります。

イベント駆動

JavaScriptはイベント駆動という概念に基づいて設計されています。
これは、「イベント」が発生したら、それをきっかけにコードが実行される仕組みです。

イベントを取得するためには、先に取得したノードに対して処理を書きます。

addEventListener

addEventListenerメソッドはノードオブジェクトのメソッドです。

この記述の読み込み以降で「ノードオブジェクト」に「イベント」が起きた時
「関数」を実行するようになります。

一つのイベントと一つの関数を紐付ける仕組みのことを

イベントリスナと呼びます。

一つのイベントに複数の関数を紐付ける場合は、関数の数だけイベントリスナが存在します。

addEventListenerメソッド

(ノードオブジェクト).addEventListener("イベント名", 関数);

上記よりコードを書いていくと下記のようになりますが。
これ単体だとnullというエラーがおきます。

基本使用方法の間違い

let btn = document.querySelector("button");
// ボタンをノードオブジェクトとして取得し、変数btnに代入する

function printHello() {
  console.log("Hello world");
}
// printHello関数を定義

btn.addEventListener("click", printHello);
// ボタンのノードオブジェクトであるbtnに対して、
// clickイベントとprintHello関数を紐付ける仕組みであるイベントリスナを追加する

ブラウザは上から順に実行をするので、このJavaScriptのコードを読み込む時
まだhtmlファイルのheadタグ内までしか読み込まれておらず

bodyタグ内にあるbuttonタグは読み込まれていなかったのです。

基本HTMLコード

<head>

<script ~ ></script>
<!--ここまでしか読み混まれないのでbuttonタグまで到達せずエラーが起きます。-->

</head>

<body>

<button ~ >< /button >
<!--ここまで読み込みたい-->

<body>

これを解決するため全て読み込んでから実行する
下記のような実行が必要です。

ページの読み込みをするwindow.onloadを使おう。

ページの読み込みは、以下2つの記述方法があります。

その1,onload

window.onload = function() { 処理 };

その2,addEventListener

window.addEventListener('load', function() { 処理 });

その2を踏まえてコードを書いていくと

基本使用方法の正解

function printHelloWithButton() {
  let btn = document.querySelector("button");

  function printHello() {
    console.log("Hello world");
  }
  // 関数内で定義された関数は、関数の中でしか呼び出せない性質があるだけで、
  // 通常の関数同様に呼び出せる

  btn.addEventListener("click", printHello);
}
// 一連の処理をまとめた関数を作る

window.addEventListener("load", printHelloWithButton);

コードの改善

今まで書いたことは三つの改善方法があるので書いて行きます。

先に結論だけ行って仕舞えば
addEventListenerの第二引数にfunctionを持ってくるポイントと
考えてください。

第二引数に置換

改善前

function func() {}
// 何もしないfunc関数

btn.addEventListener("click", func);

第二引数に内容をそのまま写して

改善後1

btn.addEventListener("click", function func() {});

関数名の省略

第二引数に置かれたため、関数名を省略することができます。

改善後2

btn.addEventListener("click", function() {});

コードを複数行書く

処理がある場合（殆どの場合）は一般に改行を用いて以下のように書きます。

改善後3

btn.addEventListener("click", function() {
  // 処理
});

上三つを踏まえた改善例

sample改善前

window.addEventListener("load", function() {
  let btn = document.querySelector("button"); //処理1 ノード取り出し変数宣言

  function printHello() {      //処理2 関数宣言
    console.log("Hello world");
  }

  btn.addEventListener("click", printHello); //処理3 イベントリスナ
});

sampleの改善後

window.addEventListener("load", function() {
  let btn = document.querySelector("button"); //処理1 ノード取り出し変数宣言

  btn.addEventListener("click", function() { //処理2 + 処理3
    console.log("Hello world");
  });
});

格HTMLの処理方法

innerHTML

innerHTMLを使用するとHTML要素の中身を書き換えることができます。

書換例

// テキストの要素を取得し、変数で定義
let btn = document.querySelector("#Button");
let changeText = document.querySelector("p");

// ボタン2をクリックしたらテキストが置換される
btn.addEventListener("click", function() {
  changeText.innerHTML = '変更されました';
});

classList.add

クラス追加するメソッドです。

クラス追加

// Button3を取得して、変数で定義
let btn3 = document.querySelector("#Button3");

// クラス追加を押したらredクラスが追加される
btn3.addEventListener("click", function() {
  changeText.classList.add("red");
  console.log(changeText.classList); // ここに追加
});

classList.remove

クラス削除するメソッドです。

クラス削除

// Button4を取得して、変数で定義
let btn4 = document.querySelector("#Button4");

// div要素を取得して、変数で定義
let obj = document.querySelector("div");

// クラス削除を押したらblueクラスが削除される
btn4.addEventListener("click", function() {
  obj.classList.remove("blue");
});

小まとめ

まとめ

window.addEventListener("load", function() {
  let btn = document.querySelector("button#Button");

  btn.addEventListener("click", function() {
    console.log("Hello world");
  });

  // テキストの要素を取得し、変数で定義
  let btn2 = document.querySelector("button#Button2");
  let changeText = document.querySelector("p");

  // ボタン2をクリックしたらテキストが置換される
  btn2.addEventListener("click", function() {
    changeText.innerHTML = '変更されました';
  });

  // Button3を取得して、変数で定義
  let btn3 = document.querySelector("#Button3");

  // クラス追加を押したらredクラスが追加される
  btn3.addEventListener("click", function() {
    changeText.classList.add("red");
  });

  // Button4を取得して、変数で定義
  let btn4 = document.querySelector("#Button4");
  // div要素を取得して、変数で定義
  let obj = document.querySelector("div");

  // クラス削除を押したらblueクラスが削除される
  btn4.addEventListener("click", function() {
    obj.classList.remove("blue");
  });
});

それはただ美しかった。

コンポーネントという呪縛がある一方で、開発者の自由さを守りながら宣言的UIによる美しい構成が可能となった。

数千行に渡るDOMイベント管理の苦行から開放された。

見上げればそこにはReactがあった。

まるでオリオン座のように。

だがしかしBUT

仮想DOMというバーチャルな世界を実現するために、「Hello World」を表示するには現実的にWebpackやRollup等のバンドルが必要になった。

これを私は「コンポーネントの呪縛」と勝手に思っている。（悪気はない。）

初学者だった頃のjQuery使いの私にはしばらく難しかった。

とりあえずこれのようなminimalなスターターを書いて、そっと公式ドキュメントを閉じた。

数年の月日を経て

複雑なステート管理にはReduxが有名に、事実上のデファクトとなった。

やがてHooksが誕生した。

Hooksの登場により再度公式ドキュメントを開き、そしてそれをそっと閉じた。

どうしてもReduxのような管理方法が必要になった

JSerとしての経験値が上がるにつれて、jQuery思想の自分にはやがて限界が訪れた。

コンポーネントである以上基本は親が子を教育するのである。

したがってグローバルなstoreへどのコンポーネントからもアクセスできる機構が必要になったのだ。

dispatchめ。（悪気はない。）

おや...

結局グローバルstoreは親から子へ移譲しているだけではないか。

親から子へデータを渡している？

それは究極の発想ではview template engineに近しいのではなかろうか。

JSならejsやhandlebars、PHPあたりではbladeとかそういった、あの{{ data }}ではなかろうか。

あの古き良き、サーバーから受け取ったデータをビューへ渡す方法ではなかろうか。

Reactを view template engine にできないだろうか

調べたらあった。

https://github.com/reactjs/express-react-views

サーバーからデータを渡す：

// views/index.jsxをレンダリング
res.render('index', { message: 'Hello World' });

するとviews/index.jsxのpropsにデータが伝搬される：

var React = require('react');

function IndexPage(props) {
  return <div>{props.message}</div>;
}

module.exports = IndexPage;

素晴らしいではないか。

と思ったら

It renders static markup and does not support mounting those views on the client.

静的マークアップをレンダリングするだけでReactはマウントされないだと。。。

Reactにする意味はあるのか？（ビューの数千行が数百行くらいにはなるかもしれないが。。。）

JSのイベントはどうする？

CSS-in-JSはどうなる？

どうしてもReactをマウントしたかった

https://github.com/saltyshiomix/react-ssr

$ npm install --save @react-ssr/express

package.json

{
  "scripts": {
    "start": "node server.js"
  }
}

server.js

const express = require('express');
const register = require('@react-ssr/express/register');

const app = express();

(async () => {
  // Reactビューエンジンとして`.jsx`を登録
  await register(app);

  app.get('/', (req, res) => {
    const message = 'Hello World!';
    res.render('index', { message });
  });

  app.listen(3000, () => {
    console.log('> Ready on http://localhost:3000');
  });
})();

views/index.jsx

export default function Index({ message }) {
  return <p>{message}</p>;
}

そう、Reactをそのまま利用できるビューエンジンにしたかった

views/index.jsx

import React from 'react';

const IndexPage = (props) => {
  const [message, setMessage] = React.useState('waiting...');

  const onClick = () => setMessage('This is a react-ssr!');

  return (
    <React.Fragment>
      <button onClick={onClick}>Click Me</button>
      <p>Message from state: {message}</p>
    </React.Fragment>
  );
};

export default IndexPage;

↓↓↓

想像してみてほしい

server.js

const posts = [
  { id: 1, body: 'This is a first post.' },
  { id: 2, body: 'This is a second post.' },
  { id: 3, body: 'This is a last post.' },
];

app.get('/', (req, res) => {
  res.render('index', { posts });
});

app.get('/posts/:postId', (req, res) => {
  const { postId } = req.params;
  const post = findById(postId);
  res.render('post', { post });
});

この古き良きデータ流しを、

views/index.jsx

import React from 'react';

const IndexPage = ({ posts }) => {
  return (
    <React.Fragment>
      {posts.map((post, index) => {
        return (
          <p key={index}>
            <a href={'/posts/' + post.id}>{post.body}</a>
          </p>
        );
      })}
    </React.Fragment>
  );
};

export default IndexPage;

↓↓↓

http://localhost:3000

views/post.jsx

import React from 'react';

const PostPage = ({ post }) => {
  return (
    <React.Fragment>
      <p>{post.body}</p>
    </React.Fragment>
  );
};

export default PostPage;

↓↓↓

http://localhost:3000/posts/1

Reactで扱える喜びを...！！！

NEXT.jsとの比較

データの非同期取得

クライアント側のデータ非同期取得は、どちらもReact.useEffect()で非同期関数を処理する必要がある。

NEXT.jsの場合

pages/index.jsx

import React, { useState, useEffect } from 'react';

const HomePage = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    // componentDidMount like
    fn() {
      const res = await fetch('http://localhost:4000/api/posts');
      const posts = await res.json();
      setPosts(posts);
    }
    fn();

    return () => {
      // componentWillUnmount like
    };
  }, []);

  return (
    <React.Fragment>
      {posts.map((post, index) => {
        return (
          <p key={index}>
            <a href={'/posts/' + post.id}>{post.body}</a>
          </p>
        );
      })}
    </React.Fragment>
  );
};

export default HomePage;

しかしこれではSSRされないのでSEO対策にならない。

仕方なく以下のようなNEXT.js wayに従って書き直す。

pages/index.jsx

import React from 'react';

const HomePage = ({ posts }) => {
  return (
    <React.Fragment>
      {posts.map((post, index) => {
        return (
          <p key={index}>
            <a href={'/posts/' + post.id}>{post.body}</a>
          </p>
        );
      })}
    </React.Fragment>
  );
};

HomePage.getInitialProps = async () => {
  const res = await fetch('http://localhost:4000/api/posts');
  const posts = await res.json();
  return { posts };
};

export default HomePage;

だいぶすっきりしたものの、非同期データをSSRさせたい場合、このgetInitialPropsという魔法の呪文を唱える必要がある。

react-ssrの場合

すでに紹介したように、view template engineとして機能するため、APIサーバーから取得したデータをそのままビューへ渡せば良い。

そもそも同一サーバーならAPIサーバーを建てる必要もなく、直接DBから取得したデータをビューへ渡せばpropsから取得データへアクセスできる。

server.js

(async () => {
  const posts = await fetchFromDbOrAPIServer();

  app.get('/posts', (req, res) => {
    res.render('posts', { posts });
  });
})();

views/index.jsx

import React from 'react';

const HomePage = ({ posts }) => {
  return (
    <React.Fragment>
      {posts.map((post, index) => {
        return (
          <p key={index}>
            <a href={'/posts/' + post.id}>{post.body}</a>
          </p>
        );
      })}
    </React.Fragment>
  );
};

export default HomePage;

ユーザー認証

NEXT.jsの場合

iaincollins/next-authというライブラリがあるが、これもクライアント側ではgetInitialPropsを利用する。

しかしサーバー側の使い方が、NEXT.js wayなサーバーの書き方をする必要があったり、そもそもドキュメントが充分とは思えないのであまり使う気にはなれなかった。

server.js

const next = require('next')
const nextAuth = require('next-auth')
const nextAuthConfig = require('./next-auth.config')

require('dotenv').load()

const nextApp = next({
  dir: '.',
  dev: (process.env.NODE_ENV === 'development')
})

nextApp.prepare()
.then(async () => {
  const nextAuthOptions = await nextAuthConfig()
  const nextAuthApp = await nextAuth(nextApp, nextAuthOptions)  
  console.log(`Ready on http://localhost:${process.env.PORT || 3000}`)
})
.catch(err => {
  console.log('An error occurred, unable to start the server')
  console.log(err)
})

↑を読んでこれから何が起こるのかわかるエスパーはいるのだろうか。

react-ssrの場合

react-ssrはExpressのview template engineとして振る舞うので、古き良きExpress wayなユーザー認証を利用できる。

例えばメールアドレス・パスワードによる認証であればpassportとpassport-localを利用する。

ソースコードは長くなるため割愛するが、その分サーバー側で柔軟な調整ができる。

• ユーザーデータのシリアライズ・デシリアライズ方法の調整
• sessionの保存方法の調整（たとえばDBにsession情報を保存する等）
• リダイレクトURLの柔軟な調整（条件分岐等）

サーバー側のバグはクリティカルであることが多い。
「なんでも屋」すぎるライブラリには頼らず、小さくて優秀なライブラリを複数利用しつつ細かい調整は自前で実装するのがベストプラクティスだと筆者は考える。

react-ssrの実装サンプル

examples/with-jsx-emotion

examples/with-jsx-material-ui

examples/with-jsx-semantic-ui

examples/styled-components

さいごに

最終的にreact-ssrの宣伝っぽくなってしまってすみません。

ですが古き良きビューエンジンの形でReactを利用したいと思ったことはありませんか？

小規模開発でもわざわざAPIサーバーとクライアントを分けなければならない煩雑さを感じたことはありませんか？

そういった疑問を感じたことがある方にとって、少しでも可能性が広がる記事になれば幸いです。

筆者の稚拙な技術記事であるため、間違い等はコメントにてご指摘ください。

ここまで読んでくださりありがとうございました。

ちなみに私はベテルギウスが好きです。（一番高いところにあるから。）