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コンポーネントがレンダリングされます。
このプログラムは、ユーザーが特定の操作を使用して数値を目標値にするというシンプルなゲームを提供することを目的としています。