はじめに
React勉強中の大学4年生です。
インターンを経て大学3年生からフリーランスとして活動しており、Typescriptの学習の必要性を感じたためReact×Typescriptの学習をスタートしました。
今回は自分の学習のアウトプットも兼ねて、ReactとTypeScriptを使用して簡単なTodoリストを作ってみることにしました。
アプリケーションの概要
- 使用する技術はReactとTypescript
- タスクの追加ができる
- タスクの削除ができる
- ステートの管理ができる
プロジェクトの立ち上げ
Node.jsをインストールし、以下のコマンドを打つとTypescriptを使用したReactプロジェクトを使用することができます。
npx create-react-app {プロジェクト名} --template typescript
今回はTodoという名前のプロジェクトを立ち上げるので以下のように記入します。
npx create-react-app Todo --template typescript
作成したプロジェクトのディレクトリに移動して起動します。
cd Todo
npm start
このコマンドを実行すると、ブラウザが自動的に開き、http://localhost:3000 でReactアプリケーションが表示されます。Reactのデフォルトのページが表示されれば、プロジェクトの立ち上げは成功です。
Todoコンポーネントを作成する
Todo.tsxというファイルを新たに作成し、Todoコンポーネントの作成します。
Todo.tsx
import React from 'react';
function Todo() {
return (
<div className="Todo">
<h2>Todoリスト</h2>
<input></input>
<button>追加する</button>
</div>
);
}
export default Todo;
結果
このTodoリストはまだ何も機能を持っていませんが、Todoリストの基本的なレイアウトができています。 ここから機能を追加していきます。
タスク追加機能の実装
タスク追加機能の流れを文章化してみます。- inputにタスクが書き込まれた時 入力フィールドにタスクの内容を書き込む。ユーザーが入力するたびに入力フィールドの内容はリアルタイムで更新されるようにする
- 追加ボタンを押した時 追加するボタンを押すと現在の入力フィールドがタスクとして配列に格納されるようにする
- 新しいタスクオブジェクトが完成 新しいタスクがオブジェクトとして作成される。
- タスクの内容（テキスト）
- タスクを識別するための一意のID
- タスクリストが更新される 新しいタスクオブジェクトが既存のタスクリストに追加される。 Reactのステートが更新されることで、画面上のタスクリストが再レンダリングされ、新しいタスクがリストに表示される。
このオブジェクトには以下の情報が含まれます：
これらを順に実装していくと以下のようなコードになる
Todo.tsx
import React, { useState } from 'react';
function Todo() {
type Todo = {
inputValue: string;
key:number;
};
//inputの状態変化を表す定数
const [inputValue, setInputValue] = useState<string>('');
//タスクの配列
const [todos, setTodos] = useState<Todo[]>([]);
const handleChange=(e: React.ChangeEvent<HTMLInputElement>)=>{
setInputValue(e.target.value)
}
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const newTodo: Todo = { inputValue: inputValue, key: Date.now() };
setTodos([...todos, newTodo]);
setInputValue('');
};
return (
<div className="Todo">
<h2>Todoリスト</h2>
<form onSubmit={handleSubmit}>
<input
type="text"
value={inputValue}
onChange={handleChange}></input>
<button>追加する</button>
</form>
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo.inputValue}</li>
))}
</ul>
</div>
);
}
export default Todo;
タスク削除機能の実装
タスク削除機能の実装について文章化してみます。- 削除ボタンのクリックイベントを作成 削除ボタンを押すと定義した一意のIDをもとに特定のタスクを消去し、新しい配列を作る
- タスクリストの更新 クリックイベントハンドラ内で、削除対象のタスクを除外した新しい配列を作成する。`filter`メソッドを使って、削除対象のタスク以外のタスクを抽出する。
- ステートの更新 新しいタスクリストで状態を更新します。これにより、Reactが再レンダリングされ、削除されたタスクが画面から消えるようにする。
Todo.tsx
import React, { useState } from 'react';
function Todo() {
type Todo = {
inputValue: string;
key:number;
};
//inputの状態変化を表す定数
const [inputValue, setInputValue] = useState<string>('');
//タスクの配列
const [todos, setTodos] = useState<Todo[]>([]);
const handleChange=(e: React.ChangeEvent<HTMLInputElement>)=>{
setInputValue(e.target.value)
}
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const newTodo: Todo = { inputValue: inputValue, key: Date.now() };
setTodos([...todos, newTodo]);
setInputValue('');
};
const handleDelete=(key:number)=>{
const newTodos=todos.filter((todo)=>todo.key!==key);
setTodos(newTodos);
}
return (
<div className="Todo">
<h2>Todoリスト</h2>
<form onSubmit={handleSubmit}>
<input
type="text"
value={inputValue}
onChange={handleChange}></input>
<button>追加する</button>
</form>
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo.inputValue}
<button onClick={() => handleDelete(todo.key)}>削除</button>
</li>
))}
</ul>
</div>
);
}
export default Todo;
ここまでの実装でTypescriptとJavascriptの記法の違いについてまとめてみる
TypescriptとJavascriptの記法の違い
これまでの実装コードの中でのTypescriptとJavascriptの記法の違いは以下の通りである。①型アノテーション
②型エイリアス
③関数の引数の型を指定することができる
④オブジェクトの型
一つ一つ確認してみる
①型アノテーション
TypeScriptでは、変数や関数の引数、戻り値に型を指定することができます。const [inputValue, setInputValue] = useState<string>('');
const [todos, setTodos] = useState<Todo[]>([]);
型を指定することのメリットは以下のようなものです。
- エラーの早期発見
- コードの可読性が上がる
- 自動補完やインテリセンス機能により開発効率が上がる
②型エイリアス
typeやinterfaceを使ってカスタム型を定義することができる。 型エイリアスは同じ型を再利用したいときに使うと便利。 型の定義が一箇所になるため、保守性が向上する。type Todo = {
inputValue: string;
key: number;
};
③関数の引数の型を指定することができる
TypeScriptでは、関数の引数に型を指定することで、その関数がどのようなデータを受け取るかを明確にすることができます。const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(e.target.value);
};
ポイント
e.preventDefault();の表記
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); // デフォルトのフォーム送信を防ぐ
const newTodo: Todo = { inputValue: inputValue, key: Date.now() };
setTodos([...todos, newTodo]);
setInputValue('');
};
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); // デフォルトのフォーム送信を防ぐ
const newTodo: Todo = { inputValue: inputValue, key: Date.now() };
setTodos([...todos, newTodo]);
setInputValue('');
};
formタグにつけたhandleSubmitの中にある「e.preventDefault();」は表記することによって、ボタンが押されるたびにページがリロードされるという表記を直すことができます。