Reactでそれっぽいタスク管理アプリ作ってみた

はじめに

• ポートフォリオとしてタスク管理アプリを作成しました。
• 成果物の紹介記事&記録用です。

作成した人（投稿時点）

• 開発をあまりしていない「ITエンジニア」
• 趣味は読書とゲーム
• 技術スキルを上げてみたい

目次

• 1.制作物概要
• 2.想定しているユーザー
• 3.特徴的な機能
• 4.機能一覧
• 5.使用技術
• 6.課題
• 7.所感

1.制作物概要

• 開発現場でプロジェクトと向き合うお仕事をしているとタスク管理のツールをよく使うことがあるけど、情報量（機能）が多すぎてわかりにくいと思うことがあったため、「シンプルなUIでわかりやすいタスク管理アプリを」と考えて作ってみました。
• シンプルに人のタスクを把握できて自分のタスクと全体の進捗状況をラフに把握できることを目的にしています。
• https://task-app-view.vercel.app/
  • Email:[e-mail]
  • パスワード：password

2.想定しているユーザー

• 何人かで複数のタスクを進めないといけないがあまり管理したくない人向け

3.特徴的な機能

• ユーザーログイン
  • 担当者単位でタスクを分担するためユーザーログイン機能を実装しました。

• タスク内容のマークダウン表示
  • タスク内容の表現を近代的にするためにマークダウン表示の対応させました。

• カンバンボード機能
  • タスクの移り変わりをビジュアル的にわかりやすくするためにカンバンボードの機能を実装しました。

• 自分に割り当てられているタスクの確認
  • なにをすればいいか一目でわかるようにホーム画面に自分に割り当てられたタスクの一覧を実装しました。

4.機能一覧

タスク関連

• タスク一覧の表示
  • 登録タスクの一覧の表示
  • 登録タスクのソート表示
  • 登録タスクのフィルター
• タスクの登録・削除
• タスクの編集
• タスク詳細のマークダウン表示
• 担当者・優先順位・ステータスでフィルター・ソートが可能

ユーザー情報関連

• ログイン
• ユーザーの登録
• ユーザー情報（ユーザー名・メールアドレス）の変更
• ユーザーパスワードの変更
• ユーザーの削除

データ関連

• 各データの追加・編集・削除
  • 優先度
  • ステータス
  • ユーザー（閲覧のみ）
  • プロジェクト

レスポンシブ対応

5.使用技術

フロントエンド

• React（18.3.1）
• typescript（4.9.5）
• vite（5.4.8）

バックエンド

• PHP （8.2.12）
• Laravel（11.21.0）
• MySQL（8.0）
• composer（2.7.8）

インフラ（開発環境）

• Docker（27.1.1）
• Docker compose（ v2.29.1）

バージョン管理

• git/github

CI/CD

• github actions

使用ツール

• vscode
• github copilot

技術選定理由

• 原則的な考え方として学習コストが低く、手早く動くものができそうなものを選定

  • 動かして改善・機能追加していけばいい
  • 基本は0から独学

• フロントエンド

  • React(JavaScriptフレームワーク)
    • コンポーネントでべースで疎結合に作りやすい（＝再利用しやすい）
    • コミュニティが多く困ったとき・やりたいことがでてきたときに前例が多い
  • typescript
    • 型付け可能なので認知負荷が低くわかりやすい
  • vite
    • ビルドスピードが速い

• バックエンド

  • Laravel（PHPフレームワーク）
    • 学習コストが低い（わかりやすい）
    • APIサーバーとして利用しやすい

デプロイ環境

• フロントエンド:vercel
  • コード：https://github.com/tarotarotaros/TaskAppView
• バックエンド:heroku
  • コード：https://github.com/tarotarotaros/TaskAppAPI

6.課題

• パフォーマンスが遅い
  • 実際に動かしてみて一番感じたこと、素朴なデータでも１秒近くかかる時があり、バックエンド側のAPIの設計をないがしろにしてはいけないと感じました。
• 技術的負債がたまっている
  • 実装まで手早くやることによってそれっぽいものはわりとすぐにできましたが、やはり似たようなコンポーネントを使いまわし切っていたなかったり、テストコードがかけていなかったり、

7.所感

• 意外に0から1にする部分が時間かかった、選定→学習→環境構築→実装の流れでやっても最低１週間はかかる、加えて実装上の判断（お約束的コード）に慣れるまで思っていたより時間がかかりました。
• ある程度進められて慣れてくると、今度は「最初こういう実装にしておけばよかった・・・」なんてこともざらにありました。
• Reactだと実装したい表現があってもドンピシャなライブラリがないようなときもあります。とはいえ、大体のことは表現できたし、ライブラリのおかげで手早く実装できました。フレームワークの良し悪しをそんなところで感じました。
• storybook使ってみたことで動作確認ははやく終わったり、想定通りの動作しなくてもコンポーネント単位で確認できたのでこれはこれで便利だなと感じました。