タスク管理ツールをReact + ASP.Coreで作る 01コンセプト検討

概要

プログラミングの勉強も兼ねて、自作しているアプリについてここに記録していこうと思います。
(正確には2022年4月ごろからもっと行き当たりばったりに進めていたのですが、流れを整理しながら「もっとちゃんとやるならこんな風か?」という感じで書いています。)

index

作ろうとしているもの

簡易的なタスク管理ツール。
Webアプリ構築の勉強と実益を兼ねて作ろうと思っています。

現状の完成度

(記事No 32終了時点)

基本要件

タスク管理をするためのWebアプリケーション。

どんなことがしたいか

• タスクをリストで管理できる
• 進捗を管理できる
• 認証管理し、ログインしたユーザーのみ編集・閲覧を可能にする

アーキテクチャ

• フロントエンド：React
• その他主要なライブラリなど
  • Formik : (入力フォーム類)
  • Yup: (値検証)
  • react-datepicker:(日付入力)
  • Bootstrap：(スタイリング)
  • Axios：(サーバーサイドとの通信)
  • react-router-dom：URL処理
  • react-toastify：(通知類)
• バックエンド：ASP.NET Core + Sql Server

上記のアーキテクチャにした理由ですが、私がASP.NET MVCでの開発経験が多少あること、バックエンドがASPなら社内システムを作る際にも応用出来る技術が習得できそうなこと、Reactが分かれば世間のトレンドを相当キャッチアップできそうだと思ったことなどが背景です。

画面イメージ

主要な操作で使用する画面イメージは以下の感じです。(ここからまた、ユーザー登録とかマスタ編集などで色々増えていくとは思います)
①ログイン前の画面、②ログイン後のタスクのリストを表示する画面、③ログイン後のタスクの詳細を表示・編集する画面の3つです。
②と③は画面が遷移するというより、詳細ウインドウがタスクを選択しているかどうかに従って出てきたり隠れたりするようにしたいので、実質1画面で基本動作を完結させたいという意図です。

画面遷移とURL

まとめ

今回はここまでです。
次回に続きます