markuplintをプロダクトに導入してみた
こんにちは、こんにちは。フロントエンドと Web の可能性を信じる@yamanokuです。
最近気になっている W3C Working Draft はCSS Nesting Moduleです。1
現在クラウドワークスのプロダクトで導入されているフロントエンドの lint ツールは eslint、stylelint で、これらの規約に違反しているコードは CI によるチェックを通じて指摘されるようになってます。
今回この lint ツールの中に新たに「markuplint」を追加した話をしようと思います。
markuplint について
詳細については公式のリポジトリや作者による紹介（YouTube 動画）を見ていただくのが一番なので、ここでは軽い紹介に留めます。
その名の通り「マークアップすること」に関する lint ツールで、各種ルールについても柔軟に設定できるようになっています。 かつてフロントエンドチームでアクセシビリティチェックを行ってみた経験から、健全なマークアップを効率的にやっていけるといいなと思って、この lint ツールは気になっておりました。
HTML の lint ツールとしてHTMLLintもありますが、markuplint は HTML の規約を守るものとしてよりも、チーム内でのマークアップ規約なるものを lint ツールで定義していく使い方が向いていると思っています。
またパーサーも種類豊富で、JSX、React、Vue や Svelte など 13 種類の言語・テンプレートエンジンで使用可能です（2021 年 9 月現在）。
パーサーについては以前私からの要望で作者に erb も作成してもらったのですが、erb ファイルが膨大すぎて使う機会がなく作らせてしまっただけになりました。
https://twitter.com/yamanoku/status/1311527268397707264
https://twitter.com/cloud10designs/status/1361115436117450753
（作者にはお伝えしましたがこの場を借りて改めて）使えておらず大変申し訳ありませんでした…。
ちなみに CLI として動かす以外にもVSCode の Extentionsでも公開されています。
プロダクトで使ってみる
前述したとおり erb ファイルで使おうと考えていましたが、小さく始めようと思った矢先に大量にエラーが出たらそれも併せて修正しないと…となるとスタートとしてあまりよくないなと判断しました。
そこで、以前ログイン画面をリニューアルした話で新たなデザイン基盤に Vue.js を使って開発していると書きましたが、そのファイル群に markuplint を適用し「デザイン基盤でのマークアップ規約となるよう活用してみよう」というところからはじめました。
markuplint の対象はデザイン基盤のコードのみに絞り、
"markuplint": "markuplint 'app/javascript/norman/**/*.vue'"
CircleCI にてジョブを追加し、新たにチェック対象として動作するようにしました。
ルールの適用について
markuplint のルールについては以下で適用しています。
{
"rules": {
"required-attr": true,
"indentation": false
},
"nodeRules": [
{
"tagName": "img",
"rules": {
"required-attr": ["alt", "srcset"]
}
}
]
}
<img>のタグにalt,srcsetを両方設置するsrcsetでは社内で画像を使う場合、解像度指定をするルールがあるため
- インデントルールは無効
- Prettier での整形と被る可能性があるため
現状は上記ルールの拡張をしているだけですが、汎用的なコンポーネント化が進んできたときに、permitted-contentsルールで内部で使うタグを定義して指摘できるようにしたいです。
またアクセシビリティ対応のためにWAI-ARIA ルール整理もしていきたいです。
GitHub Sponsor によるサポート
現在 markuplint ではGitHub Sponsor の窓口も作られており、弊社社員からもスポンサードしています。
https://twitter.com/markuplint/status/1433027060524470272
そのほかこうした要望がある、こういう問題があった、と Issue で報告することもサポートする形だと思います。 更に使い込んでいってソースコード側のプルリクエストにてコントリビュートもしていければと考えております。
おわりに
まずは試しにPlaygroundで試し、VSCode の拡張を入れるなど小さく始めつつ、チームでのマークアップ規約をつくる際に使用してみてはいかがでしょうか。
現在、markuplint は v2.0 に向けて開発も進んでおり、SVG 対応やCSS 設計補助の強化、終了タグにまつわるルールも想定されていたりします。
機能面もそうですが、markuplint を使って業務効率が改善できたといった話や、より多くの方が触ってみて markuplint のユースケースも増えていけばいいなといちユーザーとして思っております。