React Hooksを使う【Reactで作るマラソンペースメーカー】

React Reactで作るマラソンペースメーカー

はじめに

新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay15です！

昨日は『Adobeのデザインシステム、spectrumから学べるデザインの基礎
』についての記事でした。

Adobeのデザインシステム、spectrumから学べるデザインの基礎

このシリーズでは、Reactを使用し
前回、マラソンペース計算システムをCreate React Appでプロジェクトを作成し、Material-UIの使ってUIを作ってみました。
今回は、シリーズの続きとしてReact 16.8から導入されたReactのhookという機能について解説していきます。

フォームを使ってみる

まず、Material-UIのサンプルをコードを見てみましょう。

前回の記事で使用した、こちらの選択フォームのコードを見ていきます。
2019-12-15 16.19.13.png (270.7 kB)

POINT!!

各サンプルの「<>」を押すと、サンプルコードが見れます。またその際に左側のJSマークではTSマークを使用することで、TypeScriptのコードも見ることができます！便利ですね！

色々とコードがありますが、シンプルに選択フォームだけを表示させるコードをApp.jsに書いていきます。

App.js


import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
}));

export default function SimpleSelect() {
  const classes = useStyles();
  const [age, setAge] = React.useState('');

  const handleChange = event => {
    setAge(event.target.value);
  };

  return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          onChange={handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

それでは解説していきます。

これらのインポート設定は前回も解説しましたね。使用するコンポーネントを、最初にインポートしています。


import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
}));

さて、次はmakeStyles()という関数が出てきました。
こちらは名前の通りスタイルを作るための関数で、スタイルシートをMaterial-UIで使用する為のものです。

こちらのドキュメントの通り、使い方としては、このようにスタイルを作る関数、もしくはスタイルオブジェクトを引数とし、戻り値としてhook関数を返します。
makeStyles(styles, [options]) => hook

さて、ここで聞き覚えの内hookというものが出てきました。
hookについては後ほど説明をしますが、現時点ではuseStylesというhook関数に、引数にtheme（テーマ）を指定し、formControlクラスを定義しています。
中でマージンや最小横幅を指定しています。

では、メインとなる関数コンポーネントであるSimpleSelect()を見ていきましょう。


export default function SimpleSelect() {
  const classes = useStyles();
  const [age, setAge] = React.useState('');

  const handleChange = event => {
    setAge(event.target.value);
  };

  return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          onChange={handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );

ここで、hookを知らないReact経験者の方は「あれ？」と思われるかもしれません。
クラスコンポーネントでなく関数コンポーネントですし、にも関わらず状態（state）を保持できているように見えます。
これがReactの16.8以降のバージョンで採用された、hookと呼ばれる機能です。
※今回解説するuseState以外にも複数ある為、React Hooksと総称します。

React Hooksとは

React Hooks は、state などの React の機能を、 クラスを書かずに使えるようになる機能（API） です。

今回解説する useState以外にも useContext や useEffect、useReducerなどがあります。

今回のコードで解説していく前に、16.8より前の書き方（Material-UIのバージョン3系）はこちらです。


import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

const styles = theme => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120,
  },
  selectEmpty: {
    marginTop: theme.spacing.unit * 2,
  },
});

class SimpleSelect extends React.Component {
  state = {
    age: '',
    labelWidth: 0,
  };

  componentDidMount() {
    this.setState({
      labelWidth: ReactDOM.findDOMNode(this.InputLabelRef).offsetWidth,
    });
  }

  handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  render() {
    const { classes } = this.props;

    return (
      <form className={classes.root} autoComplete="off">
        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="age-simple">Age</InputLabel>
          <Select
            value={this.state.age}
            onChange={this.handleChange}
            inputProps={{
              name: 'age',
              id: 'age-simple',
            }}
          >
            <MenuItem value="">
              <em>None</em>
            </MenuItem>
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
        </FormControl>
      </form>
    );
  }
}

SimpleSelect.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(SimpleSelect);

注目すべき点は、当然クラスコンポーネントで定義されていること、またstateの初期値を設定していること、componentDidMount といったライフサイクルを使用している点です。

端的に言ってしまうと、hook（今回使用するuseState）はこれらのクラスコンポーネントで持っていた機能を関数コンポーネントでも利用できるようにしたことで、よりコードの見通しを良くすることができるものです。

useStateを使う

useStateは名前の通り、関数コンポーネント上でstateを扱う為のAPIです。
従来は関数コンポーネントではstate的に状態を保持することはできませんでしたが、useStateを使うことでそのような動的な関数を扱うことができます。

そちらの部分を抜粋して解説します。


  const [age, setAge] = React.useState('');

  const handleChange = event => {
    setAge(event.target.value);
  };

  return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          onChange={handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

const [age, setAge] = React.useState(''); でuseStateを使用しています。
1つ目のageにstateの初期値を設定しています。今回は特に値を設定していませんが、例えばconst [age, setAge] = React.useState(10);とすることで、ageには10がstateの初期値として入ります。
2つ目のsetAgeはstateを更新する為の関数です。

つまり、ageにstateの初期値を設定し、その更新にはsetAgeを使用するというものです。

次に、こちらで先程のsetAgeでeventのvalueでstateを更新していきます。


  const handleChange = event => {
    setAge(event.target.value);
  };

さて、それでは肝心のフォーム部分を見ていきます。


 return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          onChange={handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );

そこまで難しい点はなさそうですね！
Selectコンポーネントで、onChangeイベントで先程のhandleChangeを呼び出しています。その際のvalueはageです。
const [age, setAge] = React.useState(''); こちらで初期値は設定しませんでしたが、例えばReact.useState(10);とすることで、ここのvalueには10が設定されます。

MenuItemもMaterial-UIのコンポーネントで、Selectコンポーネントでの選択肢となります。
セレクトボックスで値を選択することで、onChangeが走り、setAgeでstateを更新し、Selectが更新される、という流れです。