スマホ版の実装をはじめた。styled-jsx で各コンポーネントごとに CSS が書いてあるから Media Query もそれぞれにかかないといけないのだがブレイクポイントを直接書いちゃうとあとで調整必要になったときに大変面倒なことになるのでじゃあ CSS var にいれといて参照すればいいかと思ったら @media には var つかえない仕様らしく postcss でうまいことやらにゃいかんということろまでは割とすぐ理解したのだがそっから styled-jsx-plugin-postcss にたどり着くまでに半日ぐらいあーでもないこーでもないやっていた。そして別方面で react-responsive を使う必要がでてきたのだがこれはなんか挙動がおかしいくて難航中。むずい。
Next.js は SSG + React が基本なので react-responsive で media query で違うコンポーネントをマウントするとサーバーサイドでのレンダリングとブラウザで hydrate されたときの構造が違う～ってエラーが出るだけならまだしも謎に違うコンポーネントが差し替えられたりして HTML がグチャグチャになる現象にひっかかったのと mix-blend-mode が下の要素が fixed だと反映されないっていうことに気づくまでにまたしても結構時間をとられなかなか進まない。
Clubhouse は 100 人以上いるルームとかだとあんま気にせずふらっと入って聞けるけど 5 人とかだとこっちの存在がバレるのではいりづらいなーってところで 50 人ぐらいのよくわかんないルームがリストされてたからまーこれぐらいならと思って入って数分ないようよくわからずに適当に流してきいてたら「あ・・・すごいエンジニアの方が・・・」って言い出してまさかねーって思ってたら「さくーしゃっていう」みたいに言い出してえーこの中の誰もしらんけど・・・と思ってたらなんか通知きて慌ててタップしたら別のルームに入ってしまって結局誰が僕のこと知ってたのかわからんままっていう。
