React・TypeScriptでTodoアプリを作成しよう
もっとフロントエンド技術を磨いてユーザーの満足度を高めたい初心者の方に向けてチュートリアルを作成しました。
近年ではクライアントデバイスの性能向上によってユーザー体験の充実やサーバーの負荷を軽減させるなどが課題になっています。
Webアプリ開発でフロントエンドの技術は必須となりますのでこれを機にフロントエンド開発の方法を身につけましょう！
Reactとは？
Meta社（旧 Facebook）によって開発されたJavaScriptライブラリで、UI（ユーザーインターフェース）を構築するための強力なツールです。
世界中で数多く採用されていて、ウェブアプリケーションを効率的かつ柔軟に構築できます。
Reactを使うメリット3選
仮想DOMで高性能なUIを更新できる
Reactで以下のように仮想DOM（Virtual DOM）を使用することでUIを効率的に更新できます。
コンポーネント（画面の一部）の状態が変更される
仮想DOMで新しいUIを生成し、実際のDOMと比較して変更点を特定する
特定箇所のみDOM操作を実行する
このアプローチによってUIの更新が高速化します。
ユーザーがアプリケーションをスムーズに操作できるため、UX（ユーザーエクスペリエンス）が向上します。
画面を部品で構成できる
Reactはコンポーネントベースのアーキテクチャを採用しているのでUIを再利用可能な小さな部品に分割できます。
これによりコードが再利用性できるようになるのでメンテナンスしやすくなります。
また、複雑な画面を作るときにコンポーネントを組み合わせることで、コードが整理されて可読性が向上します。
サードパーティライブラリが豊富
Reactはツールやドキュメントが豊富にそろっているので開発しやすいです。
React Nativeと組み合わせてモバイルアプリケーションを開発したり、Next.jsでWebアプリを開発したりできます。
同じスキルセットでウェブとモバイルのアプリケーションを構築できます。
TypeScriptとは？
TypeScriptはMicrosoftが開発した静的型付け言語で、JavaScriptの上位互換言語です。
TypeScriptを使うメリット3選
JavaScriptに型を設定できる
TypeScriptは変数、関数、オブジェクトを静的型付けできます。これによってコンパイル時に型エラーを検出できるのでコードの品質が向上します。
型安全性が向上するため、ランタイムエラーを事前に防ぎ、信頼性の高いコードを作成できます。
開発効率が向上する
型付け言語全般に言えますが、自動的なコード補完、型チェック、リファクタリングのサポートをIDEやエディタが提供します。これによって開発者は効率的にコードを書けるようになり、デバッグしやすくなります。
大規模プロジェクトで使える
TypeScriptは大規模なアプリケーションやチームでの協力に特に適しています。型システムはコードベースをより理解しやすくし、メンテナンスを容易にします。また、型エイリアスやジェネリクスなどの高度な型機能を使用して、柔軟性と再利用性を高めることができます。
Todoアプリを作成しよう（準備）
新規フォルダを作成する
Todoアプリのフォルダを新規で作成します。
Desktop % mkdir react_ts_todo
cd react_ts_todoDockerの準備をする
Dockerで使用するファイルを作成します。
react_ts_todo % touch docker-compose.yml DockerfileDockerfileに以下のように記載します。
Dockerfile
---------------------------------------------------------------------------
FROM node:latest
WORKDIR /usr/src/appdocker-compose.ymlに以下のように記載します。
docker-compose.yml
---------------------------------------------------------------------------
version: "3"
services:
todo:
build: .
environment:
- NODE_ENV=development
volumes:
- ./:/usr/src/app
command: sh -c 'cd todo && npm start'
ports:
- 3000:3000Docker Desktopが起動していることを確認し、以下のコマンドを実行します。
react_ts_todo % docker-compose buildReactとTypeScriptのプロジェクトを作成する
以下のコマンドを実行してプロジェクトを作成します。
react_ts_todo % docker-compose run --rm todo sh -c 'npx create-react-app todo --template typescript'
Ok to proceed? (y) y以下のコマンドを実行してプロジェクトを起動します。
react_ts_todo % docker-compose up -dプロジェクトを起動してhttp://localhost:3000/ にアクセスするとアプリが起動することを確認します。
これでTodoアプリを作成する準備が完了しました。
Todoアプリを作成しよう（Todoアプリ作成）
ここからはいよいよTodoアプリを開発していきます。
今回はアプリ開発を中心に説明したいので、デザインはMUIを使用します。
MUIとは？
Material-UI（MUI）は、ReactベースのオープンソースのUIフレームワークで、GoogleのデザインガイドラインであるMaterial Designに基づいています。
美しく一貫性のあるユーザーフレンドリーなUIを簡単に構築できるのが特徴です。
事前設計されたコンポーネントライブラリとテーマシステムを提供してくれているのでカスタマイズや拡張がやりやすいです。
MUIをインストール
todo-1のコンテナに入ってMUIをインストールします。
react_ts_todo % docker exec -it react_ts_todo-todo-1 bash
root@ff65d6d8ed24:/usr/src/app#
root@ff65d6d8ed24:/usr/src/app# cd todo/
root@ff65d6d8ed24:/usr/src/app/todo# npm install @mui/material @mui/icons-material
root@ff65d6d8ed24:/usr/src/app/todo# npm install @emotion/react @emotion/styled
root@ff65d6d8ed24:/usr/src/app/todo# exitTodoコンポーネントを作成
コンポーネントを入れるフォルダを作成し、Todo.tsxファイルを作成します。
todo/src/components/Todo.tsx
---------------------------------------------------------------------------
import { useState } from "react";
import {
ListItem,
ListItemText,
ListItemSecondaryAction,
IconButton,
TextField
} from "@mui/material";
import { Delete, Edit } from "@mui/icons-material";
type TodoProps = {
text: string;
onDelete: () => void;
onUpdate: (newText: string) => void;
};
const Todo = ({ text, onDelete, onUpdate }: TodoProps) => {
const [isEditing, setIsEditing] = useState(false);
const [newText, setNewText] = useState(text);
const handleUpdate = () => {
onUpdate(newText);
setIsEditing(false);
};
return (
<ListItem>
{isEditing ? (
<TextField
value={newText}
onChange={(e) => setNewText(e.target.value)}
onBlur={handleUpdate}
autoFocus
/>
) : (
<>
<ListItemText primary={text} />
<ListItemSecondaryAction>
<IconButton
edge="end"
aria-label="Edit"
onClick={() => setIsEditing(true)}
color="primary"
>
<Edit />
</IconButton>
<IconButton
edge="end"
aria-label="Delete"
onClick={onDelete}
color="error"
>
<Delete />
</IconButton>
</ListItemSecondaryAction>
</>
)}
</ListItem>
);
};
export default Todo;
TodoList.tsxを作成し、Todoを表示させるコンポーネントを作成します。
todo/src/components/TodoList.tsx
---------------------------------------------------------------------------
import { useState } from "react";
import { List, TextField, Button, Box } from "@mui/material";
import Todo from "./Todo";
type TodoItem = {
text: string;
};
const TodoList = () => {
const [todos, setTodos] = useState<TodoItem[]>([]);
const [newTodoText, setNewTodoText] = useState("");
const addTodo = () => {
if (newTodoText.trim() !== "") {
setTodos([...todos, { text: newTodoText }]);
setNewTodoText("");
}
};
const deleteTodo = (index: number) => {
const newTodos = [...todos];
newTodos.splice(index, 1);
setTodos(newTodos);
};
const updateTodo = (index: number, newText: string) => {
const newTodos = [...todos];
newTodos[index].text = newText;
setTodos(newTodos);
};
return (
<>
<Box
display={"flex"}
sx={{ justifyContent: "space-between", alignItems: "center" }}
>
<Box>
<TextField
sx={{ width: 450 }}
label="新しいTodoを追加"
value={newTodoText}
size="small"
onChange={(e) => setNewTodoText(e.target.value)}
/>
</Box>
<Box>
<Button variant="contained" color="primary" onClick={addTodo}>
追加
</Button>
</Box>
</Box>
<List>
{todos.map((todo, index) => (
<Todo
key={index}
text={todo.text}
onDelete={() => deleteTodo(index)}
onUpdate={(newText) => updateTodo(index, newText)}
/>
))}
</List>
</>
);
};
export default TodoList;
App.tsxの内容を以下のように修正します。
todo/src/App.tsx
---------------------------------------------------------------------------
import { Container, Typography } from "@mui/material";
import TodoList from "./components/TodoList";
const App = () => {
return (
<Container maxWidth="sm">
<Typography variant="h4" align="center" gutterBottom>
Todo App
</Typography>
<TodoList />
</Container>
);
};
export default App;
エラーが起こった場合
コンポーネントの依存関係でエラーが出ることがあります。
その場合は以下のコマンドを実行して依存関係を構築し直してみてください。
react_ts_todo % docker exec -it react_ts_todo-todo-1 bash
root@ff65d6d8ed24:/usr/src/app# cd todo/
root@ff65d6d8ed24:/usr/src/app/todo# npm install @emotion/react @emotion/styled
root@ff65d6d8ed24:/usr/src/app/todo# rm -rf node_modules
root@ff65d6d8ed24:/usr/src/app/todo# npm installさらに学びたい方へ
ここまでReactとTypeScriptを使ってフロントエンド開発をしました。
現場ではReactのフレームワークであるNext.jsが使われることが多いです。
Next.jsはサーバー側でデータや画像を整形して行った後にブラウザへ送信するSSR（サーバーサイドレンダリング）やJavaScriptだけでHTMLコンテンツを作成するCSR（クライアントサイドレンダリング）をサポートしています。
このことで高速なページロードとSEO向上を提供します。
また、簡単なAPIルーティング、ホットリローディング、デフォルト設定、プラグイン拡張性など、開発効率を向上させるためのツールも提供されているのでモダンなWeb開発に欠かせない選択肢となっています。
本書はReact/Next.jsとTypeScriptを用いてWebアプリケーションを開発する入門書です。
Next.jsは高速さに裏付けされた高いUXと、開発しやすさを両立しているWebアプリケーションフレームワークです。
開発をより快適・堅牢にするTypeScriptを用いて、Next.jsの基礎、最新フロントエンドやWebアプリケーションの開発方法が学べます。
モダンなフロントエンド開発の手法を詳しく知りたい方におすすめです。
詳細はこちら
初級から中級エンジニアになりたい方へ
無料の講座である程度プログラミングができるようになったけど、もう少しプロのようなコードが書きたいと思うことはありませんか？
実はコードがかけるだけではエンジニアとしてはまだまだ未熟なんです。
エンジニアはコードを書くことのほかにチームで開発するためのコミュニケーション能力や作成するサービスの使い勝手を考えるUI/UXの構築、効率的なシステムを構築する設計能力などが必要です。
最近のエンジニアスクールはコードの書き方だけでなく、チーム開発を経験できたり近代的なポートフォリオの作り方を１から教えてくれるところが多くなりました。
ITエンジニアに就職したい大学生や未経験からエンジニアになりたい方はプロに教わりながらエンジニアになることをオススメします。
「チーム開発」も設計も教えてくれるスクールの詳細はこちら
未経験からのITエンジニア
IT技術の進化速度が速くなっていっている今、IT技術にアンテナを張っておくことはとても重要です。エンジニアになろうとしている方やそうではない方もITスキルを磨くことで問題解決能力や論理的思考を養うことができます。複雑な課題に対処し、効果的な解決策を見つける能力はどの職種でも重宝されます。
そこで、エンジニア未経験の時にあったらよかったなと思っていた講座をマガジンにまとめました！アプリの基礎がわかるTodoアプリの開発からGit&GitHubでのチーム開発までエンジニアに必要な知識が詰まっています！
エンジニアリングの第一歩として使ってみてください！
「売上げアップに効果的」なキャッチコピーやテキストを作成してくれる国内最大級の「AIコピーライティングツール」
【Catchy】
会議・ミーティングの内容をリアルタイムで文字に起こすAI自動文字起こしサービス
【Notta】
ブログの記事制作にかかる時間を1/10で制作できる高品質SEO記事生成AIツール
【Value AI Writer byGMO】
参考文献
サポートよろしくお願いいたします！ いただいたサポートの一部ははクリエイターとしての活動費に使わせていただきます！ ※ サポートの一部は子供たちの教育などの団体に寄付する予定です。