本日(4/23)の作業
今日の作業は日報作成画面のデザインと実装、あとロゴのバランス調整などやってました。と言っても見せれる段階にはないのでまた明日以降に。
あとは仕事の方でFirebase AuthenticationでSafari/Firefox(まもなくChromeも)とドメイン跨ぐCookieへのアクセス問題でsignInWithRedirectが使えない問題が判明したのでその対応などやってました。
あとは、PLOP(turborepo使っているので turbo gen)のプロンプトとアクションをFeature-Sliced Design向けに最適化しました。
✅ Feature-Sliced Design向けにPLOPのコンフィグとテンプレを調整
🚴 日報の画面設計・実装
🚴 設計
🚴 実装
サインインの実装
認証画面実装
認証ロジック実装(主にClient側)
Server側の認証チェック実装
Client側の認証チェック実装
Feature-Sliced Design向けのPLOP
Feature-Sliced DesignはLayerを「pages/widgets/features/entities/shared」という粒度と関心事で区分する主にView層のアーキテクチャです。
特にfeatures/entities/sharedは以下の役割を持っているものです。
entities ─ ドメインモデリングを経て定義されたデータをUIとして表現するオブジェクトのレイヤー。例えば認証とかユーザとかそういう単位。
features ─ 複数または単数のentitiesを機能的な単位でまとめる必要がある時に使うレイヤー。例えばサインインフォームとかサインアップフォームとかユーザプロフィール変更フォームとか。
shared ─ UIパーツ群。ドメインに関係なくAtomic DesignでいうところのMoleculesやAtomsに相当。再利用性やドメイン知識の無い小さい単位のもの。
また各レイヤーはSlicesというものがあります。例えばentitiesだとAPI Client/View Model/Controller/View Componentというものです。
しかし、自分の場合はクライアントサイドのビジネスロジックをOOP DDD + Repositoryパターンで表現しており、Gateway関数(APIやPrisma、外部SDKやLocal Storageなどなど)という外部データ層とのやり取りの細かい単位での関数群としているためAPI Client/View Model/Controllerという部分にあまりロジックは置きません。特にビジネスロジックは。
その代わり、Viewとして必要なロジックやRepositoryとのやり取りはHooksにuseDomainとして集約し(その中で使う細かいHooksやUtilityは別ファイルに切り出してます)、Compound Patternを使ってルートに必要であればContextを置いて配下の要素を適当に分割したコンポーネントを持たせています(下のリンクにtreeでまとめてみました)。
で、それぞれVitestのテストファイルとStoryBookのファイルをturbo genで生成できるようにしています。※この生成はUI層のみでやってます。ビジネスロジック層はお決まりファイルを作るとモデリングが思考停止してしまうのでやってません。
長いのでimage 2 codeのリンクだけ貼っときます。
今日やったのはウィザードで前のプロンプトで以降のプロンプトで分岐したり、アクションで吐き出すパスを分岐したりなどです。
その他、メモなど
Firebase AuthenticationのCookie
以前にFirebase AuthのSSO認証実装したの2年くらい前だったからかこんなことなってるの知らなかった。そして案の定ハマった。仕事の方でしかFirebaseは使っていないもののおそらくこれは他の認証サービスでも同じ問題になるはず。
尚、signInWithRedirectの実装で進めるにはいくつか手を加える必要がある。
なるべくコストをかけずに対応するには次の3つか。
実装から変えるパターン
signInWithPopupに変える
自分でSSOのトークン取ってきてsignInWithCredentialにする
Firebase Hostingを使っている場合
一番楽だけど、Firebase Hostingを使っていることが条件になる。ただし、別にアプリケーションのインフラをFirebase Hostingにする必要はなく、ドメインのDNSを向けておけば良い。自分の場合はCloudflareでドメインを管理しており、Cloud RunにRemixを置いていてGoogleのカスタムマッピングだとレイテンシがあるのでドメインマッピングの代わりにFirebase Hostingを経由していたのでこれができるぽい(まだやってないのでできるか知らないけどChat GPT的にはできるとのこと)。
4/24 追記)
Firebase Hostingパターンをlocalhostで実現しようとするとSSLの問題でうまくいかない。解決方法は調べてみたが見つからず。
おそらくlocalhostにSSL証明書を発行するのは間違いなさそう(ただちょっと面倒くさい)。とりあえずはSafari, FireFoxだけ今は問題なので先に進めないといけない実装を進めて後で対応する予定です。このlocalhostのSSL化がダメそうならsignInWithCredentialにする必要がある。signInWithPopupはできればユーザビリティやブラウザのポップアップブロックなどの兼ね合いで良く無いので使いたくない。