概要
Reactの学習目的でシンプルなタスク管理アプリを作成しました。
記事投稿時点では改善点まだまだありますが、最低限の動作はできたので記事にまとめました。
今後改善したい点はissueにあります。
サンプルURL
https://react-simple-todo-app-2023-mui.back-of-flyers.com
Github
https://github.com/nakajima97/react-simple-todo-app-2023-mui
アプリ概要
このアプリの一連の機能を試したGifが以下の通りです。
機能を一覧にすると以下の通りです。
- タスクの追加
- タスクの完了
- 完了したタスクの確認
- 追加したタスクと完了したタスクの削除
タスクの永続化はlocalStorageを使っています。
React単体で動作するアプリにしたかったため、JavaScriptで簡単に扱えるlocalStorageを採用しました。
設計
ディレクトリ構成
以下のようなディレクトリ構造です。
.
├── assets
├── components
│ ├── atoms
│ ├── ecosystems
│ ├── environments
│ ├── molecules
│ ├── organisms
│ └── templates
├── domains
│ ├── api
│ └── types
├── features
├── hooks
├── providers
├── routes
├── stores
├── types
└── utilsディレクトリ構造は以下書籍に記載されているものを参考にしております。
記事投稿時点ではroutesとcomponentsしか使っていないのでこれらのディレクトリの説明だけします。
routes
ルーティングを記載するファイルが配置されるディレクトリです。
今回ルーティングにはreact-router-domを使っています。
index.tsx を作成し、そこにルーティングを記載しています。
import { Routes, Route } from 'react-router-dom';
import ConfigPage from '../components/environments/ConfigPage/ConfigPage';
import FinishTasksBoard from '../components/environments/FinishTasksBoard/FinishTasksBoard';
import TasksBoard from '../components/environments/TasksBoard/TasksBoard';
const IndexRoutes = (): JSX.Element => (
<Routes>
<Route path="/" element={<TasksBoard />} />
<Route path="finish" element={<FinishTasksBoard />} />
<Route path="config" element={<ConfigPage />} />
</Routes>
);
export default IndexRoutes;components
atomic designがベースとなっております。
純粋なatomic designとの違いは以下の通りです。
– pagesを削除
– TemplatesとOrganismsをPresentational ComponentとContainer Componentに分けた
Templates
– Presentational Component: templates
– Container Component: environments
Organisms
– Presentational Component: organisms
– Container Component: ecosystems
感想
新しい言語・フレームワークを学ぶ際に自分は良く今回のようなタスク管理アプリを開発します。
開発するたびに思うのですが、こんなシンプルなアプリでもこだわろうと思えば、こだわるポイントどんどん出てくるので面白いです。
Follow me!
コメント