manasblog
eyecatch

2021/8/30 9:51 

ブログアプデ - 2021/08/30

概要

  • 個別ページを整備
  • OGP設定
  • コンポーネント化、CSSを分割整理とか

詳細

個別ページ

  • 元からあったけど、前回のアプデ時にトップページのタイトルから個別ページに行くリンクを外してしまったので、リンクを戻す。
  • 見た目がデフォ + トップへ戻る方法がなかったので調整
    • before
    • after

OGP設定

コンポーネント化

  • 個別ページ整備の時に、個別ページとindexで共通のパーツが増えてきたのでコンポーネント化
  • CSSがだいぶ増えてきたのでcss in jsを導入しようと思ったけれど、Zennの開発者のCatNosesさんのスクラップとかを見て.module.scssと対応する.tsxを同じディレクトリにいれて整理する運用にした。
    • ↓こういうかんじ。


CSSの運用を考える上で考えたこと

  • 最初はcss in js(styled-componentとemotion)化を検討
    • Reactといったらcss in js、ってイメージ。
    • 実装見てみたら、cssが1つ1つで独立する感じの印象。現状既にrelative/absoluteを利用しているCSSがあるので、そこのscssなら見える階層関係が見えなくなってしまうのがちょっと不安要素だなあと思った
    • + もともとVue.jsに比べてHTMLとCSSがごちゃってしまう懸念はしてた
  • Zennを開発してるCatNoseさんのスクラップ『Next.jsにCSS Modulesを導入する』をみて、styled-componentはパフォーマンス上のデメリットもあるのか!!とわかってCSS Modulesのままを決意
    • おそらくcss in js(styled-components)は1つのコンポーネントを作るのにCSSとHTMLを行き来しなきゃいけないしんどさの解消のために生まれたものだと思うのだが、私は逆に『HTMLとCSSが混ざるのは嫌』で、『HTMLとCSSが分離してる環境に慣れている』ので、パフォーマンスデメリットのあるならstyled-componentsをわざわざ導入する理由はかなり薄いかなあ、と思う。
  • 前述のスクラップではstyleディレクトリをコンポーネントディレクトリと同じ構造にしてるが、上の画像の通りコンポーネントディレクトリ内が結構細かいパーツで区切っているので、パーツごとのディレクトリにtsxと一緒に格納にした。
    • Vue.jsならば1ファイルになるのを2ファイルになってしまっているわけだが、Vue.jsでは『スタイルだけ切り出す』ということが結構困難なので『ロジックは違うけどスタイルは同じ』なのはすごい良い。


2021/09/23追記

  • CSS Modules、メンテナンスオンリーなのを知ってその後emotionに以降しました。コンポーネントガッツリわけていたおかげで結構簡単でよかった。