2019年12月8日

プログラミング

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

目次

  1. はじめに
  2. 要件定義をする
  3. Material-UIとは
  4. フォームを作ってみる
  5. まとめ

はじめに

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

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

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

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

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

要件定義をする

困ったことに着目する

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

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

Reactでスマートスピーカーのコマンド発音サービスを作ろう(1)【作りながら覚える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>

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


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

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

まとめ

今回はサービスを作るための要件を決め、Create React Appでアプリを作り、Material-UIのインストールとかんたんな使い方を解説しました。
次回以降、このUIに動きをつけたり、またReactの新機能であるReact Hooksを解説していきます。

0

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP