読者です 読者をやめる 読者になる 読者になる

hor.note

I hope so.

老舗プロダクトとリファクタリング

とあるプロジェクトで、老舗プロダクトのpostcss化を進めていくことになりました。つまりリファクタリング。秘伝のタレからより管理しやすいフロントエンドへと変えていきます。

リファクタリングといえば、昨年ペパボのフロントエンドスタンダードにも書かれているリファクタリングの方法があります。こちらはSCSSを用いていますが、流れとしてはこんな感じ。

  1. 既存の各 CSS ファイルを SCSS に変換する
  2. イニシャライズ CSS・レイアウト系の CSS を分離する
  3. CSSLint を使ってソースの整理する
  4. SCSS ファイルのコンパイル設定をする
  5. 各ページの CSS を個別に整理する

CSS 設計の長い夢 - ペパボのフロントエンドスタンダード

この方法でやろうと思ったのですが、秘伝のタレすぎてちょっと無理そうでした。なぜ無理そうだったのか、そしてどうやって回避していこうと画策しているのかについて書きます。

影響範囲がデカくない?

今回の改修に伴ってまず懸念されたのが、コードを書き換えることによって受ける影響の大きさでした。クラス名ひとつ変更するだけでもjsが動かなくなるとか、そのレベル。装飾と機能+計測がごっちゃになっていました。あと読み込んでいるCSSが置かれている場所も階層構造もバラバラ。

そのレベルでぐちゃぐちゃな場合、イニシャライズやレイアウトに関する変更を先に行ってしまうと、思いもよらなかったところで表示崩れなどの不具合が発生する可能性が高いのです。ひとつひとつclassやidやnameなどをgrepしてもバグを見逃す可能性があるわけです。

なので、今回僕らは大→小でなく、影響範囲をできるだけ狭くしながら進めていくアプローチを進めています。具体的には以下のような順番。(設計はFLOCSSで行っています。)

  1. postcss 形式の新規スタイルシートを作成
  2. 最小単位であるコンポーネント系やユーティリティ系から postcss で書き直し(※要接頭辞)
  3. 必要であればグローバルに使う変数や mixin などをファウンデーション系のスタイルシートに書き込む
  4. gulp でもろもろのタスクを実行しビルドする
  5. 出力された css を必要なファイルでのみ読み込む

以下繰り返しで徐々にレイアウトやイニシャライズに手をつけていき、最終的にはひとつのcss(allみたいなやつ)で管理するのがいいんじゃないかというところで練っています。

その他ポイント

既存のスタイルシートに限りなく影響が出ないように接頭辞をつけます。あとこれは好みが分かれるかと思いますが、個人的には接頭辞があることでパッとレイヤーとモジュールが把握できて意図しないカスケーディングを防げるので好き。

接頭辞を用いることで既存のレイヤーやモジュールに干渉できない上に、その postcss を使って書き出したスタイルシートを、必要なファイルでのみ読み込ませることでさらに安全にさせます。マークアップの方も変えてあげなければいけませんから、つまりこの方法は、ページごとの改修になります。最初のうちは冗長的になってしまうかもしれませんが、UIの崩壊が起こるよりマシ。configかなんかでまとめて管理してあげるとよいかも。

まだ始めたばかりなので、この手法の悪いところは運用しつつ見つけて改善していければなと思っています。闇に立ち向かうぞ。