LoginSignup
24
33

More than 5 years have passed since last update.

HameeAdvent Calendar 2016Day 8
@t-yng

React + Reduxでカウントアップタイマーを作ってみる

Posted at

はじめに

この記事はHamee Advent Calendar 2016の8日目の記事です。

最近、Reactが熱いですね！
今回は、前から気になっていたReactと相性が良いと言われるfluxフレームワークのReduxを使って、カウントアップタイマーを作ってみようと思います。

t-yng/countup-timer

デモ

20161207231006.png

開発環境の構築

ビルドツールとしてwebpackを使っていきます。
またES6とReactのJSXは、webpackのbabel-loaderでコンパイルします。

$ npm i --save-dev webpack babel-core babel-loader babel-preset-es2015 babel-preset-react

webpackの設定をwebpack.config.jsに記述していきます。

webpack.config.js
module.exports = {
  entry: './js/main.js',
  output: {
    path: 'dist',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
}

続いて、react, reduxのインストールです。

$ npm i --save react react-dom redux react-redux

インストールしたライブラリの概要は以下の通りです。

react, react-dom: Reactのライブラリ
redux: Fluxフレームワーク
react-redux: ReactとReduxを連携させるためのライブラリ

packge.jsonのタスクコマンドにwebpackのbuildとwatchを追加します。

package.json
  (省略),
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch"
  },
  (省略)

ディレクトリ構成

.
├── README.md
├── css
│   └── style.css
├── dist
│   └── bundle.js
├── index.html
├── js
│   ├── action.js
│   ├── components
│   │   ├── App.js
│   │   ├── Timer.js
│   │   └── timer-button.js
│   ├── container.js
│   ├── main.js
│   ├── reducer.js
│   └── timer-model.js
├── node_modules
├── package.json
└── webpack.config.js

画面モックを作る

最初にHTMLとcssだけで画面のモックを作っていきます。

style.css
body {
  margin: 0;
  background-color: black;
}

.center-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.inline-block {
  display: inline-block;
}

.text-center {
  text-align: center;
}

.timer-number,
.timer-semicolon {
  color: white;
  font-size: 15vw;
}

.timer-button-container {
  width: 50vw;
  display: flex;
  justify-content: space-around;
}

