初めに
React & TypeScriptを通しての、todoアプリの作り方を紹介します。
とても基礎的なアプリなので、実際にコードを読んで試してみて、参考にしてください！
対象読者：reactを勉強し始めて浅い方(勉強した事がある人が対象です！)
初めて、reactで簡単なアプリを作ってみよう！と考えた方におすすめです
向かない方：reactを勉強して長い方 & 「react&JavaScript」を勉強した事がない方
環境&構築
node.js等が入っていない人は、こちらの記事を参考にお願いします。
https://clover-weblog.com/nextjs-start/
手順
環境が構築が済んだら、以下のコマンドで作成
npx create-next-app todos-app --typescript
package.jsonは以下のようなバージョンで作成されました(2023/01/02時点)
私の環境
❯ node -v
v16.14.2
% npx -v
8.19.2
"react": "^18.2.0"
- react18系
- node.js 16.14.2
-
npx create-next-app todos-app --typescriptで作成
補足
この記事に興味を持ちましたら、以下のハンズオンをやることをオススメします。
reactでtodoを学ぶなら本当におすすめのzennの記事
解説も素晴らしく、本当に良い記事だと思います
基本のtodoアプリ作成方法
以下のようなコードで、簡単にtodoアプリが出来ます
index.tsx
import { useState } from 'react';
export default function index() {
const [text, setText] = useState<string>("");
const [todos, setTodos] = useState<string[]>([]);
// 送信されてきた値をstateに保存
function onChange(e:React.ChangeEvent<HTMLInputElement>) {
setText(e.target.value);
}
// 送信ボタンを押した後、入力フォームに書かれている値をtodosのstateに保存
function onSubmit(e:React.FormEvent<HTMLFormElement>) {
// 送信ボタンを押した後の画面遷移を防ぐ
e.preventDefault();
// 新しくtodosのstateを更新するための、仮の配列
const newTodos = [...todos];
// 入力フォームに書かれている値を追加する
newTodos.push(text);
setTodos(newTodos);
setText("");
}
return (
<div>
<h1>todos</h1>
{/* リロードを防ぐために、イベントオブジェクトを渡す */}
<form onSubmit={(e) => {onSubmit(e)}}>
<input type="text" value={text} onChange={onChange} />
<button type='submit' onSubmit={() => onSubmit}>送信</button>
</form>
<div>
<ul>
{/* 登録されているtodosを展開する */}
{todos.map((todo,index) => {
// mapで展開する値には、keyプロパティを指定して、ユニークな値を渡す(reactが、一つ一つのエレメントを識別するために)
return <li key={index}>{todo}</li>
})}
</ul>
</div>
</div>
)
}
削除ボタンも追加する
削除ボタンも追加する場合は、以下のように書きます
index.tsx
import { useState } from 'react';
// todoの型定義。mapで特定するためにidも付与
type Todos = {
id:number,
text:string
}
export default function index() {
const [text, setText] = useState<string>("");
// todoは複数あるので、配列で作成
const [todos, setTodos] = useState<Todos[]>([]);
// 送信されてきた値をstateに保存
function onChange(e:React.ChangeEvent<HTMLInputElement>) {
setText(e.target.value);
}
function onSubmit(e:React.FormEvent<HTMLFormElement>) {
// 送信ボタンを押した後の画面遷移を防ぐ
e.preventDefault();
// todosに保存するための、新しいtodoを作成
const newTodo: Todos = {
id: new Date().getTime(), // ユニークな値なら何でも良い
text: text // stateのtext(入力フォームに書かれている値)を保存
}
// todosを新しく作り直すので、既存のtodosに、newTodoを足す
const newTodos = [...todos,newTodo];
setTodos(newTodos); // 更新
setText("");
}
function onDelete(id:number) {
// 削除するボタンを押した後、指定されたtodoを消すのだが、その前に、完全に別物のtodosのコピーを作成する必要がある
// オブジェクト型をコピーすると、通常は参照先をコピーしてしまうので、そうならないようにするmapの戻り値で新しい配列を作成する。
// こちらの、「shallow copyとdeep copy」の記事を読むと、オブジェクト型がどのようなコピーをするのかが分かると思いますhttps://www.wakuwakubank.com/posts/744-javascript-object-copy/
const deepCopy = todos.map((todo) => ({ ...todo }));
deepCopy.map((todo,index) => {
if (todo.id === id) {
// 既存のtodoのidと、引数で渡ってきたidが同じだったら、spliceメソッドで削除する
deepCopy.splice(index,1)
}
});
// 先程のdeepCopyを渡す事で、stateが更新されて削除される
setTodos(deepCopy);
}
return (
<div>
<h1>todos</h1>
{/* リロードを防ぐために、イベントオブジェクトを渡す */}
<form onSubmit={(e) => {onSubmit(e)}}>
{/* 入力された値をstateに保存する */}
<input type="text" value={text} onChange={onChange} />
{/* 送信ボタンを押したら、todosに新しいtodoを追加する */}
<button type='submit' onClick={() => onSubmit}>送信</button>
</form>
<div>
<ul>
{/* 登録されているtodosを展開する */}
{todos.map((todo) => {
return <li key={todo.id}>
{todo.text}
{/* 削除ボタンを押した時に、todoのidを渡す事で特定出来るようにし、spliceメソッドで削除する */}
<button type="submit" onClick={() => onDelete(todo.id)}>削除</button>
</li>
})}
</ul>
</div>
</div>
)
}
完了した場合、チェックを付けると、打ち消し線が付くようにする
ディレクトリ構成
pages/index.tsx
import { useState } from 'react';
// チェックボックス入力後、cssで打ち消し線を実装したいため使用
import classes from "../styles/Index.module.css"
// todoの型定義。mapで特定するためにidも付与
type Todos = {
id:number,
text:string,
isDone:boolean
}
export default function index() {
const [text, setText] = useState<string>("");
// todoは複数あるので、配列で作成
const [todos, setTodos] = useState<Todos[]>([]);
// 送信されてきた値をstateに保存
function onChange(e:React.ChangeEvent<HTMLInputElement>) {
setText(e.target.value);
}
function onSubmit(e:React.FormEvent<HTMLFormElement>) {
// 送信ボタンを押した後の画面遷移を防ぐ
e.preventDefault();
// todosに保存するための、新しいtodoを作成
const newTodo: Todos = {
id: new Date().getTime(), // ユニークな値なら何でも良い
text: text, // stateのtext(入力フォームに書かれている値)を保存
isDone:false
}
// todosを新しく作り直すので、既存のtodosに、newTodoを足す
const newTodos = [...todos,newTodo];
setTodos(newTodos); // 更新
setText("");
}
function onDelete(id:number) {
// 削除するボタンを押した後、指定されたtodoを消すのだが、その前に、完全に別物のtodosのコピーを作成する必要がある
// オブジェクト型をコピーすると、通常は参照先をコピーしてしまうので、そうならないようにするmapの戻り値で新しい配列を作成する。
// こちらの、「shallow copyとdeep copy」の記事を読むと、オブジェクト型がどのようなコピーをするのかが分かると思いますhttps://www.wakuwakubank.com/posts/744-javascript-object-copy/
const deepCopy = todos.map((todo) => ({ ...todo }));
deepCopy.map((todo,index) => {
if (todo.id === id) {
// 既存のtodoのidと、引数で渡ってきたidが同じだったら、spliceメソッドで削除する
deepCopy.splice(index,1)
}
});
// 先程のdeepCopyを渡す事で、stateが更新されて削除される
setTodos(deepCopy);
}
function onCheck(id:number) {
const deepCopy = todos.map((todo) => ({ ...todo }));
const newTodos = deepCopy.map((todo) => {
if (todo.id === id) {
// クリックする度に、booleanの値を反転する(!で)
todo.isDone = !todo.isDone;
}
return todo
});
// boolean反転させた結果で、再作成
setTodos(newTodos);
}
return (
<div>
<h1>todos</h1>
{/* リロードを防ぐために、イベントオブジェクトを渡す */}
<form onSubmit={(e) => {onSubmit(e)}}>
{/* 入力された値をstateに保存する */}
<input type="text" value={text} onChange={onChange} />
{/* 送信ボタンを押したら、todosに新しいtodoを追加する */}
<button type='submit' onClick={() => onSubmit}>送信</button>
</form>
<div>
<ul>
{/* 登録されているtodosを展開する */}
{todos.map((todo) => {
return <li key={todo.id} className={todo.isDone ? classes.done : ""}>
<input type="checkbox" onClick={() => onCheck(todo.id)} />
{todo.text}
{/* 削除ボタンを押した時に、todoのidを渡す事で特定出来るようにし、spliceメソッドで削除する */}
<button type="submit" onClick={() => onDelete(todo.id)}>削除</button>
</li>
})}
</ul>
</div>
</div>
)
}
todos-app/styles/Index.module.css
.done{
text-decoration: line-through;
}
参考文献
めちゃくちゃオススメです！
React & TypeScriptを学ぶのに最適です！
初心者に本当におすすめ
じゃけぇ本
めちゃくちゃわかりやすいtodoアプリの作り方。
参考にさせていただきました(1000円払わなくても、途中までは出来ます)
reactでtodoを学ぶなら本当におすすめのzennの記事
udemyで超おすすめのjs講座
udemyで超おすすめのreact講座
js自体をちゃんと学ぶのも大事だと思うので、この本をオススメします
今後
色々消化不良なので、もう少し色々修正して記事を出します