こんにちは、フロントエンドチームの @syo_igarashi です。
今週のフロントエンド定例の内容を記載します。
フロントエンド定例について、以前の記事（ランサーズのフロントエンドチームが取り組んでいること）でお伝えしたのですが、毎週金曜日に開催しており、実際の業務で取り組んでいることや気になった技術情報等をシェアしあう会になっています。
以下、今週の内容です。
Sassファイルの扱いが難しい
Sassファイルの入出力がわかりにくい
現状、SassファイルのCSSファイル出力が4パターンぐらいあり、
- ビルド前のファイルを管轄するfrontendディレクトリにあるpackage.json管理のnpm scriptによるSassコマンド経由に出力
- frontendディレクトリの別レポジトリ化も考えられるので一旦frontendディレクトリに移して後に静的ファイル置き場に置くパターン
- 今は外したがAutoprefixerをかけてから静的ファイル置き場に配信するやる方をとっていた名残なので直接sassコマンドの出力先を静的ファイル置き場にやっちゃっても良い
- コマンド内容
- sass frontend/input.scss frontend/dist/output.min.css
- cp frontend/dist/output.min.css [webroot|public|static]/dist/output.min.css
- CSSファイルとしてではなくctpファイルなどサーバサイドのテンプレートエンジンのファイルとして出力
- モバイルファーストとか考えるとCSSとして外部読み込みするよりstyleタグで読み込んだほうがパフォーマンスは上がるのでパフォーマンス重視の対応としてはわかる
- Sass構文上での@import によるSassファイル読み込みパターン
- ディレクトリ構造上でサブにあたる階層にあるSassファイルは直接Sassコマンドによるビルドで出力する場合が現状ないが初見の人にはちょっとわかりにくい
- Sassコマンドのinput/outputの仕組みとSassの@importを理解してどう1つのCSSを生成するのかというのが理解する必要がある
- frontendディレクトリの別レポジトリ化も考えられるので一旦frontendディレクトリに移して後に静的ファイル置き場に置くパターン
- frontendディレクトリじゃなくてwebrootにこっそりpackage.json置いてあってwebroot下でビルドするパターン
- LPとか部分的に対応してるページにありがち
- そっ閉じしてます
- （そこまで全体的に使用されているもんでもないし
パターンだけでこれだけあり、プラス画面数も多いので対象のSass/CSSの入出力の数も多いので苦しみがあったりします。
開発効率求めて極力入出力先を減らしたいのもありますが
前回の定例の谷さんの話でもあった
デベロッパーツールのカバレッジ機能について でもあったように1つにまとめ過ぎている部分があり分割中ではありますが理想として
- アプリケーション分離してビルド対象を分割する
- 自分は今のモノリスを解体派だったりしますね
- Cakeのバージョンアップの対応も部分的にアップして対応できるし
- フロントエンドも細かく対応しやすくなるし
- ソフトウェア開発的にライブラリ・API的に展開することに特化していることが前提なとこはある
- 自分は今のモノリスを解体派だったりしますね
- 共通のものを ライブラリ に吸収させる
のが理想なのかなと思ってます。
次回の更新予定は、7/1（金）になります！
前回の定例内容はこちらから確認可能ですのでご興味いただければ下記のリンクから閲覧いただければと思います。