女性向けエンジニアスクール
Reactで状態・フォーム・リストを扱う - なぜstateが必要か
増えているのに画面は0
コンソールの likes は押すたびに増えていますが、画面のいいねはずっと0のままです。
変数はちゃんと増えています。それなのに画面は動きません。なぜでしょうか。
let likes = 0;
function handleClick() {
likes = likes + 1;
}1 / 5
useState、イベントハンドラ、制御されたinput、フォーム送信とバリデーション、mapによるリスト表示、key、条件レンダリング、空状態を扱う全25レッスンのコースです。入力・絞り込み・ダークモードへ反応する作品ギャラリーを作り、ユーザー操作で変化するUIの基本を身につけます。
レッスン
25件
所要時間
約6.5時間
ランク
初級
学習環境
ブラウザ完結
入力フォーム、絞り込み、ダークモードを備えたインタラクティブな作品ギャラリーを作る
useState、イベントハンドラ、制御されたinput、フォーム送信とバリデーション、mapによるリスト表示、key、条件レンダリング、空状態を扱う全25レッスンのコースです。入力・絞り込み・ダークモードへ反応する作品ギャラリーを作り、ユーザー操作で変化するUIの基本を身につけます。
useStateで文字列・オブジェクト・配列の状態を更新できる
フォーム入力と送信を制御し、入力値を検証できる
リスト・条件分岐・空状態をReactで表現できる
ブラウザ完結（インストール不要）
テキストでの解説
0
レッスン
コーディングの問題
22
レッスン
クイズ問題
3
レッスン
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
レッスンの最初に、図と短い言葉で学ぶ内容をつかみます。
Reactで状態・フォーム・リストを扱う - なぜstateが必要か
コンソールの likes は押すたびに増えていますが、画面のいいねはずっと0のままです。
変数はちゃんと増えています。それなのに画面は動きません。なぜでしょうか。
let likes = 0;
function handleClick() {
likes = likes + 1;
}1 / 5
Reactで状態・フォーム・リストを扱う - useState
const の1行が、初期値・いまの値・更新関数を同時に扱っています。
受け取る2つは、useState が返す配列の中身です。
| 書いてあること | やっていること |
|---|---|
| useState(0) | 最初の値を0にする |
| 左の likes | いまの値を受け取る |
| 左の setLikes | 更新する関数を受け取る |
1 / 5
Reactで状態・フォーム・リストを扱う - ボタンで更新
1手ずつ進めて、setCount を呼んだあと画面がいつ変わるか確かめてください。
1 / 5
Reactで状態・フォーム・リストを扱う - 複数のstate
画面が持つ状態は1つとはかぎりません。useState は必要なだけ並べて書けます。
3つとも独立していて、どれか1つを更新しても他は変わりません。
| state | 役割 |
|---|---|
| likes | いいね数 |
| activeTab | いま開いているタブ |
| displayName | 表示名 本名かローマ字か |
1 / 5
動かしながら、仕組みや変化を目で確かめられます。
なぜstateが必要か
画面を変えるには state が要る
useState
useState が返す2つボタンで更新
set が再描画のきっかけ
オブジェクトのstate
オブジェクトの state は丸ごと差し替わる陽葵「注文ウィジェット、今風にできる?」
1問目は無料で解けます。
教材を見ないで、依頼と完成条件だけを読んで書いてみてください。
React道場 ハレノヒ珈琲をモダン化する10問
このコースを終えたあとに進むと、無理なく続けられます