こんにちは、フロントエンドチームの @syo_igarashi です。
今週のフロントエンド定例の内容を記載します。
フロントエンド定例について、以前の記事（ランサーズのフロントエンドチームが取り組んでいること）でお伝えしたのですが、毎週金曜日に開催しており、実際の業務で取り組んでいることや気になった技術情報等をシェアしあう会になっています。
以下、今週の内容です。
Lintルール増やした
border-radiusのルール追加
ほぼ前回のmargin, paddingの設定のようですがborder-radiusもルール追加しました
opacityのルール追加
こちらも同様に追加してます。
box-shadowのルール追加
こちらも同様に追加してます。
font-sizeのルール追加
こちらはCSS in JS(ESLint)とSass(Stylelint)でCSS in JSならReactなのでTextコンポーネントによる文字サイズ指定でよさそうなのでそれぞれ異なるルールを追加してます。
ESLint
Stylelint
JSXのCSSプロパティ指定でCSSの上書きをさせるようなルール追加
CSS in JS上の変数適応はCSSの属性を含めた形でも適応可能ですがその場合、変数としてデザインシステムに反してないものなのか検知が難しく、CSSの見る範囲が大きくなる場合があります。
変数の適応はCSSの属性に対しての値のみにし、どうしてもCSSの上書きを行いたい場合はJSX上のCSSプロパティ上で上書きすれば良いかなというルールにしました。
若干LintファーストなルールですがLintが書きやすいとレビュー自体もしやすくなるのかなという気もします。
素のSassファイルも徐々にデザインシステムの変数を使用するようにします。
Datadogアラートの見方
Slack通知させるためのモニターの設定について前回の
Datadogのモニター分けた NodeJSバージョンアップした イベント発火とstate更新順 loading処理の難しさ フロントエンド定例 2022/7/15
で話をしたので省略します。
Slack通知が細かくアラートするようになりました。
通知が来たらタイトルのリンクを開いて
Status & Historyにある「Open in a notebook」を開き、エラーの内容を確認するようにお願いします。
ビルドファイルのデグレが起こりえるパターン
NodeJSのバージョンアップの対応も終わったのでフロントエンドをそろそろCIビルドするか検討していました。雑感をメモとして記載します。
異なるブランチでの同じファイル変更の場合はビルドファイルよりかはソースファイルでのコンフリクトでデグレに気づけそうです。
この場合でのビルドファイルはCI経由にそれぞれの環境にデプロイしていく方針の方がリリース速度が上がりそうでよさそうです。
懸念としてあるのが異なるブランチで異なるファイルの変更だけどビルドファイルがコンフリクトするパターンで、例えばCSSの上書きするような対応を片方したとき、CSSの適応優先度が異なる記載をそれぞれのブランチでやっていたらビルドファイルのコンフリクトがないことでそのままリリースしてしまうことはありえそうという気はしています。
シンプルなJavaScriptの処理のみだったらある意味PHPのコンフリクト解消と同様な認識で対応できるというのはあるかもしれません。
次回の更新予定は、7/29（金）になります！
前回の定例内容はこちらから確認可能ですのでご興味いただければ下記のリンクから閲覧いただければと思います。