【1から始めるReact】ストップウォッチを作る

なべっち

2019.01.25

こんにちは。なべっちです。

前回はcreate-react-appを使ったReactの環境構築を行いました。
今回はReactでストップウォッチを作っていきます。

環境構築の記事はこちら: 【1から始めるReact】概要と環境構築

1 プロジェクトの準備
2 実際に作成する
3 完成

プロジェクトの準備

新規プロジェクトの作成

まずは、create-react-appでreact-stopwatchプロジェクトを作成します。

create-react-app react-stopwatch

1	create-react-app react-stopwatch

styled-componentsの導入

Reactでのスタイリング方法は色々ありますが、今回はstyled-componentsを導入します。
styled-componentsはCSS in JSのライブラリでJSでスタイルを記述します。

yarn add styled-components

1	yarn add styled-components

アプリケーションの起動

準備が出来たらアプリケーションを起動します。

yarn start

1	yarn start

実際に作成する

今回はTimer・Button・Appの3つのコンポーネントを組み合わせて作っていきます。

Timerコンポーネント

src/Timer.jsを新規作成します。

import React, { Component } from 'react';
import styled from 'styled-components';
class Timer extends Component {
  constructor() {
    super();
    this.state = {
      hours: '00',
      minutes: '00',
      seconds: '00',
      time: 0
    };
  }
  start() {
    this.timer = setInterval(() => this.update(), 1000);
  }
  stop() {
    clearInterval(this.timer);
  }
  reset() {
    this.setState({
      hours: '00',
      minutes: '00',
      seconds: '00',
      time: 0
    });
  }
  update() {
    const time = this.state.time + 1;
    const hours = parseInt(time / 60 / 60, 10);
    const minutes = parseInt(time / 60 % 60, 10);
    const seconds = parseInt(time % 60, 10);
    this.setState({
      hours: this.toText(hours),
      minutes: this.toText(minutes),
      seconds: this.toText(seconds),
      time: time
    });
  }
  toText (time) {
    return ('00' + time).slice(-2);
  }
  render() {
    return(
      <div>
        <TimerText>{this.state.hours}</TimerText>
        <TimerText>:</TimerText>
        <TimerText>{this.state.minutes}</TimerText>
        <TimerText>:</TimerText>
        <TimerText>{this.state.seconds}</TimerText>
      </div>
    );
  }
}
export default Timer;
const TimerText = styled.span`
  font-size: 200px;
  color: #333;
`

import React, { Component } from 'react';

import styled from 'styled-components';