.timer-button {
  font-size: 50px;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="center-container" style="margin-top: 100px;">
    <div>
      <span class="timer-number" role="hour">00</span>
      <span class="timer-semicolon">:</span>
      <span class="timer-number" role="minute">00</span>
      <span class="timer-semicolon">:</span>
      <span class="timer-number" role="second">00</span>
    </div>
    <div class="timer-button-container">
      <button class="timer-button" type="button" name="button" >START</button>
      <button class="timer-button" type="button" name="button" >STOP</button>
      <button class="timer-button" type="button" name="button" >RESET</button>
    </div>
  </div>
</body>
</html>

Reactだけを使って実装

画面が完成したので、実装に入っていきます。
いきなりReact+Reduxでは難しいので、最初はReactだけで実装を行いそれをベースにReduxを導入していきたいと思います。

Reactを使う際に重要になってくるのがコンポーネントをどのように分割するかだと思います。
今回は時間表示、タイマーボタンを部品コンポーネントとして切り出し、全体部分をアプリケーションコンポーネントとします。

20161207231207.png

main.js
import {render} from 'react-dom'
import {App} from './components/App.js'

render(
  <App />,
  document.getElementById('timer-container')
)
components/app.js
import React from 'react'
import {Timer} from './timer.js'
import {TimerButton} from './timer-button.js'

export class App extends React.Component {

  render () {
    return (
      <div className='center-container' style={{marginTop: '100px'}} >
        <Timer hours={'00'} minutes={'00'} seconds={'00'} ref='timer' />
        <div className='timer-button-container'>
          <TimerButton text={'START'} handleClick={() => this.refs.timer.start()} />
          <TimerButton text={'STOP'} handleClick={() => this.refs.timer.stop()} />
          <TimerButton text={'RESET'} handleClick={() => this.refs.timer.reset()} />
        </div>
      </div>
    )
  }
}
components/timer.js
import React from 'react'

export class Timer extends React.Component {
  constructor () {
    super()
    this.state = {hours: '00', minutes: '00', seconds: '00', time: 0}
  }

  start () {
    this.intervalTimer = setInterval(() => this.update(), 1000)
  }

  stop () {
    clearInterval(this.intervalTimer)
  }

  reset () {
    this.setState({
      hours: '00',
      minutes: '00',
      seconds: '00',
      time: 0
    })
  }

  update () {
    const time = this.state.time + 1
    const hours = this.toHours(time)
    const minutes = this.toMinutes(time)
    const seconds = this.toSeconds(time)

    this.setState({
      hours: this.toText(hours),
      minutes: this.toText(minutes),
      seconds: this.toText(seconds),
      time: time
    })
  }

  toHours (time) {
    return parseInt(time / 60 / 60)
  }

  toMinutes (time) {
    return parseInt(time / 60 % 60)
  }

  toSeconds (time) {
    return time % 60
  }

  toText (time) {
    return ('00' + time).slice(-2)
  }

  render () {
    return (
      <div>
        <span className='timer-number' role='hour'>{this.state.hours}</span>
        <span className='timer-semicolon'>:</span>
        <span className='timer-number' role='minute'>{this.state.minutes}</span>
        <span className='timer-semicolon'>:</span>
        <span className='timer-number' role='second'>{this.state.seconds}</span>
      </div>
    )
  }
}
components/timer-button.js

import React from 'react'

export class TimerButton extends React.Component {
  render () {
    return (
      <button className='timer-button' type='button' name='button' onClick={() => this.props.handleClick()}>{this.props.text}</button>
    )
  }
}

Reactだけで実装した場合、Timerコンポーネントに状態管理の処理が記述されているため、少し複雑になってしまいました。
理想としては、コンポーネントはViewの記述のみにしたいです。

Redux + React で実装

それでは、今回の目的であるReduxの導入をしていきたいと思います。

Reduxの概念に関しては、次の記事が大変参考になりました。
Redux入門【ダイジェスト版】10分で理解するReduxの基礎

Reduxで登場する要素について簡単に説明します。

  • state
    • アプリケーションの状態
    • Reduxでは一つのアプリケーションに対して一つのstateオブジェクトを持つ
  • sotre
    • アプリケーション全体の状態を管理
  • reducer
    • 状態遷移を処理する役割を持つ
    • 状態とアクションを受け取り、新たな状態を返す
  • dispatcher
    • reducerに対して、ユーザーアクションを通知
  • action
    • ボタンクリック等のアクションを表す
    • typeプロパティとアクションに応じたデータを持つオブジェクト
  • actionCreator
    • Actionを生成するための関数
  • container
    • Reduxと連携するトップレイヤーのコンポーネント

reducerの実装

reducerではactionに応じた、タイマーの状態遷移の処理を記述しています。

reducer.js
import * as timerModel from './timer-model.js'

/**
 * Reduxのreducer タイマーの時間の状態遷移を処理する
 * @param state Reduxのstoreで管理されている状態
 * @param action アクションオブジェクト
 * @return actionに応じて変化させた新しい状態
 */
export function timer (state = timerModel.initialState(), action) {
  console.log(state)
  switch (action.type) {
    case 'START_TIMER':
      return timerModel.start(state, action.intervalID)
    case 'STOP_TIMER':
      return timerModel.stop(state)
    case 'UPDATE_TIMER':
      return timerModel.update(state)
    case 'RESET_TIMER':
      return timerModel.reset(state)
    default:
      return state
  }
}

ここで登場している、timer-model.jsはTimerコンポーネントから、タイマーの状態遷移ロジックを抽出した関数群になります。

Reduxでは状態遷移の関数は参照透過である必要があります。
そのため、Object.assign()では新しい空オブジェクトに対して、既存の値をコピーすることで、新たな状態を生成しています。

timer-model.js
/**
 * タイマーの状態を開始状態に変更する
 * @param state タイマーの状態
 * @param {number} intervalID setInterval()で得られたID
 * @return タイマーの開始状態
 */
export function start (state, intervalID) {
  return Object.assign({}, state, {
    started: true,
    intervalID: intervalID
  })
}

/**
 * タイマーの状態を停止状態に変更する
 * @param state タイマーの状態
 * @return タイマーの停止状態
 */
export function stop (state) {
  clearInterval(state.intervalID)

  return Object.assign({}, state, {
    started: false,
    intervalID: -1
  })
}

/**
 * タイマーの時間を1秒進める
 * @param state タイマーの時間の状態
 * @return 時間を1秒進めた新しい状態
 */
export function update (state) {
  const time = state.time + 1
  const hours = toHours(time)
  const minutes = toMinutes(time)
  const seconds = toSeconds(time)

  return Object.assign({}, state, {
    hours: toText(hours),
    minutes: toText(minutes),
    seconds: toText(seconds),
    time: time
  })
}

/**
 * タイマーの時間をリセットする
 * @return タイマーの初期状態
 */
export function reset (state) {
  return Object.assign({}, initialState(), {
    started: state.started,
    intervalID: state.intervalID
  })
}

/**
 * タイマーの初期状態
 */
export function initialState () {
  return {
    hours: '00',
    minutes: '00',
    seconds: '00',
    time: 0,
    started: false,
    intervalID: -1
  }
}

function toHours (time) {
  return parseInt(time / 60 / 60)
}

function toMinutes (time) {
  return parseInt(time / 60 % 60)
}

function toSeconds (time) {
  return time % 60
}

function toText (time) {
  return ('00' + time).slice(-2)
}

actionCreatorの実装

actionオブジェクトを返す、関数を定義していきます。
startTimerAction()では停止処理を実行するために、setInterval()で取得したIDを受け取り、storeに渡しています。

action.js
export function startTimerAction (intervalID) {
  return {type: 'START_TIMER', intervalID: intervalID}
}

export function stopTimerAction () {
  return {type: 'STOP_TIMER'}
}

export function updateTimerAction () {
  return {type: 'UPDATE_TIMER'}
}

export function resetTimerAction () {
  return {type: 'RESET_TIMER'}
}

containerの実装

ReactとReduxの連携部分の実装をして、Redux側の実装は完了です。

mapStateToProprs(state)関数ではReduxのStoreで管理しているstateをReactのpropsに紐付けています。
今回は簡単なアプリケーションなので、そのまま返していますが、複雑になってきた場合はここで加工して、必要な状態をReact側に渡すことができます。

mapDispatchToProps(dispatch)関数にてReduxのdispatch処理をpropsに紐付けることで、Reactのコンポーネントがクリック等のイベントを受け取った際にdispatch処理を実行させることが出来るようになります。

connect()関数の詳細な仕様に関しては、githubのリポジトリにAPIドキュメントがあるのでそちらを参考にしてください。

[https://github.com/reactjs/react-redux/blob/master/docs/api.md#inject-todos-of-a-specific-user-depending-on-props-and-inject-propsuserid-into-the-action:title]

container.js
import {connect} from 'react-redux'

import {App} from './components/app.js'
import * as action from './action.js'

/**
 * reduxで管理しているstateをreact側に渡す
 * @param state reduxのstoreで管理されている状態
 * @return react側で使う状態 this.prorpsで参照
 */
function mapStateToProps (state) {
  return state
}

/**
 * reactで受け取るユーザーアクションとreduxのアクションを連携させる
 * @param dispatch reduxのreducerにアクションを渡す関数
 */
function mapDispatchToProps (dispatch, props) {
  return {
    startTimer: () => {
      const intervalID = setInterval(() => dispatch(action.updateTimerAction()), 1000)
      dispatch(action.startTimerAction(intervalID))
    },
    stopTimer: () => dispatch(action.stopTimerAction()),
    resetTimer: () => dispatch(action.resetTimerAction())
  }
}

function mergeProps (stateProps, dispatchProps, ownProps) {
  return Object.assign({}, stateProps, dispatchProps, ownProps, {
    // タイマーが止まっていたら、カウントアップを開始する
    startTimer: () => {
      if (!stateProps.started) dispatchProps.startTimer()
    }
  })
}

// 上記で定義した関数を使って、ReduxとReactのコンポーネントを繋げる
export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(App)

timer-model.jsでdispatch()関数を呼ぶ方法が思いつかなかったので、ここでsetInterval()関数にてタイマーの開始処理をしています。
理想としては、ここではactionをdispatchするだけにしたかったです。

React側のコンポーネントを修正

Reduxの導入が完了したので、それに合わせてReactのコンポーネントを修正します。
Redux側が状態管理をしてくれるため、Reactのコンポーネントは純粋に状態を受け取るだけで良くなりました。

components/app.js
import React from 'react'
import {Timer} from './timer.js'
import {TimerButton} from './timer-button.js'

export class App extends React.Component {

  render () {
    return (
      <div className='center-container' style={{marginTop: '100px'}}>
        <Timer hours={this.props.hours} minutes={this.props.minutes} seconds={this.props.seconds} ref='timer' />
        <div className='timer-button-container'>
          <TimerButton text={'START'} handleClick={this.props.startTimer} />
          <TimerButton text={'STOP'} handleClick={this.props.stopTimer} />
          <TimerButton text={'RESET'} handleClick={this.props.resetTimer} />
        </div>
      </div>
    )
  }
}
components/timer.js
import React from 'react'

export class Timer extends React.Component {
  render () {
    return (
      <div>
        <span className='timer-number' role='hour'>{this.props.hours}</span>
        <span className='timer-semicolon'>:</span>
        <span className='timer-number' role='minute'>{this.props.minutes}</span>
        <span className='timer-semicolon'>:</span>
        <span className='timer-number' role='second'>{this.props.seconds}</span>
      </div>
    )
  }
}
components/timer-button.js
import React from 'react'

export class TimerButton extends React.Component {
  render () {
    return (
      <button className='timer-button' type='button' name='button' onClick={this.props.handleClick}>{this.props.text}</button>
    )
  }
}

main処理を実装

最後にmainの処理を実装します。
const store = createStore(timer)にて、Reduxのstoreを生成します。

最後の<Provider store={store}>...</Proivder>にて、Reduxのstoreで管理している状態を子コンポーネントである<App />に対して状態を渡しています。
ここの記述はreact-reduxにて決められているため、必ずこのように書く必要があります。

main.js
import React from 'react'
import {Provider} from 'react-redux'
import {render} from 'react-dom'
import {createStore} from 'redux'

import App from './container.js'
import {timer} from './reducer.js'

const store = createStore(timer)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('timer-container')
)

さいごに

アプリケーションを作ってみての感想として、React, Redux 単体の場合は分かりやすかったのですが、ReactとReduxを連携させようとすると、難しくなるなと感じました。
ただ、状態管理の処理をReduxが担ってくれるので、Reactのコンポーネントからビジネスロジックが無くなり、純粋なViewに徹することが出来るようになるのは、シンプルになって扱いやすいなと思いました。
Reactを使っていて、状態管理に悩んでいる人はRedux(Fluxフレームワーク)を導入する価値は十分にあると思います。

24
33
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
24
33