【React 初心者】React でタイピング練習アプリ！

、React で文字当てゲームを作りました。

今回は、このようなタイピング練習アプリを作ってみました。

この記事では、このタイピングアプリの実装について解説しながら、

少々ですが練習のために使用した、

• React Hooks
• コンポーネントと props
• Material-UI
• TypeScript

についても書いていきます。

これらの知識がすでにある方は、最初の４項目は読み飛ばしていただいても構いません。

  関連記事【React 初心者】React で文字当てゲーム！

React Hooks (useState)

前回の文字当てゲームでは、クラスを定義して state を使っていました。

しかし、React Hooks という機能を使うことで、関数の中で state を扱うことができるようになります。

例えば、このように書いていたのを、

/src/App.js
1
import React, { Component } from 'react';
2

3
export default class App extends Component {
4
    constructor(props) {
5
        super(props);
6
        this.state = {
7
            firstState: 1,
8
            secondState: false,
9
        };
10
    }
11

12
    setValue = () => {
13
        const { firstState } = this.state;
14
        this.setState({
15
            firstState: firstState + 1,
16
        });
17
    };
18

19
    render() {
20
        const { firstState, secondState } = this.state;
21

22
        return (
23
            <div>
24
                <p>{firstState}</p>
25
                <p>{secondState}</p>
26
            </div>
27
        );
28
    }
29
}

次のように簡潔に書くことができるようになります。

/src/App.js
1
import React, { useState } from 'react';
2

3
export default function App() {
4
    const [firstState, setFirstState] = useState(1);
5
    const [secondState, setSecondState] = useState(false);
6

7
    const setValue = () => setFirstState(firstState + 1);
8

9
    return (
10
        <div>
11
            <p>{firstState}</p>
12
            <p>{secondState}</p>
13
        </div>
14
    );
15
}

const [firstState, setFirstState]のfirstStateは変数（state）名、setFirstStateはその変数を変更させるための関数名です。

useState()の引数に変数の初期値を渡します。

Hooks を使うことで、関数内部のどこからでも宣言なしでさっと state を参照できて、とても便利です。

コンポーネントと props

コンポーネントとは「部品」のことです。

次のように使います。

1
import React from 'react';
2

3
function MyComponent() {
4
    return <p>This is my component.</p>;
5
}
6

7
function AnotherComponent() {
8
    return (
9
        <div>
10
            "MyComponent" comes here.
11
            <MyComponent />
12
        </div>
13
    );
14
}

<MyComponent />と書いた部分に、

<p>This is my component.</p>が展開されます。

props は「外部から値を入れられる変数」のことです。

関数の引数みたいなイメージです。

関数を呼び出すときに引数を渡すのと同じように、次のように書きます。

1
import React from 'react';
2

3
function MyComponent(props) {
4
    return <p>This is my {props.adjective} component.</p>;
5
}
6

7
function AnotherComponent() {
8
    return (
9
        <div>
10
            "MyComponent" comes here.
11
            <MyComponent adjective='great' />
12
        </div>
13
    );
14
}

これで<MyComponent adjective="great" />と書いた部分に、

<p>This is my great component.</p>が展開されます。

なお、３～５行目は props を省略して次のように書くこともできます。

1
function MyComponent({ adjective }) {
2
    return <p>This is my {adjective} component.</p>;
3
}

ちなみに、コンポーネント名の先頭は大文字である必要があります。

Material-UI

Material-UI は、React コンポーネントを使って

を実現できるライブラリです。

npm install @material-ui/coreとターミナルに打ってインストールすることで、

すぐに使い始めることができます。

いろいろなコンポーネントが用意されていて、JSX に書き込むだけで、

その位置にきれいなデザインのボタンやカード、ダイアログなどを表示できます。

例えば、ボタンを表示させるには、次のようにします。

1
import React from 'react';
2
import Button from '@material-ui/core/Button';
3

4
function ButtonSample() {
5
  const handleClick = () => // doSomething();
6

7
  return (
8
    <div>
9
      <Button onClick={handleClick} variant="contained" color="primary">
10
        Click me!
11
      </Button>
12
    </div>
13
  );
14
}

