2019年12月8日

プログラミング

Material-UI でインタフェースを作る【Reactで作るマラソンペースメーカー】

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

はじめに

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

昨日は『【Figma】待望のAuto Layoutが登場！』についての記事でした。

【Figma】待望のAuto Layoutが登場！

このシリーズではReactでマラソンのペースを教えてくれるサービスを開発していきます。
実際に作っているコードもオープンソースで公開していきます。

本記事では、まずサービスを作る際のかんたんな要件定義から始め、create-react-appからプロジェクトを作成し、Material-UIというライブラリで外見を作っていきます。

要件定義をする

困ったことに着目する

まずはじめに、どんなサービスを作っていくかを考えます。

こちらの記事でも書きましたが、サービス開発の基本は 「何か困っていることに注目する」 ことです。

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

今回は、私の趣味であるマラソンにおいて 「目標タイムを達成する為に何キロまでどれくらいのペースで走って、その後はどのくらいのペースで走れば良いか知りたい」 という困ってることがあります。

既存のアプリやサービスは、マラソンにおいて常に一定のペースで走る前提でタイムを出してくれるのですが、実際はそんな一定ペースで走れることはありません。
途中からスパートをかけるとき、どれくらいのペースで走ればよいのか、教えてくれるサービスがほしいと考え、このサービスを開発することにしました。

また、毎回計算していくのも面倒なので、過去に計算したものも保存できたら良いのに、とも感じています。

かんたんな要件定義をする

以下のように、「最低限必要な機能」「できればほしい機能」「あったらいいかもという機能」に分けてみます

最低限必要な機能

任意のレースでどれくらいのペースで走れば良いのかわかる
レース全体としてはもちろん、途中からペースを変えたときでも目標までのペースがわかる

できればほしい機能

過去に設定したペースをたどることができる

あったらいいかもという機能

オフラインでも計算をすることができる

POINT!!

どうしてもサービスを作るとき、機能がてんこ盛りになりがちです。
本当に最低限必要な機能は何なのか、何を一番解決したいのか、を考えてまず作るとシンプルに作れますし、スピードも早くなります。

Material-UIとは

では、最低限必要な機能として、レースでどれくらいのペースで走ればよいのかわかる、機能を作っていきます。

デザインについて、今回はマテリアルデザインを採用していきます。
マテリアルデザインについては、こちらのbageleeの記事をご覧ください。

マテリアルデザインを読んで学んだ、実践で使えるデザインテクニック第一弾

マテリアルデザインとは、Google社が2014年に考案したデザインに対する考え方とガイドラインです。
具体的にはコンポーネントやレイヤーなどUIで表現することができるものの特徴を定めたドキュメントになります。
マテリアルデザインの環境やレイアウト、インタラクション、カラー、形などを定義しているものです。

Material-UIはReactで簡単にコンポーネントベースでマテリアルデザインを実現できるライブラリです。
2019-12-07 23.07.16.png (139.5 kB)

Create React App で作る

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

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

次にプロジェクトを作ります。
npx create-react-app marathon-pace-maker

そしてMaterial-UIをインストールします。
npm install @material-ui/core

yarnを使う場合はこちらです。
yarn add @material-ui/core

これだけでReactにMaterial-UIがインストールできました！

フォームを作ってみる

それでは、Material-UIを使用し、入力フォームを作っていきましょう。
リファレンスから、使いたいパーツのソースコードを見ていきましょう。
2019-12-07 23.27.56.png (286.5 kB)

こちらの選択フォームを今回は使っていきましょう。
2019-12-07 23.31.02.png (8.0 kB)
選択肢はこのように表示されます。
2019-12-07 23.31.09.png (16.5 kB)

では、このフォームはどのようなコードかというと、これくらいシンプルなものです。

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

FormControl、InputLabel、Select、MenuItem といったコンポーネントが使われています。
当然、これを使うためにはコンポーネントをインポートする必要があります。
それがこちらです。


import React from 'react';
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';

これくらいシンプルに、コンポーネントをインポートしていくだけで、マテリアルデザインのフォームが出来上がっていきます。
とても便利ですね！
コンポーネントベースですし、スコープを汚すこともありません。