ランサーズ(Lancers)エンジニアブログ > フロントエンド > フロントエンド定例 > Lintルール増やした Datadogアラートの見方 ビルドファイルのデグレが起こりえるパターン フロントエンド定例 2022/7/22

Lintルール増やした Datadogアラートの見方 ビルドファイルのデグレが起こりえるパターン フロントエンド定例 2022/7/22

blog_admin|2022年07月22日
フロントエンド

こんにちは、フロントエンドチームの @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(金)になります!

前回の定例内容はこちらから確認可能ですのでご興味いただければ下記のリンクから閲覧いただければと思います。

https://engineer.blog.lancers.jp/?s=フロントエンド定例