React.js

初心者向け。React.jsでお手軽に作れる超簡単なおみくじ

初心者向け。React.jsでお手軽に作れる超簡単なおみくじ

みなさんこんにちは、からんです。

今回はReact.js製のおみくじアプリの解説ですがこれからReact.jsを勉強する人に向いていると思います。

仕様

最初の状態が下記になります。

「?」をクリックするたびに「大吉、中吉、凶」のどれかに変わります。

デモ

ここから見ることができます。

それではアプリを作っていきますがまずは下記をコピペして下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Reactで作ったおみくじ</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.2/css/bulma.min.css" />
  <link href="./css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div id="root"></div>

  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.6/index.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <script type="text/babel">

  const Omikuji = () => {
    
    
   //ここに書いていきます
    
   
  };

  const root = document.getElementById('root');
  ReactDOM.render(<Omikuji />, root);

  </script>
</body>
</html>

最初の状態

まずは最初の状態にしますがコードを下記にします。

const Omikuji = () => {
  
  return(
    <div className="wrap">
      <h2>おみくじ</h2>
      <div id="btn">?</div>
    </div>
  );
};

これで↓の表示になります。(CSSは自分で調節して下さい)

ボタンを押すと「?」が変わるようにしたいのでonClickメソッドを使います。

「onClick={onClick}」の{onClick}を4行目〜15行目に書いています。

クリックするたびに「大吉、中吉、凶」を変えるのですがクリックすることで得られる任意の数値で変えますが状態の切り分けは「if」で行います。

0以上1未満の任意の数値を取るのは「Math.random()」です。

?を大吉・中吉・凶に切り替える

コードを下記にします。

const Omikuji = () => {
    
    //ここから追加-
    const onClick = () => {
      const point = Math.random();
      if(point <= 0.3 && point >= 0.1) {
        setText('大吉');
      }
      if(point >= 0.31 && point < 0.5) {
        setText('中吉');
      }
      if(point > 0.51 && point < 0.99){
        setText('');
      }
    }
    //ここまで追加

    return(
      <div className="wrap">
        <h2>おみくじ</h2>
        <div id="btn" onClick={onClick}>?</div>     //onClick={onClick}を追加
      </div>
    );
};

?が変わった時の記述をしていますがまだ?は変わりません。

「?」を変えることができるようにしますがuseStateで行います。

コードを下記にします。

const Omikuji = () => {
    
    const [question,setText] = React.useState('?');     //この行を追加

    const onClick = () => {
      const point = Math.random();
      if(point <= 0.3 && point >= 0.1) {
        setText('大吉');
      }
      if(point >= 0.31 && point < 0.5) {
        setText('中吉');
      }
      if(point > 0.51 && point < 0.99){
        setText('');
      }
    }

    return(
      <div className="wrap">
        <h2>おみくじ</h2>
        <div id="btn" onClick={onClick}>{question}</div>   //「?」を「{question}」に変更
      </div>
    );
};

これで「?」をクリックすれば「大吉、中吉、凶」のどれかに変わりますが1回しか変わりません。

何度も変えないといけないのでuseEffectを使います。

何度も変更できるようにする

コードを下記にします。

const Omikuji = () => {
    
    const [question,setText] = React.useState('?');

    //ここから追加
    React.useEffect(()=>{
      if(question === '?'){
        return
      };
      onClick();
    },[question]);
    //ここまで追加

    const onClick = () => {
      const point = Math.random();
      if(point <= 0.3 && point >= 0.1) {
        setText('大吉');
      }
      if(point >= 0.31 && point < 0.5) {
        setText('中吉');
      }
      if(point > 0.51 && point < 0.99){
        setText('');
      }
    }

    return(
      <div className="wrap">
        <h2>おみくじ</h2>
        <div id="btn" onClick={onClick}>{question}</div>
      </div>
    );
};

7〜9行目があるのはこれがないと画面を開いた時に「?」が「大吉、中吉、凶」のどれかになるのですがそれを防ぐためです。

これでおみくじの完成です。

コードの完成系

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Reactで作ったおみくじ</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.2/css/bulma.min.css" />
  <link href="./css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div id="root"></div>

  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.6/index.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <script type="text/babel">

  const Omikuji = () => {
    
    const [question,setText] = React.useState('?');

    React.useEffect(()=>{
      if(question === '?'){
        return
      };
      onClick();
    },[question]);

    const onClick = () => {
      const point = Math.random();
      if(point <= 0.3 && point >= 0.1) {
        setText('大吉');
      }
      if(point >= 0.31 && point < 0.5) {
        setText('中吉');
      }
      if(point > 0.51 && point < 0.99){
        setText('');
      }
    }

    return(
      <div className="wrap">
        <h2>おみくじ</h2>
        <div id="btn" onClick={onClick}>{question}</div>
      </div>
    );
  };

  const root = document.getElementById('root');
  ReactDOM.render(<Omikuji />, root);

  </script>
</body>
</html>