【React】PrimeReactを使用してTODOアプリ作ってみる
PrimeReactとは
PrimeReactは、React.js用のUIコンポーネントライブラリです。
PrimeReactは、Reactアプリケーションで美しく
直感的なUIを実現するための多数のコンポーネントを提供しています。
PrimeReactのコンポーネントには、ボタン、インプットフィールド、チェックボックス、
ラジオボタン、スライダー、ダイアログ、カレンダーなどがあります。
これらのコンポーネントは、Reactのコンポーネントと同様に簡単に使用でき、
機能的に強力です。PrimeReactのコンポーネントは、
レスポンシブデザインに対応しており、すべてのデバイスで一貫性のある表示を提供します。
PrimeReactは、PrimeNG、PrimeFaces、PrimeVueなどの
他のPrimeライブラリと同様に、フルスタックのJavaScriptアプリケーションフレームワークであるPrimeNGの成功を受けて開発されました。
PrimeReactは、React.jsアプリケーションの構築を迅速かつ簡単に行うためのツールとして、Reactコミュニティで広く受け入れられています。
プロジェクト作成
npc create-react-app my-todo
cd my-todo
npm run dev
localhost:3000 にアクセスできてり
PrimeReact入れる
npm install primereact primeicons
完成コード
import React, { useState } from 'react';
import { Button } from 'primereact/button';
import { InputText } from 'primereact/inputtext';
import { ListBox } from 'primereact/listbox';
function TodoApp() {
const [todos, setTodos] = useState([]);
const [newTodo, setNewTodo] = useState('');
function addTodo() {
setTodos([...todos, newTodo]);
setNewTodo('');
}
function removeTodo() {
setTodos(todos.filter(todo => todo !== newTodo));
setNewTodo('');
}
return (
<div className="p-grid p-dir-col">
<div className="p-col">
<div className="p-inputgroup">
<InputText value={newTodo} onChange={(e) => setNewTodo(e.target.value)} />
<Button label="Add" icon="pi pi-check" onClick={addTodo} />
<Button label="Remove" icon="pi pi-times" onClick={removeTodo} />
</div>
</div>
<div className="p-col">
<ListBox options={todos} />
</div>
</div>
);
}
export default TodoApp;
解説
import React, { useState } from 'react';
import { Button } from 'primereact/button';
import { InputText } from 'primereact/inputtext';
import { ListBox } from 'primereact/listbox';
このコードは、React.jsアプリケーションで
PrimeReactのUIコンポーネントを使用するために必要なコードの一部です。
import React, { useState } from 'react';は、
ReactとuseStateフックをインポートしています。
useStateフックは、Reactコンポーネント内で状態を管理するために使用されます。
import { Button } from 'primereact/button';は、
PrimeReactのButtonコンポーネントをインポートしています。
これは、PrimeReactが提供するUIコンポーネントの1つで、
ボタンを表示するために使用されます。
import { InputText } from 'primereact/inputtext';は、
PrimeReactのInputTextコンポーネントをインポートしています。
これは、テキスト入力フィールドを表示するために使用されます。
import { ListBox } from 'primereact/listbox';は、
PrimeReactのListBoxコンポーネントをインポートしています。
これは、リストボックスを表示するために使用されます。
これらのコンポーネントを使用するためには、適切なReactコンポーネント内で
これらのコンポーネントを使用する必要があります。
例えば、<Button>タグを使用することで、
PrimeReactのボタンコンポーネントを表示することができます。
function TodoApp() {
const [todos, setTodos] = useState([]);
const [newTodo, setNewTodo] = useState('');
このコードは、React.jsでTODOアプリを作成するために必要な
状態変数とuseStateフックを宣言しています。
const [todos, setTodos] = useState([]);は、
todosという名前の状態変数を宣言しています。
この状態変数は、TODOリスト内のタスクのリストを格納します。
useStateフックは、初期値を空の配列[]に設定しています。
また、setTodosという関数を宣言しています。
この関数は、todosの値を更新するために使用されます。
const [newTodo, setNewTodo] = useState('');は、
newTodoという名前の状態変数を宣言しています。
この状態変数は、新しいTODOタスクを入力するためのテキストフィールドの値を格納します。useStateフックは、初期値を空の文字列''に設定しています。
また、setNewTodoという関数を宣言しています。
この関数は、newTodoの値を更新するために使用されます。
これらの状態変数は、TODOアプリの実装で使用されます。todos状態変数は、TODOリストのタスクを格納し、newTodo状態変数は、新しいTODOタスクを入力するためのテキストフィールドの値を格納します。それぞれの値は、useStateフックを使用して初期化され、後で更新されます。
function addTodo() {
setTodos([...todos, newTodo]);
setNewTodo('');
}
このコードは、TODOアプリで新しいタスクを追加するためのaddTodo関数を定義しています。
setTodos([...todos, newTodo]);は、
setTodos関数を使用して、現在のTODOリストに新しいタスクを追加しています。この処理では、配列のスプレッド演算子を使用して、新しいTODOタスクnewTodoをtodos配列に追加しています。
setNewTodo('');は、setNewTodo関数を使用して、
newTodoの値を空の文字列に設定しています。
これにより、テキストフィールドに入力された値がクリアされ、
新しいTODOタスクを追加するためにテキストフィールドが準備されます。
この関数を実行すると、
新しいタスクがTODOリストに追加され、テキストフィールドの値がクリアされます。
function removeTodo() {
setTodos(todos.filter(todo => todo !== newTodo));
setNewTodo('');
}
このコードは、TODOアプリでタスクを削除するためのremoveTodo関数を定義しています。
setTodos(todos.filter(todo => todo !== newTodo));は、
setTodos関数を使用して、現在のTODOリストから選択されたタスクを削除しています。
この処理では、todos配列のfilterメソッドを使用して、
削除するタスクを除外した新しい配列を作成しています。
setNewTodo('');は、setNewTodo関数を使用して、
newTodoの値を空の文字列に設定しています。
これにより、テキストフィールドに入力された値がクリアされ、
新しいTODOタスクを追加するためにテキストフィールドが準備されます。
この関数を実行すると、選択されたタスクがTODOリストから削除され、
テキストフィールドの値がクリアされます。
return (
<div className="p-grid p-dir-col">
<div className="p-col">
<div className="p-inputgroup">
<InputText value={newTodo} onChange={(e) => setNewTodo(e.target.value)} />
<Button label="Add" icon="pi pi-check" onClick={addTodo} />
<Button label="Remove" icon="pi pi-times" onClick={removeTodo} />
</div>
</div>
<div className="p-col">
<ListBox options={todos} />
</div>
</div>
);
}
このコードは、TODOアプリのUIを定義するためのJSXを返すTodoApp関数の定義を含んでいます。
<div className="p-grid p-dir-col">は、
PrimeReactのp-gridとp-dir-colクラスを使用して、
縦方向にレイアウトを構築するためのDIV要素を作成しています。
<div className="p-col">は、
PrimeReactのp-colクラスを使用して、
コンポーネントの列を定義するためのDIV要素を作成しています。
<div className="p-inputgroup">は、
PrimeReactのp-inputgroupクラスを使用して、
テキストフィールドとボタンをグループ化するためのDIV要素を作成しています。
<InputText value={newTodo} onChange={(e) => setNewTodo(e.target.value)} />は、新しいTODOタスクを入力するためのテキストフィールドを作成しています。
このテキストフィールドの値はnewTodo変数にバインドされています。
また、onChangeイベントハンドラを使用して、テキストフィールドの変更を検出し、setNewTodo関数を使用してnewTodo変数を更新します。
<Button label="Add" icon="pi pi-check" onClick={addTodo} />は、
TODOタスクを追加するためのボタンを作成しています。
このボタンには、onClickイベントハンドラを使用して、
addTodo関数を呼び出すように設定されています。
<Button label="Remove" icon="pi pi-times" onClick={removeTodo} />は、TODOタスクを削除するためのボタンを作成しています。このボタンには、onClickイベントハンドラを使用して、removeTodo関数を呼び出すように設定されています。
<ListBox options={todos} />は、
TODOタスクを表示するためのリストボックスを作成しています。
このリストボックスには、現在のTODOリストのtodos配列がオプションとしてバインドされています。
このコードでは、PrimeReactのコンポーネントを使用して、TODOアプリのUIを構築しています。
export default TodoApp;
export default は、モジュールのデフォルトエクスポートを定義するためのキーワードです。
このコードで TodoApp コンポーネントをエクスポートしているため、
他のファイルで import TodoApp from './TodoApp' と
記述することで TodoApp コンポーネントを使用できるようになります。
また、他に複数のエクスポートがある場合には、default を使ったエクスポートと一緒に、他の名前でエクスポートすることもできます。
豆:
export defaultをファイルの末尾に記述することで、
そのファイルからデフォルトエクスポートされる唯一の要素を指定します。
この場合、TodoAppコンポーネントがデフォルトエクスポートされているため、他のファイルからimport TodoApp from './TodoApp'のようにして使用できます。
また、ファイルの末尾にexport defaultを記述することにより、エクスポートされる要素がファイルの先頭で宣言されているかどうかにかかわらず、エクスポートされることが保証されます。
これにより、コードの保守性と可読性が向上し、エクスポートされる要素を探す必要がなくなるため、コードの修正や変更が容易になります。
Discussion