はじめに
今回は問題集：初心者編の「簡単なカウンターアプリ」をReactのみで作成していきます。
useStateの理解
useStateを理解する前にまず、Reactには状態（state）という概念があります。
これは例えるなら、ゲーム上で「現在のスコア」「残りHP」など、
今どうなっているかを状態（state）というようです。
useStateは「状態を入れる箱」を作るもの
useStateを使うとそういった「状態をしまっておく箱」が作れるようになります。
例えば以下の様な感じ
const [count,setCount] = useState(0);
中身を解説するとこんな感じです。
| 言葉 | 例え |
|---|---|
| count | 今の中身の状態 |
| setCount | 箱の中身を変えるためのボタン |
| useState(0) | 箱を作るときの初期値（例で言うと数字の0） |
これを使って数字を増減させるカウンターアプリを作っていきます。
カウンターアプリについて
カウンターアプリの仕様としてはとてもシンプルです。
- 「+」をクリックすれば数字が増え
- 「-」をクリックすれば数字が減る
まずApp.jsxの書かれている元のコードを以下の様な形なる様に削除します。
function App() {
return (
)
}
export default App
useStateを使うにはファイルの一番上でuseStateをimportします。
import { useState } from 'react' //追加
import './App.css' //お好みでCSS調整してください
function App() {
return (
)
}
export default App
これだけでuseStateが使える様になります。
では、useStateを使って箱を作っていきます。
import { useState } from 'react'
import './App.css'
function App() {
const [count,setCount] = useState(0); //追加
return (
)
}
export default App
先ほど例題に挙げたコードそのままなので解説は省きます。
useStateで箱を作ったので、これを使ってまずは数字を増やせる様にしていきます。
カウンターの表示
まず、クリックするたびに数字を増やすカウンターの表示を作ります。
{count}がそれになります。
初期値は「0」にしているので、「0」が表示されます。
import { useState } from 'react'
import './App.css'
function App() {
const [count,setCount] = useState(0);
return (
<>
<div className="card">{count}</div> //追加
</>
)
}
export default App
setCountを使った数値の増減
次にsetCountをクリックイベント（onClick）に組み込みます。
setCountの中で「現在の数値」+「1」を行なって、クリックするたびに+1されるようにします。
import { useState } from 'react'
import './App.css'
function App() {
const [count,setCount] = useState(0);
return (
<>
<div className="card">{count}</div>
<button className="btn" onClick={()=>setCount(count + 1)}>+</button> //追加
</>
)
}
export default App
これだけでカウンターアプリは完成ですね。
ついでに数値を減らす仕組みも作ります。
とはいえお察しかと思いますが、「count + 1」を「count - 1」にするだけです。
import { useState } from 'react'
import './App.css'
function App() {
const [count,setCount] = useState(0);
return (
<>
<div className="card">{count}</div>
<button className="btn" onClick={()=>setCount(count + 1)}>+</button>
<button className="btn" onClick={()=>setCount(count - 1)}>-</button> //追加
</>
)
}
export default App
完成！！！
まとめ
今までだったらコピペッで「はいおわりー」とかいって作った気になっていたんですが、
学習内容をしっかり理解して作ると「おぉーーー」ってなりました。
こういう学習は1つ1つ理解できるようになってくるとやっぱり楽しいですねー。
次回は、「フォームから名前を入力して表示するアプリ」です！
ではまた。