ドロップダウンUIで、以下の3点から選択可能にする

• システム設定を使用する
• ライトモード
• ダークモード

https://github.com/pacocoursey/next-themes が使えるか調査

Jest + React Testing Library で実装する

Tailwind CSSメインでスタイリングをしているので不要

ページ遷移やリロードを挟んだ場合でも、過去の投稿を保持できるようにしておきたい。

• #4 の完了後に着手したほうが良い
• https://swr.vercel.app/ja/docs/advanced/cache#localstorage-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E6%B0%B8%E7%B6%9A%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5 を参照して実装
• useUserはイミュータブルとしているが、再読み込みするようにしたほうが良い

ページ読み込み時、1ページ目の読み込みが何回も行われてしまっている。

エンドポイント: /text/all?$orderby=_created_at desc&$limit=15&$skip=0

原因箇所は以下

  // 新規投稿が溜まった場合は1ページに戻し、再読み込みをかける
  useEffect(() => {
    void (async () => {
      if (newTexts.isTooManyTexts) {
        await oldTexts.setSize(1);
        await oldTexts.mutate();
      }
    })();
  }, [newTexts.isTooManyTexts, oldTexts]);

投稿一覧をロードしている状態がわかるようにする。
バックエンドの読み込み時間が長いことがあるため、それも説明できると尚良い。

スマホで表示したとき、投稿の時間表示が改行されて2段になっている。
原因を特定し、1段で表示できるように修正する。

• React Hook Form を使ったほうが良い。(公式ページが丁寧なので、キャッチアップ簡単)
• バリデーション実装前にバックエンドの境界値・不正値を確認しておく

https://github.com/AKIRA-MIYAKE/applicational-atomic-design-for-nextjs を参考に設計する。
本来はpagesのみでステートを持ち、propsバケツリレーで下位コンポーネントに流したほうが良いのだろうが、SWRの設計**と合わない。
そのため、Organisms以上でグローバル値にアクセスできるようにする。

• Atoms: HTMLタグに対応するもの, 論理的に一つの要素といえるもの
• Molecules: Atomsを組み合わせたもの, 論理的に複数の要素で構成されたもの
• Organisms: フックやコンテキストなどグローバル値にアクセスする要素(Moleculesのラッパーもここ)
• Templates: IndexとUserPageの共通部分をまとめる
• Pages: Next.jsのpagesディレクトリに対応

独自ドメインを適用したあと、以下の場所の記述を書き換える

• README
• リポジトリのAbout欄
• その他、デプロイURLを参照している外部ページなど

レンダリングコストを削減したい。
しかし、現状で処理の重たい箇所は見当たらないので、優先度の高いタスクではない。

• React.memo
• useCallback
• (useMemo)

参考になりそうな文献

• なぜReactは標準でComponentをmemo化しないのか？ https://zenn.dev/taroro28/articles/3bec0f3f4711e9
• React Developer Toolsでレンダリングを可視化する https://dev.classmethod.jp/articles/react-developer-tools/
• なんとなくでやらないReact.memo戦略 https://zenn.dev/bom_shibuya/articles/b07da034fc5686

現在のESLintのルールでは、propsのデフォルト値を設定するときにdefaultPropsを使うようになっている。
しかし、関数コンポーネント + TypeScriptで書いている場合は、これを使うのは不適切に思える。

参考文献

• ルール説明: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-default-props.md
• jsx-eslint/eslint-plugin-react#2396
• iamturns/eslint-config-airbnb-typescript#203

ルートディレクトリが混雑してきたので、移動できるソースファイルはsrcディレクトリに移動する。

移動対象

• components
• hooks
• lib
• pages
• styles

移動できないもの

• 設定ファイル
• public

移動にあたって、設定ファイルを見直す必要があるか確認する。(Tailwind CSSなど)

参考文献

• https://nextjs.org/docs/advanced-features/src-directory
• https://www.tanipu-blog.com/blog/nextjs-src-directory

CC-BYライセンスなど、著作権表示が必要なパッケージに依存しているかも。
React Icons は別プロジェクトに依存しているので要確認。
また、GPLなどのコピーレフトも確認する。

https://tech.kusuwada.com/entry/2019/02/06/114228

結論

Chakra UIには移行しないことにした。

メリット

• 型保護されている
• a11yの観点では、daisyUIよりキレイ
• 便利Hooksなどをはじめ、機能が豊富

デメリット

• daisyUI には semantic color names が用意されていて、これがコンポーネントの着色やダークモードを実装においてかなり便利なので、これを手放したくない
• 独自コンポーネントを使うので、a11y関係のESLintルールが効きづらいかも

タスク

• Chakra UI をインストール
• daisyUIのダークモードを無効化
• ESLintルールを導入
• 部品をChakra UIで置き換える
• daisyUIをアンインストール
• Lintルールを修正
• READMEを編集する