公式ドキュメントには、どうすればどのようなデザインになるのかについて詳しく書かれています。

これで簡単にきれいなデザインを実装することができます。

TypeScript

TypeScript とは、型付けができる JavaScript です。

定数や変数を定義するときに、「これは文字列だ」「これは数値だ」と決めておくことで、

予期せぬエラーを未然に防ぐことができるようになります。

Create React App で TypeScript を使う場合、プロジェクト作成の際に--typescriptオプションをつけるだけで、

TypeScript による開発を始めることができます。

npx create-react-app my-react-app --typescript

実装

さて、ここから実際の実装作業に入っていきます。

ボタンコンポーネントを作る

まずはボタンのためのコンポーネントを作ります。

componentsフォルダの下にMyButton.tsxを作成します。

/src/components/MyButton.tsx
1
import React from 'react';
2
import Button from '@material-ui/core/Button';
3

4
type Props = {
5
    children: any,
6
    onClick: () => void,
7
};
8

9
export default function MyButton({ children, onClick }: Props) {
10
    return (
11
        <Button onClick={onClick} variant='contained' color='primary'>
12
            {children}
13
        </Button>
14
    );
15
}

４～７行目では、MyButton関数の引数の型をまとめて定義しています。

とはいってもanyは「何でも OK」というものなので、あまり意味がなかったりしますが、

だとしても型定義はしないと怒られます。

() => voidは返り値のない関数であることを示します。

ところで Material-UI のButtonは、デフォルトではテキストがすべて大文字になってしまうので、

この設定を解除します。

/src/components/MyButton.tsx
1
import React from 'react';
2
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
3
import Button from '@material-ui/core/Button';
4

5
const styles = createMuiTheme({
6
    typography: {
7
        button: {
8
            textTransform: 'none',
9
        },
10
    },
11
});
12

13
type Props = {
14
    children: any,
15
    onClick: () => void,
16
};
17

18
export default function MyButton({ children, onClick }: Props) {
19
    return (
20
        <ThemeProvider theme={styles}>
21
            <Button onClick={onClick} variant='contained' color='primary'>
22
                {children}
23
            </Button>
24
        </ThemeProvider>
25
    );
26
}

ButtonコンポーネントをThemeProviderコンポーネントで囲み、

その props のthemeに、５行目で定義したスタイルを指定しています。

これでボタンにスタイルが適用され、ボタンの文字が大文字化しなくなります。

ここでexportしたコンポーネントを、App.tsxでインポートして使用します。

/src/App.tsx
1
import React from 'react';
2
import MyButton from './components/MyButton';
3

4
export default function App() {
5
    return (
6
        <div className='App'>
7
            <MyButton>ON</MyButton>
8
        </div>
9
    );
10
}

state と構成を決める

今回のアプリで必要となる state は、

• 表示する文字
• ボタンで入力可能・不可能を切り替えるブール変数
• 現在入力している位置
• タイプミスをした位置の配列

となります。

まず、ボタンで入力可能・不可能を切り替えるためのブール変数を用意します。

/src/App.tsx
1
import React, { useState } from 'react';
2
import MyButton from './components/MyButton';
3

4
export default function App() {
5
    const [typing, setTyping] = useState(false);
6

7
    const typingToggle = () => setTyping(typing ? false : true);
8

9
    return (
10
        <div className='App'>
11
            <MyButton onClick={typingToggle}>{typing ? 'OFF' : 'ON'}</MyButton>
12
        </div>
13
    );
14
}

ボタンを押すとtypingToggle関数が動作し、typingを変更します。

ボタンの表示は ON OFF と切り替わります。

次に、タイピング用のテキストを用意します。

これはリセットボタンを押すと変化するようにするので、state に入れています。

/src/App.tsx
1
import React, { useState } from 'react';
2
import MyButton from './components/MyButton';
3

4
export default function App() {
5
    const [text, setText] = useState('test text');
6
    const [typing, setTyping] = useState(false);
7

8
    const typingToggle = () => setTyping(typing ? false : true);
9

10
    return (
11
        <div className='App'>
12
            <div id='textbox'>{text}</div>
13
            <MyButton onClick={typingToggle}>{typing ? 'OFF' : 'ON'}</MyButton>
14
        </div>
15
    );
16
}

