【React 初心者】React で文字当てゲーム！

2020-05-312021-07-12

React

アプリ開発

最近 React を勉強していて、何か簡単なものを作りたいと思って、このような文字当てゲームを作りました。

今回、この記事で実装について解説していきます。

コンポーネントや props はほとんど使っておらず、

JSX とは
state とは
どんな感じに書けるのか

ぐらいの人向けの記事になるかなと思います。

React の導入

React を使うには Node.js が必要になります。

Node.js をインストールした後は、次のコマンドをコマンドラインに入力すると、

カレントディレクトリ（今いるディレクトリ）直下に新たなディレクトリ（my-react-app）が作られます。

npx create-react-app my-react-app

my-react-appの部分は好きな名前で大丈夫です。

cd my-react-appでディレクトリを移動してから、npm startすると、

ローカルホストが立ち上がり、ブラウザで見られるようになります。

React の仕組み

React は JavaScript で HTML を書いてしまおうという発想のライブラリです。

その仕組みについてですが、

さきほどのコマンドで作成されたディレクトリの中身を見てみると、

/public/index.htmlと/src/index.jsというのがあります。

/public/index.html1...
2<body>
3  <noscript>You need to enable JavaScript to run this app.</noscript>
4  <div id="root"></div>
5  <!--
6    This HTML file is a template.
7    If you open it directly in the browser, you will see an empty page.
8
9    You can add webfonts, meta tags, or analytics to this file.
10    The build step will place the bundled scripts into the <body> tag.
11
12    To begin the development, run `npm start` or `yarn start`.
13    To create a production bundle, use `npm run build` or `yarn build`.
14  -->
15</body>
16...

この HTML ファイルの<body>タグの中身はからっぽです。

中身を JavaScript で生成して、<div id="root"></div>の中に入れ込むことになります。

/src/index.js1import React from 'react';
2import ReactDOM from 'react-dom';
3import './index.css';
4import App from './App';
5import * as serviceWorker from './serviceWorker';
6
7ReactDOM.render(
8  <React.StrictMode>
9    <App />
10  </React.StrictMode>,
11  document.getElementById('root')
12);
13
14// If you want your app to work offline and load faster, you can change
15// unregister() to register() below. Note this comes with some pitfalls.
16// Learn more about service workers: https://bit.ly/CRA-PWA
17serviceWorker.unregister();

ReactDOM.renderによって、id="root"のタグの中身に<React.StrictMode><App /></React.StrictMode>が入るという仕組みです。

そして、<App />の部分には/src/App.jsの内容が展開されます。

このファイルの基本構造は次のようになります。

/src/App.js1import React, { Component } from 'react';
2import './App.css';
3
4export default class App extends Component {
5  render() {
6    return (
7
8    );
9  }
10}

Componentを継承したAppというクラスをエクスポートしていますが、

実際に展開されるのは、returnの中身に書かれた HTML っぽいもの＝JSX です。

関連記事結局、React とは何なのか？

実装

まずは答えとなりうる文字列のリストを作成し、

その中からランダムで答えを取り出します。

/src/App.js1import React, { Component } from 'react';
2import './App.css';
3
4let answers = [...];  // 答えの一覧
5let answer = answers[Math.floor(Math.random()*answers.length)];

次に state を宣言します。

state は「外部とは関わりのない」変数です。

対して props は、関数の引数のように、外部から定義できる変数ですが、今回は使いません。

/src/App.js1import React, { Component } from 'react';
2import './App.css';
3
4let answers = [...];
5let answer = answers[Math.floor(Math.random()*answers.length)];
6
7export default class App extends Component {
8
9  constructor(props) {
10    super(props);
11    this.state = {
12      ans: answer,                          // 答えとなる文字列
13      display: '_'.repeat(answer.length),   // 表示させる文字列
14      inputted: '',   // 入力されたアルファベット
15      correct: false  // 正解が出たら true
16    };
17  }
18  ...
19}

constructorはクラスの初期化メソッドです。

thisはクラス自体を指しているということでとりあえずいいと思います。

次に出力する HTML となる部分を書きます。

/src/App.js1...
2render() {
3  const { ans, display, correct } = this.state;
4
5  return (
6    <div className="main">
7      <p>{correct ? 'Correct!' : ''}</p>
8      <p className="answer">{display}</p>
9      <div className="alphabets">
10        {('abcdefghijklmnopqrstuvwxyz'.split('')).map(value => <button name={value} onClick={this.onInput}>{value}</button>)}
11      </div>
12      <button className="ans-btn" onClick={this.check}>回答</button>
13      <button className="next-btn" onClick={() => this.reset(ans)}>次の問題</button>
14    </div>
15  );
16}

HTML を知っていれば、微妙な差異はあるものの JSX はなんとなく読めると思います。

JSX の中に{}で書いた部分に JavaScript のコードが入っています。

state を使うときには３行目のようにデータを受け取る必要があります。

10行目では、a-z までのアルファベットを記した26個のボタンを配置しています。

ボタンを押したときの動作の定義

onInputメソッドで、アルファベットボタンが押されたときにどのアルファベットが選択されたのかのデータを取得します。

/src/App.js1onInput = e => {
2  this.setState({
3    inputted: e.target.name
4  });
5}

アルファベットのボタンのname属性には各アルファベットが指定してあるので、

これを見ることでどのアルファベットが選択されたかがわかります。

