自分用ダッシュボード、My-Todo-NoteをReactで作成する
2021 年のアウトプット用に自分用のダッシュボードを新たに作成することにしました。日常で思いついたちょっと欲しい機能、技術的にやってみたいことを中心に実装していく予定です。また、その作成手順を書き、React で何か作る時に参考になる記事を同時に作れたら良いなと思ったので、そうすることにしました。
作成するダッシュボード名は My Todo Note。名前があった方がモチベーションが上がるので付けましたが英語のニュアンスがおかしかったり、気に入らなければ途中で変えるかもしれません。
React を使う上で参考になるところがあれば
React で何か作りたいけど何して良いかわからない人の助けになれば嬉しいこと、技術用に作成した Crudzoo が買い物ブログになりかけているので IT エンジニアっぽい内容の記事を増やしたいところにあります。
しかし、正解ではありません
React で何かを作る際に普遍的な正しい作り方なんてものはないと考えています。この一連のシリーズで書く記事は、一般的とは思えないもの、人によっては非効率で我慢ならないところもあるかもしれません。ただ、間違っているか、正しいかという基準ではなく自分にとって役立ちそうかで記事を読むか判断していただけたら嬉しいです。
また、使い慣れているものだけでなく使い慣れたいものも使うため、初心者っぽい記述が目立つかもしれません。
使用するライブラリなど
大きくは下記の構成で作成します。認証はある程度形になるまで後回し、実装する際も自分では作らずに Auth0 か firebase を利用すると思います。データベースは firebase の firestore をまずは使用する予定です。通常の DB を使うと月 1000 円〜となるので必要になるまでは無料で使えるものにします。
SSR はせず、普通の SPA で作成します。
- React
- TypeScript
- Webpack
- css-module
- sass
- Storybook
- Codecept 及び playwright、webdriver など
Webpack の設定は Create React App を使わず自分で書きます。自分の勉強のためです。
React で UI 作成 というと styled-components や emotion といったライブラリが優れていますが、2021 年 2 月時点のマイブームが、 React に依存した技術ではない sass や css-module なので今回はこれらを使うことにしました。
Codecept 及び Storybook は E2E のビジュアルレグレッションテスト用です。これは仕事でも使いたいのでモックがてら選定しています。
開発用リポジトリ
My-Todo-Note は次のリポジトリで管理しています。
Webpack 設定編へ続く
以上前置きの記事でした。次の記事では開発環境の構築のため Webpack の設定を行います。