React における「state」とは、コンポーネント内で時間とともに変化する可能性のあるデータを指します。コンポーネントの state が変更されると、React は自動的にコンポーネントを再レンダリングして新しい state を反映します。Hooks は、関数コンポーネントから React の state やライフサイクル機能に「フック」するための関数です。
このラボでは、最も基本的な Hooks の一つである useState を使用して、React の関数コンポーネントで state を管理する方法を学びます。簡単なカウンターアプリケーションを構築し、ユーザーの操作に応じて state を初期化、表示、更新する方法を実演します。
まず、開発環境を準備しましょう。セットアップスクリプトは、Vite を使用して ~/project/my-app に新しい React プロジェクトを既に作成しています。
最初のタスクは、必要な依存関係をインストールし、開発サーバーを起動することです。WebIDE でターミナルを開き、以下のコマンドを一つずつ実行してください。
プロジェクトディレクトリに移動します：
cd my-appプロジェクトの依存関係をインストールします：
npm install開発サーバーを起動します：
npm run dev -- --host 0.0.0.0 --port 8080最後のコマンドを実行すると、サーバーが実行中であることを示す出力が表示されます。これで、LabEx インターフェースの「Web 8080」タブをクリックして、ライブアプリケーションを表示できます。このラボ全体を通して、~/project/my-app/src/App.jsx ファイルを編集していきます。
このステップでは、まず React ライブラリから useState Hook をインポートすることから始めます。Hooks は特別な関数であり、それらを使用するには、まず react パッケージからインポートする必要があります。
WebIDE のファイルエクスプローラーを使用して、~/project/my-app/src/App.jsx ファイルに移動して開きます。
まず、デフォルトのコンテンツをクリーンアップして、最小限の開始点を作成しましょう。App.jsx の内容全体を以下のコードに置き換えてください。
function App() {
return (
<>
<h1>React Counter</h1>
</>
);
}
export default App;次に、useState Hook をコンポーネント内で利用できるように、ファイルの先頭にインポート文を追加します。
import { useState } from "react";
function App() {
return (
<>
<h1>React Counter</h1>
</>
);
}
export default App;この行は、'react' ライブラリから名前付きエクスポートである useState 関数を使用したいことを JavaScript に伝えます。
このステップでは、useState Hook を呼び出して、コンポーネントに新しい state を作成します。
useState 関数は 1 つの引数を取ります。それは state の初期値です。この関数は 2 つの要素を含む配列を返します。
これらの 2 つの値を取得して個別の変数に格納するために、「配列の分割代入 (array destructuring)」という構文を使用します。これらの変数を [something, setSomething] のように命名するのが慣例です。
App コンポーネント関数内で、return ステートメントの前に、state を初期化するために次の行を追加します。state 変数には count という名前を付け、初期値を 0 に設定します。
~/project/my-app/src/App.jsx ファイルを以下のコードで更新してください。
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
return (
<>
<h1>React Counter</h1>
</>
);
}
export default App;これで、私たちのコンポーネントには count という名前の state ができ、その初期値は 0 に設定されています。また、後でその値を変更するために使用できる setCount という関数も用意されました。
このステップでは、ユーザーインターフェースに count state 変数の現在の値を表示します。
JSX では、波括弧 {} で囲むことで、任意の有効な JavaScript 式をマークアップ内に直接埋め込むことができます。これにより、state 変数のような動的なデータをレンダリングできます。
現在の count の値を含むメッセージを表示するために、段落 <p> タグを追加しましょう。
~/project/my-app/src/App.jsx の return ステートメント内の JSX を変更します。
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
return (
<>
<h1>React Counter</h1>
<p>The current count is: {count}</p>
</>
);
}
export default App;ファイルを保存した後、「Web 8080」タブに切り替えてください。ページに「The current count is: 0」というテキストが表示され、初期 state の値が正しくレンダリングされていることを確認できるはずです。
このステップでは、state を更新するためのロジックを定義します。state を直接変更してはならない（例：count = count + 1）ことを覚えておくことが重要です。代わりに、useState によって提供される state セッター関数（この場合は setCount）を常に使用する必要があります。
セッター関数を呼び出すと、React は state が変更されたことを認識します。React はその後、新しい state 値でコンポーネントの再レンダリングをスケジュールします。
App コンポーネント内に、カウントをインクリメントするロジックを処理する簡単な関数を作成しましょう。この関数を incrementCount と呼びます。
~/project/my-app/src/App.jsx ファイルに incrementCount 関数を追加してください。
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
};
return (
<>
<h1>React Counter</h1>
<p>The current count is: {count}</p>
</>
);
}
export default App;この関数は、呼び出されると現在の count 値を取得し、それに 1 を加算してから、新しい値を setCount に渡します。これにより、App コンポーネントの再レンダリングがトリガーされます。
この最終ステップでは、state 更新ロジックをユーザーアクションに接続します。コンポーネントにボタンを追加し、ユーザーがそれをクリックしたときに、前のステップで作成した incrementCount 関数を呼び出します。
React では、onClick のような特別な属性に関数を提供することで、クリックなどのイベントを処理できます。
JSX に <button> 要素を追加し、その onClick ハンドラーを incrementCount 関数に設定しましょう。
~/project/my-app/src/App.jsx を最終コードで更新してください。
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
};
return (
<>
<h1>React Counter</h1>
<p>The current count is: {count}</p>
<button onClick={incrementCount}>Increment</button>
</>
);
}
export default App;onClick には、関数を呼び出した結果（incrementCount()）ではなく、関数自体（incrementCount）を渡していることに注意してください。React は、ボタンがクリックされるたびにこの関数を呼び出します。
これで、「Web 8080」タブに移動してください。 「Increment」ボタンが表示されるはずです。それをクリックして、画面上のカウントがクリックごとに増加するのを見てください！
おめでとうございます！useState Hook を使用して、状態を持つ React コンポーネントを正常に構築しました。
この実験では、モダン React における状態管理の基本原則を学びました。
react ライブラリから useState Hook をインポートする方法。useState を呼び出すことで、state の一部を初期化する方法。{} を使用して、JSX 内に state 変数を表示する方法。useState Hook を理解することは、React をマスターするための重要な最初のステップです。このパターンを使用して、独自の React コンポーネントに動的でインタラクティブな動作を追加できるようになりました。
