TTRN-678: Viteによる書き直し・リファクタ

[3c1u]

Close TTRN-678.

概要

注意: 問題の修正が必要なので、コードが問題なさそうならまたDraftに戻します。

• create-react-app から Vite でのビルドへの見直し
• デザインリニューアルに伴う再実装
• ロジックをReduxに分離
• ディレクトリ構造の整理
  • pages/ がルーティングとほぼ一致する形になるよう変更
  • Next.js等に移植しても変更が最小限になるようにする
• 一般的なコーディングスタイルの適用
  • formの送信をonSubmitでハンドリング
  • inputをすべてcontrolledに
  • フォーム要素のlabel/id対応付け
  • 一部機能のコンポーネント化

補足事項

• よくあるReact + Reduxのコードを想定
  • Redux （redux-toolkit）でロジックを書いているので、ユーザのスキルによっては読むのが難しいかもしれない
  • ↑実務ならこれくらいの分離度は普通かな...？などと思っている
  • redux-toolkit の悪いところ（redux-thunkの無駄なwrapによるエラーハンドリングの難しさ）をもろに受けているので、剥がしてしまうのも一つ
  • 行数も増えているので、認知負荷が高くなっている可能性もある
• CSSスタイリングにはBEM（っぽいやつ）を採用
  • 普段BEMは使わないので、用法としてマズそうならご指摘お願いします
• CSSはかなり冗長
  • コンポーネント化で済む部分も多いが、コンポーネント分けは最小限にやっている
  • 色などは変数化してあるが、ユーザには馴染みがないかもしれない？
• TaskCreateForm はやや難しいかもしれない
  • UIステートが別れているのと、DOMが絡む処理を含んでいる

コード量比較

BEFORE

      12 src/App.js
       8 src/App.test.js
      23 src/authSlice.js
      24 src/components/Header.jsx
       0 src/const.js
      22 src/index.js
      77 src/pages/EditList.jsx
      93 src/pages/EditTask.jsx
     147 src/pages/Home.jsx
      46 src/pages/NewList.jsx
      76 src/pages/NewTask.jsx
       6 src/pages/NotFound.jsx
      52 src/pages/SignIn.jsx
      60 src/pages/SignUp.jsx
      13 src/reportWebVitals.js
      36 src/routes/Router.jsx
       5 src/setupTests.js
       7 src/store.js
     707 total

AFTER

      20 src/App.jsx
      15 src/components/BackButton.jsx
      84 src/components/Sidebar.jsx
     167 src/components/TaskCreateForm.jsx
      59 src/components/TaskItem.jsx
      27 src/hooks/useLogin.js
      18 src/hooks/useLogout.js
      27 src/hooks/useSignup.js
      11 src/icons/CheckIcon.jsx
      11 src/icons/ChevronIcon.jsx
      13 src/icons/ListIcon.jsx
      11 src/icons/PencilIcon.jsx
      13 src/icons/PlusIcon.jsx
      26 src/index.jsx
       7 src/pages/404.jsx
      25 src/pages/index.page.jsx
      72 src/pages/list/new/index.page.jsx
     115 src/pages/lists/[listId]/edit/index.page.jsx
      64 src/pages/lists/[listId]/index.page.jsx
     146 src/pages/lists/[listId]/tasks/[taskId]/index.page.jsx
      84 src/pages/signin/index.page.jsx
      96 src/pages/signup/index.page.jsx
      44 src/routes/Router.jsx
     109 src/store/auth/index.js
      12 src/store/index.js
     133 src/store/list/index.js
     159 src/store/task/index.js
      17 src/utils/handleThunkError.js
      30 src/vendor/axios.js
      15 vite.config.js
    1630 total

[sugitlab]

ask: Station1ではライブラリのバージョンアップを実施する内容になっており、その対象は React と React-router としてある。問題文を変更する想定か、package.jsonをあとで変更する想定か確認したいです。

[sugitlab]

memo:

CSSスタイリングにはBEM（っぽいやつ）を採用
色などは変数化してあるが、ユーザには馴染みがないかもしれない？

ここまでのRailwayでBEMもSaSSも扱ってるので大丈夫だと思います!! 💯

[sugitlab]

ask: station2で eslint, prettier の導入があるのであとではずす想定かなと理解してます。

[3c1u]

他が問題なさそうならインデントをわざと崩した後に除去する予定です

[3c1u]

その対象は React と React-router としてある

明確に指定してあるなら落とした方が良さそうですね...（もしかするとReact 18のcreateRoot対応とreact-router v5→v6のAPI変更を意図していたりする...？）落としておきます