2021.01.27
React エフェクト実装はほぼほぼ完了したので他のこまかーいところに手がつけられるようになってきたのでそろそろ最適化フェーズ。Next.js の next/image とか font optimization とか試したくなってきたけど先にスマホ版かなー。次のプロジェクトが詰まってるのでサクッと終わらせたいけどそうもいかなそう。人見知りで寡黙なわたしには Clubhouse は 100 年早かった。
React エフェクト実装はほぼほぼ完了したので他のこまかーいところに手がつけられるようになってきたのでそろそろ最適化フェーズ。Next.js の next/image とか font optimization とか試したくなってきたけど先にスマホ版かなー。次のプロジェクトが詰まってるのでサクッと終わらせたいけどそうもいかなそう。人見知りで寡黙なわたしには Clubhouse は 100 年早かった。
スマホ版の実装をはじめた。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 だと反映されないっていうことに気づくまでにまたしても結構時間をとられなかなか進まない。