LoginSignup
0
0
@bkh4149(aocchi)

reactチートシート

Last updated at Posted at 2022-08-07

reactをcdnで動かすときのテンプレート

毎回どこにいったか忘れるので、とりあえず適当なサンプルとともにアップさせていただきましたｗ

起動方法：

以下をコピペして適当な名前（xxx.html）で保存し、ブラウザで開くだけです。

<html><head>
<meta charset="utf-8"></title></style>

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

</head> 


<body>
<div id="root"></div>
<script type="text/babel" >

const { useState } = React;

const App = () => {
  const [c, setC] = useState(0)

  const fc=()=>{
    const random = Math.floor( Math.random() * 6 +1);
    return random;
  }
  return (
    <div>
      <div >
	<p>cを150にせよ！！！！</p>
        <h1>c={c}</h1>
        <button onClick={() => setC(prevState => prevState + 1)}> +1  </button>
        <button onClick={() => setC(prevState => prevState  *3)}> *3  </button>
        <button onClick={() => setC(prevState => prevState - 2)}> -2  </button><br/>
        <button onClick={() => setC(0)}>リセット</button><br/>
        <button onClick={() => setC(fc)}>サイコロ</button><br/>
      </div>
    </div>
  )
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement)
</script>
</body></html>

関数の戻り値がほしいとき

　他の言語であれば、returnで戻り値を返すか、配列で渡してポインタ的に値を変更しますが、reactの場合は勝手が違うので最初戸惑いました。

　Reactの関数コンポーネントやクラスコンポーネントは、親から子にデータを渡すときにpropsを使用しますが、直接的な"戻り値"のようなものは存在しません。しかし、親コンポーネントと子コンポーネントの間でデータを双方向に通信するためのいくつかの方法があります。
　そのひとつがコールバック関数を使用する方法です。親から子へコールバック関数をpropsとして渡し、子コンポーネントが何らかの操作を行ったときにそのコールバック関数を呼び出して親に情報を返す方法です。

　例えば呼ぶ側にsetStateで作成した変数があり、呼ばれる側で値を書き換えたい場合です。

 const [c, setC] = useState(0)

この場合変数cを渡すのではなくて、関数であるsetCを渡す様になっています。
　呼ばれた側でsetC関数を使って値を変化させると、呼ぶ側のcが変化しているという具合です。

呼ぶ側

<Sub setC={setC} />

呼ばれる側

propsで受け取るところまでは同じですが、引数が関数なのでなかに処理を書いてあげます。

const Sub = (props) =>{
  const plus1=()=>{
     props.setC(prevState => prevState + 1);
        ....

こうすると呼ぶ側の変数cが変化します。

ちなみに　prevState => prevState + 1　はアロー関数です。
通常アロー関数は　const v = (param) => { return param + 1; }
こんな形をしていますが、

まず、無名関数なので　const v =　の部分が取れる
次にパラメータが１つのときは()を省略できる
さらに、関数が1つの式だけから成る場合、中括弧とreturnを省略できる

というルールによってこのようにかけるのですね（Pythonから入った人間には戸惑いの3連チャンです;;;）

サンプル

サンプルを兼ねて簡単なゲームを作ってみました。

ゲームの目的:

ユーザは、与えられた回数の操作（ボタンクリック）で、数値（cとして表現される）を正確に150にすることを目指します。

起動方法：

以下をコピペして適当な名前（xxx.html）で保存し、ブラウザで開くだけです。

<html><head>
<meta charset="utf-8"></title></style>
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head> 

<body>
<div id="root"></div>
<script type="text/babel" >

const { useState } = React;

const NUM=11

const Sub = (props) =>{
  const plus1=()=>{
     props.setC(prevState => prevState + 1);
     props.setCt(prevState => prevState - 1);
  }
  const minus2=()=>{
   props.setC(prevState => prevState -1);
   props.setCt(prevState => prevState - 1);
  }
  const mul3=()=>{
   props.setC(prevState => prevState *3);
   props.setCt(prevState => prevState - 1);
  }
  const rndm=()=>{
     const random = Math.floor( Math.random() * 6 +1);
     props.setC(random);
     props.setCt(prevState => prevState - 1);
  }
  const reset2=()=>{
   props.setC(0);
   props.setCt(NUM);
  }
   return(
   	<div>
	        <button onClick={plus1}> +1  </button>
	        <button onClick={minus2}> -1  </button>
	        <button onClick={mul3}> x3  </button>
	        <button onClick={rndm}> random  </button>
           <br/><br/>
           <button onClick={reset2}> reset  </button>
       </div>
   )
}


const App = () => {
  const [c, setC] = useState(0)
  const [ct, setCt] = useState(NUM)   

  const judge=()=>{//◆成否の判定
        if (ct===0){
          return <h1>オーバー</h1>
       } else {

          if (c===150){
        		return <h1>成功！</h1>
          } else {
            return (
              <div>
                <h3>cを150にせよ！ </h3>
                <h2>残り{ct}回</h2>
                <h1>c={c}</h1>
              </div>
            )
          }
      }
    }  


   return (
    <div>
      {judge()}
      <Sub setC={setC} setCt={setCt} />
    </div>
  )
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement)
</script>
</body></html>

アプリの詳細:

初期状態:

数値cは0からスタートします。
ユーザーは最大11回の操作を行うことができる（NUM=11として定義されています）。

操作ボタン:

+1: cの値を1増やし、操作回数を1減少させます。
-1: cの値を1減少させ、操作回数も1減少させます。
x3: cの値を3倍にし、操作回数を1減少させます。
random: cの値を1から6の間のランダムな数に設定し、操作回数を1減少させます。
reset: cの値を0にリセットし、操作回数を最大値（11）にリセットします。

成否の判定:

もし操作回数が0回になった場合、画面には"オーバー"と表示されます。
一方で、cの値が150になった場合、"成功！"と表示されます。
それ以外の場合、ユーザーはcの現在の値と残りの操作回数を見ることができます。

コードの構造:

Sub コンポーネント: これは操作ボタンを表示するReactの関数コンポーネントです。親コンポーネントから受け取ったsetCとsetCtの関数を使って、cとctの状態を変更します。

App コンポーネント: これはアプリケーションのメインコンポーネントです。cとctの状態を保持しており、Subコンポーネントを子として持っています。また、cとctの値に基づいて成否を判定するjudge関数も含まれています。

最後に、アプリケーションのエントリーポイントであるrootというIDを持つdiv要素にAppコンポーネントがレンダリングされます。

このプログラムは、ユーザーが特定の操作を使用して数値を目標値にするというシンプルなゲームを提供することを目的としています。

0
0
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
0
0