class Timer extends Component {

constructor() {

super();

this.state = {

hours: '00',

minutes: '00',

seconds: '00',

time: 0

};

}

start() {

this.timer = setInterval(() => this.update(), 1000);

}

stop() {

clearInterval(this.timer);

}

reset() {

this.setState({

hours: '00',

minutes: '00',

seconds: '00',

time: 0

});

}

update() {

const time = this.state.time + 1;

const hours = parseInt(time / 60 / 60, 10);

const minutes = parseInt(time / 60 % 60, 10);

const seconds = parseInt(time % 60, 10);

this.setState({

hours: this.toText(hours),

minutes: this.toText(minutes),

seconds: this.toText(seconds),

time: time

});

}

toText (time) {

return ('00' + time).slice(-2);

}

render() {

return(

<div>

<TimerText>{this.state.hours}</TimerText>

<TimerText>{this.state.minutes}</TimerText>

<TimerText>{this.state.seconds}</TimerText>

</div>

);

}

export default Timer;

const TimerText = styled.span`

font-size: 200px;

color: #333;

Reactコンポーネントの定義方法には、大きく分けてFunctional ComponentとClass Componentがありますが、Functional Componentでは、stateやrefを使用できません。
stateは、コンポーネントの状態を管理するもので、this.stateで初期値をセットして、this.setStateで更新します。

Buttonコンポーネント

src/Button.jsを新規作成します。

import React from 'react';
import styled from 'styled-components';
const Button = (props) => {
  return(
    <Root bgColor={props.bgColor} onClick={() => props.handleClick()}>
      {props.text}
    </Root>
  );
};
export default Button;
const Root = styled.button`
  background-color: ${props => props.bgColor};
  width: 100px;
  height: 50px;
  font-size: 20px;
  color: #fff;
  &:hover {
    cursor: pointer;
  }
`

import React from 'react';

import styled from 'styled-components';

const Button = (props) => {

return(

<Root bgColor={props.bgColor} onClick={() => props.handleClick()}>

{props.text}

</Root>

);

};

export default Button;

const Root = styled.button`

background-color: ${props => props.bgColor};

width: 100px;

height: 50px;

font-size: 20px;

color: #fff;

&:hover {

cursor: pointer;

}

propsは親から渡される情報です。
Buttonコンポーネントでは、propsによって背景色を変更しています。

Appコンポーネント

src/App.jsを書き換えます。

import React, { Component } from 'react';
import Timer from './Timer';
import Button from './Button';
import styled from 'styled-components';
class App extends Component {
  render() {
    return (
      <Root>
        <Title>React Stopwatch</Title>
        <Timer ref='timer' />
        <Unit>
          <Button text='start' bgColor='#4169e1' handleClick={() => this.refs.timer.start()} />
          <Button text='stop' bgColor='#dc143c' handleClick={() => this.refs.timer.stop()} />
          <Button text='reset' bgColor='#808080' handleClick={() => this.refs.timer.reset()} />
        </Unit>
      </Root>
    );
  }
}
export default App;
const Root = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
`
const Title = styled.h1`
  color: #333;
`
const Unit = styled.div`
  display: flex;
  justify-content: space-between;
  width: 500px;
`

import React, { Component } from 'react';

import Timer from './Timer';

import Button from './Button';

import styled from 'styled-components';

class App extends Component {

render() {

return (

<Root>

<Title>React Stopwatch</Title>

<Unit>

<Button text='start' bgColor='#4169e1' handleClick={() => this.refs.timer.start()} />

<Button text='stop' bgColor='#dc143c' handleClick={() => this.refs.timer.stop()} />

<Button text='reset' bgColor='#808080' handleClick={() => this.refs.timer.reset()} />

</Unit>

</Root>

);

}

export default App;

const Root = styled.div`

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

width: 100%;

height: 100vh;

const Title = styled.h1`

color: #333;

const Unit = styled.div`

display: flex;

justify-content: space-between;

width: 500px;

Appコンポーネントでは、TimerエレメントとButtonエレメントをimportして、組み合わせます。
Buttonコンポーネントには表示テキストや背景色などをpropsとして渡します。

refはコンポーネントを識別する属性であり、this.refsでそれぞれにアクセスが出来ます。

完成

完成です！お疲れ様でした！

おすすめ記事

POPULAR

なべっち

Frontend Engineer

記事一覧

【1から始めるReact】概要の紹介と環境構築をやってみよう！

クラスタリングのk-meansで画像の分類に挑戦

なべっち

Frontend Engineer

主にフロントエンドの開発に携わっています。Webに関することたくさん勉強します。よろしくお願いします。

記事一覧

【1から始めるReact】ストップウォッチを作る

プロジェクトの準備

新規プロジェクトの作成

styled-componentsの導入

アプリケーションの起動

実際に作成する

Timerコンポーネント

Buttonコンポーネント

Appコンポーネント

完成

PCのディスプレイを大型にするメリットとデメリット

PHPで日付をフォーマットするならCarbonを使おう

PHPのセッションが勝手に消えてしまう問題と解決法

【1から始めるReact】概要の紹介と環境構築をやってみよう！

【1から始めるReact】ストップウォッチを作る

プロジェクトの準備

新規プロジェクトの作成

styled-componentsの導入

アプリケーションの起動

実際に作成する

Timerコンポーネント

Buttonコンポーネント

Appコンポーネント

完成

Google Mapsが新プランになったから、Leafletを試してみた

PCのディスプレイを大型にするメリットとデメリット

PHPで日付をフォーマットするならCarbonを使おう

PHPのセッションが勝手に消えてしまう問題と解決法

PHPでPDFを作成する定番ライブラリ【TCPDF】を使ってみた

PCのディスプレイを大型にするメリットとデメリット

PHPで日付をフォーマットするならCarbonを使おう

PHPのセッションが勝手に消えてしまう問題と解決法

【1から始めるReact】概要の紹介と環境構築をやってみよう！

【WordPress】使うだけでオシャレになる！レスポンシブ対応のおすすめテーマ8選【無料＆有料】

CMS徹底比較！ [WordPress] VS [Movable Type] どっちを選ぶ？