キー入力を処理する

React には合成イベントというものがあり、

キーボードイベントやホイールイベントを処理することができます。

onKeyPressを使って、とりあえず入力したキーを表示させてみます。

/src/App.tsx
1
import React, { useState } from 'react';
2
import MyButton from './components/MyButton';
3

4
export default function App() {
5
    const [text, setText] = useState('test text');
6
    const [typing, setTyping] = useState(false);
7

8
    const typingToggle = () => setTyping(typing ? false : true);
9

10
    const handleKey = (e: React.KeyboardEvent<HTMLDivElement>) => setText(e.key);
11

12
    return (
13
        <div className='App' onKeyPress={(e) => handleKey(e)} tabIndex={0}>
14
            <div id='textbox'>{text}</div>
15
            <MyButton onClick={typingToggle}>{typing ? 'OFF' : 'ON'}</MyButton>
16
        </div>
17
    );
18
}

onKeyPressの部分に指定した関数が、なんらかのキーが押されたときに動作します。

tabIndexを指定しないとキーに反応しないので注意してください。

React.KeyboardEvent<HTMLDivElement>というのは TypeScript の型定義で、

VS Code であれば Quick Fix 機能を使っていい感じに補完してくれたりします。

これで入力したキーを認識し、表示することができます。

さて、ここからタイピングアプリにしていくので、あらかじめ用意された文字列と比較して、

文字が一致するかどうかで表示を変えることになります。

とりあえず、入力し終わった文字を黒、まだ入力していない文字をグレーで表示させてみましょう。

現在どこの文字を入力しようとしているか（位置）の情報が必要なので、state に追加します。

/src/App.tsx
1
import React, { useState } from 'react';
2
import MyButton from './components/MyButton';
3
import './App.scss';
4

5
export default function App() {
6
    const [text, setText] = useState('test text');
7
    const [typing, setTyping] = useState(false);
8
    const [position, setPosition] = useState(0);
9

10
    const typingToggle = () => setTyping(typing ? false : true);
11

12
    const handleKey = (e: React.KeyboardEvent<HTMLDivElement>) => {
13
        // 入力可能のとき
14
        if (typing) {
15
            // 入力したキーと現在入力しようとしている文字が一致するとき
16
            if (e.key === text[position]) {
17
                // 次の位置へ移動
18
                setPosition(position + 1);
19
            }
20
        }
21
    };
22

23
    return (
24
        <div className='App' onKeyPress={(e) => handleKey(e)} tabIndex={0}>
25
            <div id='textbox'>
26
                <span className='typed-letters'>{text.slice(0, position)}</span>
27
                <span className='waiting-letters'>{text.slice(position)}</span>
28
            </div>
29
            <MyButton onClick={typingToggle}>{typing ? 'OFF' : 'ON'}</MyButton>
30
        </div>
31
    );
32
}

今回は SCSS を使っていますが、CSS でも構いません。

SCSS を使うためには、ターミナルでnpm install -D node-sassと入力しておきます。

正しい文字を打つと文字が黒くなり、正しい文字を打たないと先に進みません。

また、ボタンで文字入力不可の状態にすると、何を打っても反応しなくなります。

打ち間違えた文字を赤くする

打ち間違えた文字を、その瞬間だけ赤くするだけなら、

「入力し終わった文字」「現在入力待ちの文字」「まだ入力されていない文字」の３つに分ければ済みますが、

入力し終わった文字でも打ち間違えていたものは赤くするという場合、

文字ひとつひとつに色付けをしていくことになります。

そのために、ひとつひとつの文字をspanタグに入れて、そのclassNameを動的に変更することで、

文字が黒かグレーか赤かを決めます。

これを実現するためにmapメソッドを使い、mapを使うためにsplitメソッドで文字列を配列に変換します。

ただ、最初の１文字だけははじめから「現在入力待ちの文字」にしています。

