ReactJS - ステート管理をReact Hooksを使用して

こんにちは、将来のReact開発者たち！今日は、React Hooksを使用したステート管理の興味深い世界に踏み出しませんか。あなたの近所の親切なコンピュータサイエンスの先生として、この冒険を案内するのを嬉しく思っています。プログラミングが新しい方でも心配しないでください。ステップバイステップで進め、すぐにプロのようにステートを管理できるようになるでしょう！

Reactでのステートとは？

本題に入る前に、「ステート」とはReactで何を意味するかを理解しましょう。砂の城を建てていると仮定しましょう。現在の砂の城の形とサイズがその「ステート」です。砂を追加したり削除したりすると、砂の城のステートが変わります。同様に、Reactでは、ステートはコンポーネントの現在の状態を表します。データ、外観、または特定の瞬間における行動などです。

React Hooksの紹介

さあ、React Hooksについて話しましょう。Hookは魔法のようなツールで、コンポーネントにスーパーパワーを与えてくれます。functional componentsがステートや他のReact機能を持つことを可能にし、クラスを書かなくても済みます。今日焦点を当てるHookはuseStateです。

ステートを持つコンポーネントの作成

まずはシンプルなステートを持つコンポーネントを作成しましょう。クリックするたびに増えるカウンタを作ります。

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>あなたは{count}回クリックしました</p>
<button onClick={() => setCount(count + 1)}>
クリックしてね
</button>
</div>
);
}

これを分解してみましょう：

1. useStateをReactからインポートします。
2. Counter関数内でuseState(0)を呼び出します。これにより、初期値が0のステート変数countとそれを更新するための関数setCountが作成されます。
3. 現在のcountをパラグラフ内に表示します。
4. ボタンがクリックされるたびにsetCount(count + 1)を呼び出してカウントをインクリメントします。

ボタンをクリックするたびに、Reactは更新されたカウントでコンポーネントを再レンダリングします。魔法のようですね？

Expense Manager Appでのステートの導入

さあ、もっと実践的な例で深めましょう。支出管理アプリを作成します。ユーザーが支出を追加できるコンポーネントを作ります。

import React, { useState } from 'react';

function ExpenseManager() {
const [expenses, setExpenses] = useState([]);
const [newExpense, setNewExpense] = useState('');
const [newAmount, setNewAmount] = useState('');

const addExpense = () => {
if (newExpense && newAmount) {
setExpenses([...expenses, { name: newExpense, amount: parseFloat(newAmount) }]);
setNewExpense('');
setNewAmount('');
}
};

return (
<div>
<h2>支出管理アプリ</h2>
<input
type="text"
value={newExpense}
onChange={(e) => setNewExpense(e.target.value)}
placeholder="支出名"
/>
<input
type="number"
value={newAmount}
onChange={(e) => setNewAmount(e.target.value)}
placeholder="金額"
/>
<button onClick={addExpense}>支出を追加</button>
<ul>
{expenses.map((expense, index) => (
<li key={index}>{expense.name}: ${expense.amount}</li>
))}
</ul>
</div>
);
}

これは相当な量の情報ですね！それを分解してみましょう：

1. 以下の3つのステート変数があります：

• expenses: 全支出を格納する配列
• newExpense: 新しい支出名の文字列
• newAmount: 新しい支出金額の文字列

2. addExpense関数：

• newExpenseとnewAmountが空でないか確認
• 新しい支出オブジェクトをexpenses配列に追加
• 入力フィールドをクリア

3. JSX内では：

• 支出名と金額の入力フィールド
• 支出を追加するボタン
• 全支出を表示するリスト

先ほど砂の城の例を举げましたが、これは好きなだけ新しい城（支出）を追加できる砂場のようなものです。それぞれの城には名前とサイズ（金額）があり、すべての城が下に並んでいます。

メソッド表

ここに使用したメソッドの便利な表を示します：

メソッド	説明
useState	ステート変数とそれを更新する関数を作成
setExpenses	支出配列を更新
setNewExpense	新しい支出名の文字列を更新
setNewAmount	新しい支出金額の文字列を更新
map	配列の各要素に対して関数を呼び出し、新しい配列を作成

結論

おめでとうございます！React Hooksを使用したステート管理の世界に初めて踏み出しました。ステートを持つコンポーネントの作成、ステートの更新、そしてミニ支出管理アプリの構築を学びました。

覚えておいてください、Reactを学ぶのは砂の城を建てるのと同じです。小さく始めて、実験をし、失敗しても気にせずにやり直しましょう。練習を重ねることで、すぐに複雑で美しいアプリケーションを構築できるようになります。

codingを続け、学び続け、そして何より楽しみましょう！次回まで、あなたの近所の親切なコンピュータサイエンスの先生がお別れです。Happy React-ing!

Credits: Image by storyset