次に、checkメソッドで答えの中に指定したアルファベットが含まれているか確認します。

これは「回答」ボタンを押したときに動作します。

/src/App.js1check = () => {
2  const { ans, display, inputted } = this.state;
3  let displayTmp = display;
4
5  // 一度押したボタンは無効化する
6  document.getElementsByName(inputted)[0].disabled = true;
7  
8  if (~ans.indexOf(inputted)) {   // 選択したアルファベットが答えに含まれているとき
9    for (let k = 0;k <= ans.length-1;k++) {
10      let letterIndex = ans.indexOf(inputted, k)
11      if (~letterIndex && display[letterIndex] !== ans.charAt(letterIndex)) {
12        // 一致した部分を見せる
13        displayTmp = displayTmp.slice(0, letterIndex) + ans.charAt(letterIndex) + displayTmp.slice(letterIndex + 1);
14      }
15    }
16    this.setState({
17      display: displayTmp
18    });
19    if (displayTmp === ans) {
20      this.setState({
21        correct: true
22      });
23    }
24  }
25}

13行目のdisplayTmp = ...の部分でthis.setStateをしても、forループがうまくいきませんでした。

そのため、displayTmpを仮に作ってから、後でdisplayを変更しています。

ちなみに、~はビットを反転するもので、~-1が0になります。

0がfalseとみなされるのを利用しています。

最後に、「次の問題」ボタンを押したときに動作するresetメソッドです。

別の問題を出題しますが、同じ問題は２度と出ないようにします。

/src/App.js1reset = shown => {
2  // 答えのリストからすでに出題した答えを除く
3  answers = answers.filter(n => n !== shown);
4  // 次に出題する問題の答え
5  answer = answers[Math.floor(Math.random()*answers.length)]
6
7  // 出す問題がなくなったとき、「次の問題」ボタンを押せないようにする
8  if (answers.length === 1) {
9    document.getElementsByClassName('next-btn')[0].disabled = true;
10  }
11
12  // すべてのアルファベットボタンを押せるようにする
13  const buttons = document.getElementsByClassName('alphabets')[0].getElementsByTagName('button');
14
15  for (let i = 0; i <= 25; i++) {
16    buttons[i].disabled = false;
17  }
18
19  this.setState({
20    ans: answer,
21    display: '_'.repeat(answer.length),
22    correct: false
23  });
24}

引数shownが、render内でansを受け取っていますので、

shownにはその時点で出題されている問題の答えの文字列が渡されます。

以上で完成になります。

App.js のソースコード全文

/src/App.js1import React, { Component } from 'react';
2import './App.css';
3
4let answers = ['tiger', 'kangaroo', 'giraffe'];
5let answer = answers[Math.floor(Math.random()*answers.length)];
6
7export default class App extends Component {
8
9  constructor(props) {
10    super(props);
11    this.state = {
12      ans: answer,
13      display: '_'.repeat(answer.length),
14      inputted: '',
15      correct: false
16    };
17  }
18
19  onInput = e => {
20    this.setState({
21      inputted: e.target.name
22    });
23  }
24
25  check = () => {
26    const { ans, display, inputted } = this.state;
27    let displayTmp = display;
28
29    document.getElementsByName(inputted)[0].disabled = true;
30    
31    if (~ans.indexOf(inputted)) {
32      for (let k = 0;k <= ans.length-1;k++) {
33        let letterIndex = ans.indexOf(inputted, k)
34        if (~letterIndex && display[letterIndex] !== ans.charAt(letterIndex)) {
35          displayTmp = displayTmp.slice(0, letterIndex) + ans.charAt(letterIndex) + displayTmp.slice(letterIndex + 1);
36        }
37      }
38      this.setState({
39        display: displayTmp
40      });
41      if (displayTmp === ans) {
42        this.setState({
43          correct: true
44        });
45      }
46    }
47  }
48
49  reset = shown => {
50    answers = answers.filter(n => n !== shown);
51    answer = answers[Math.floor(Math.random()*answers.length)]
52
53    if (answers.length === 1) {
54      document.getElementsByClassName('next-btn')[0].disabled = true;
55    }
56
57    const buttons = document.getElementsByClassName('alphabets')[0].getElementsByTagName('button');
58
59    for (let i = 0; i <= 25; i++) {
60      buttons[i].disabled = false;
61    }
62
63    this.setState({
64      ans: answer,
65      display: '_'.repeat(answer.length),
66      correct: false
67    });
68  }
69
70  render() {
71    const { ans, display, correct } = this.state;
72
73    return (
74      <div className="main">
75        <p>{correct ? 'Correct!' : ''}</p>
76        <p className="answer">{display}</p>
77        <div className="alphabets">
78          {('abcdefghijklmnopqrstuvwxyz'.split('')).map(value => <button name={value} onClick={this.onInput}>{value}</button>)}
79        </div>
80        <button className="ans-btn" onClick={this.check}>回答</button>
81        <button className="next-btn" onClick={() => this.reset(ans)}>次の問題</button>
82      </div>
83    );
84  }
85}

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

React といっても、ほとんどは JavaScript の話になりました。

コンポーネントや props を使えば、もっと React の本質に近づけるような気がします。

とはいえ、やはり JSX で書けること、その中に JavaScript のコードを埋め込めることが便利ですね。

参考になれば幸いです。

ではでは