ReactJSは、Web開発において非常に人気のあるJavaScriptのライブラリです。ReactJSは、UIの開発をシンプルで効率的に行うことができ、その中でもHooksは、コンポーネントをより機能的にするために導入されました。この記事では、Hooksの一つであるuseStateを使って、簡単なToDoアプリを作る方法を解説します。
useStateとは何ですか？
useStateは、ReactJSのHooksの一つで、Reactコンポーネントの状態を保存するために使用されます。useStateを使用すると、コンポーネントの状態を更新することができます。useStateは、クラスコンポーネントのsetStateに相当するものですが、よりシンプルで直感的な使い方ができます。
ToDoアプリの作成
さて、ReactJSのHooksでuseStateを使用して、簡単なToDoアプリを作ってみましょう。以下の手順に従って進めていきます。
1. ファイルの作成
まず、新しいフォルダを作成し、その中にindex.htmlとapp.jsの2つのファイルを作成します。index.htmlファイルには、ReactJSを読み込むためのスクリプトタグを追加し、app.jsファイルにはReactJSのコードを書いていきます。
2. ReactJSのインストール
ReactJSを使用するために、npmを使用してReactJSをインストールします。以下のコマンドを実行してください。
npm install react
npm install react-dom
3. ToDoアプリの作成
app.jsファイルに、以下のコードを追加してください。
import React, { useState } from "react";
import ReactDOM from "react-dom";
function App() {
const [todos, setTodos] = useState([]);
const handleSubmit = (event) => {
event.preventDefault();
const newTodo = event.target.todo.value;
setTodos([...todos, newTodo]);
event.target.todo.value = "";
};
return (
<div>
<h1>ToDo List</h1>
<form onSubmit={handleSubmit}>
<input type="text" name="todo" />
<button type="submit">Add ToDo</button>
</form>
<ul>
{todos.map((todo) => (
<li key={todo}>{todo}</li>
))}
</ul>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
上記のコードは、Appコンポーネントを定義し、useStateを使用してtodosという配列の状
態を管理します。また、handleSubmit関数は、フォームが送信されたときに実行され、入力されたテキストをtodos配列に追加します。
最後に、ReactDom.render関数を使用して、AppコンポーネントをrootというIDを持つ要素にレンダリングします。
4. ToDoアプリの動作確認
index.htmlファイルを開き、以下のコードを追加してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>ReactJS ToDoアプリ</title>
</head>
<body>
<div id="root"></div>
<script src="app.js"></script>
</body>
</html>
上記のコードは、ReactJSのコードを含むapp.jsファイルを読み込み、ReactJSのコードがレンダリングされる要素であるrootというIDを持つdivを作成します。
index.htmlファイルをブラウザで開き、ToDoアプリが動作することを確認してください。
まとめ
この記事では、ReactJSのHooksの一つであるuseStateを使用して、簡単なToDoアプリを作成する方法を解説しました。useStateは、Reactコンポーネントの状態を保存するために使用され、非常にシンプルで直感的な使い方ができます。今回のToDoアプリでは、useStateを使用して、配列の状態を管理し、フォームから入力されたテキストを配列に追加することができました。これをベースに、より高度なReactアプリケーションの開発に役立てていただければ幸いです。