個人開発者向けのサービスの開発記録 #30 20240214

本日の作業

ちょっと仕事の方で画面実装を進めないといけないので個人開発の進捗は少なし。

• Remix + react-i18nextでHydration Errorが起こっていたので調査・対応

  Error: Hydration failed because the initial UI does not match what was rendered on the server.

• 分報に関する設計・実装

  • 🚴 Model・Repository実装

  • UseCase Hooksと結合実装

Remix + react-i18nextでのHydorationについて

原因

• 翻訳リソースファイルがi18next-http-backendで非同期で読まれるところが、読み込みが完了する前に画面のレンダリングが終わってしまうことに問題がある模様。

対策

• react-i18nextがRemixでの利用についてベストプラティクスを提示しているのでこの辺参考にしておけば良さそうだが、おそらくこのままだとVercelなどのEdge Functions環境下では実行できない。

  GitHub - locize/locize-remix-i18next-example: simple example of how to use remix-i18next with remix …

  github.com

• Serverless Functionsで翻訳リソースを読み込んでAPIで返すみたくすれば良い。

  • 今今そんなに本格的に多言語化するわけでもないのにそこに時間をかけるのは馬鹿馬鹿しいので一旦普通にimportしてbundleに含める一番簡単な方法で解決した。つまりアトでやる。

• 参考

  React 18 : Hydration failed because the initial UI does not match what was rendered on the server. ·…

  github.com

そのほか、メモ

• cvaを使ったvariantの記述例。子要素はdata属性でやったけどいい方法ないもんだろうか？まぁcvaの責務的にはそこは別の何かでってことだろうけど。そしてそれやり出すとtailwindcssの意味が…。

  Ray.so - Create beautiful images of your code

  ray.so

• サービス名を考えてみた。ちなみにちょっとした造語というかある単語の組み合わせなのでドメインはガラ空きなんでも取り放題だった。なのでドメイン取ってサービスリリース見えてきたら公開します（ワンチャン悪意で商標取られても嫌なので）。

  • てか、商標って個人開発でも取るものなんだろうか？

  • 仮に商標登録する場合にかかるコストと手間

    • 手間

      商標審査官が教えます商標出願ってどうやるの～これでわたしたちも商標登録！～

      www.jpo.go.jp

    • コスト

      産業財産権関係料金一覧 | 経済産業省 特許庁

      www.jpo.go.jp

← #29　#31 →