/src/App.tsx
1
import React, { useState } from 'react';
2
import MyButton from './components/MyButton';
3
import "./App.scss";
4

5
export default function App() {
6
  const [text, setText] = useState("test text");
7
  const [typing, setTyping] = useState(false);
8
  const [position, setPosition] = useState(0);
9
  const [typo, setTypo] = useState(new Array(0));
10

11
  const typingToggle = () => setTyping(typing ? false : true);
12

13
  const handleKey = (e: React.KeyboardEvent<HTMLDivElement>) => {
14
    // 入力可能のとき
15
    if (typing) {
16
      // 文字の配列を取得
17
      let textSpans = document.querySelector("#textbox")!.children;
18
      // 入力したキーと現在入力しようとしている文字が一致するとき
19
      if (e.key === text[position]) {
20
        // 現在の文字を入力済とする
21
        textSpans[position].classList.add("typed-letters");
22
        textSpans[position].classList.remove("current-letter");
23
        // まだ入力していない文字があるとき
24
        if (position <= text.length - 2) {
25
          // 次の位置へ移動
26
          textSpans[position + 1].className = "current-letter";
27
          setPosition(position + 1);
28
        // 全ての文字を入力し終わったとき
29
        } else {
30
          // 入力不可にする
31
          setTyping(false);
32
        }
33
      // 間違ったキーを入力したとき
34
      } else {
35
        // その位置でのはじめての打ち間違えであるとき
36
        if (typo.indexOf(position) === -1) {
37
          // 打ち間違えた位置の配列にその位置を追加
38
          setTypo([...typo, position]);
39
          // 打ち間違えた文字であることを示す class を追加
40
          textSpans[position].classList.add("typo");
41
        }
42
      }
43
    }
44
  };
45

46
  return (
47
    <div className="App" onKeyPress={e => handleKey(e)} tabIndex={0}>
48
      <div id="textbox">
49
        <span className="current-letter">{text[0]}</span>
50
          {text
51
            .split("")
52
            .slice(1)
53
            .map(char => (
54
              <span className="waiting-letters">{char}</span>
55
            ))}
56
      </div>
57
      <MyButton onClick={typingToggle}>{typing ? "OFF" : "ON"}</MyButton>
58
    </div>
59
  );
60
}

17 行目のdocument.querySelector("#textbox")!の!は、

document.querySelector("#textbox")がnullになる可能性があるために TypeScript に怒られることを避けるためにつけています。

nullでないときにのみ動くようになります。

あとは CSS のほうで色の設定をします。

ついでに、「現在入力待ちの文字」の位置に下線を表示して点滅させます。

だいぶ完成に近づいてきました！

リセットボタンをつくる

リセットすると、すべての文字が入力待ちになり、打ち間違えもリセットされます。

/src/App.tsx
1
...
2
const refresh = () => {
3
  // 文字の配列を取得
4
  let textSpans = document.querySelector("#textbox")!.children;
5
  // すべての文字のクラス名を変更
6
  for (const i of textSpans) {
7
    i.className = "waiting-letters";
8
  }
9
  // 最初の文字のクラス名のみ変更
10
  textSpans[0].className = "current-letter";
11
  // 位置を最初に
12
  setPosition(0);
13
  // 打ち間違えた位置の配列をリセット
14
  setTypo(new Array(0));
15
};
16

17
return (
18
  <div className="App" onKeyPress={e => handleKey(e)} tabIndex={0}>
19
    <div id="textbox">
20
      <span className="current-letter">{text[0]}</span>
21
        {text
22
          .split("")
23
          .slice(1)
24
          .map(char => (
25
            <span className="waiting-letters">{char}</span>
26
          ))}
27
    </div>
28
    <div className="buttons">
29
      <MyButton onClick={typingToggle}>{typing ? "OFF" : "ON"}</MyButton>
30
      <MyButton onClick={refresh}>Refresh</MyButton>
31
    </div>
32
  </div>
33
);

これで主要な機能は完成です！

あとはテキストをランダムに生成したり、スタイルを整えたりすれば完成です。

完成形のコード全文は CodeSandbox で見られます。

---

この記事が参考になったならうれしいです。

では