ReactApps

2019年3月5日

「リリィ・シュシュのすべて」をつくる

zxget9oeu

はじめに

ローカル環境でこのサンプルを動かすには以下の手順に従ってください。

$ git close git@github.com:reiwa/reactapps.git
$ cd reactapps
$ yarn
$ yarn workspace lily start

※ $の部分はペーストしないでください。

内容

「リリィ・シュシュのすべて」のような形を変えながら書き出される文字列をつくります。
色々な数字を変えて好みに調整してください。

コード

import React, { FunctionComponent, useEffect, useState } from 'react'
import { interval } from 'rxjs'

const App: FunctionComponent = () => {
  const alphabets = [
    `Á É Í Ó Ú Ý á é í ó ú ý`,
    `Ä Ë Ï Ö Ü Ÿ ä ë ï ö ü ÿ`,
    `Ç Ş ç ş`,
    `Ã Õ ã õ`,
  ]
    .map(a => a.split(' '))
    .flat()
  const text = 'リリイ・シュシュのすべて'
  const [state, setState] = useState([0, 6])

  useEffect(() => {
    const subscription = interval(20).subscribe(() => {
      setState(([i, c]) => {
        if (text.length - 2 < i && c === 1) {
          subscription.unsubscribe()
        }

        return [c < 1 ? i + 1 : i, c < 1 ? 2 : c - 1]
      })
    })

    return () => {
      subscription.unsubscribe()
    }
  }, [])

  const [index, count] = state

  if (index === text.length - 1 && count === 0) {
    return <p>{text}</p>
  }

  const a = alphabets[Math.floor(Math.random() * alphabets.length)]

  return <p>{text.slice(0, index) + a}</p>
}

export default App

いくつかポイント

文字列の配列をつくります。最初から配列で文字列を管理するのは大変なので、空白で区切ってできた2次元配列を1次元にしています。

const alphabets = [
  `Á É Í Ó Ú Ý á é í ó ú ý`,
  `Ä Ë Ï Ö Ü Ÿ ä ë ï ö ü ÿ`,
  `Ç Ş ç ş`,
  `Ã Õ ã õ`
]
  .map(a => a.split(' '))
  .flat()

コンポーネントが持つ状態は「今が何文字目であるか」「1文字を何回書き換えたか」です。1つの文字を6回ほど書き換えると、正しい文字を表示し、次の文字を書き換えるような仕組みです。

const [state, setState] = useState([0, 6])
const [index, count] = state

現在が4文字目であれば、変数textの3文字目までと適当な1文字を結合し表示します。

const text = 'リリイ・シュシュのすべて'
const a = alphabets[Math.floor(Math.random() * alphabets.length)]
return <p>{text.slice(0, index) + a}</p>