クラウドワークス エンジニアブログ

日本最大級のクラウドソーシング「クラウドワークス」の開発の裏側をお届けするエンジニアブログ

markuplintをプロダクトに導入してみた

HTML フロントエンド チーム開発 デザインシステム Vue.js

こんにちは、こんにちは。フロントエンドとWebの可能性を信じる@yamanokuです。
最近気になっている W3C Working Draft はCSS Nesting Moduleです。*1

現在クラウドワークスのプロダクトで導入されているフロントエンドのlintツールはeslint、stylelintで、これらの規約に違反しているコードはCIによるチェックを通じて指摘されるようになってます。

今回このlintツールの中に新たに「markuplint」を追加した話をしようと思います。

markuplintについて

markuplintロゴ

詳細については公式のリポジトリや作者による紹介（YouTube動画）を見ていただくのが一番なので、ここでは軽い紹介に留めます。

その名の通り「マークアップすること」に関するlintツールで、各種ルールについても柔軟に設定できるようになっています。 かつてフロントエンドチームでアクセシビリティチェックを行ってみた経験から、健全なマークアップを効率的にやっていけるといいなと思って、このlintツールは気になっておりました。

HTMLのlintツールとしてHTMLLintもありますが、markuplintはHTMLの規約を守るものとしてよりも、チーム内でのマークアップ規約なるものをlintツールで定義していく使い方が向いていると思っています。

またパーサーも種類豊富で、JSX、React、VueやSvelteなど13種類の言語・テンプレートエンジンで使用可能です（2021年9月現在）。

パーサーについては以前私からの要望で作者にerbも作成してもらったのですが、erbファイルが膨大すぎて使う機会がなく作らせてしまっただけになりました。

（作者にはお伝えしましたがこの場を借りて改めて）使えておらず大変申し訳ありませんでした…。

ちなみにCLIとして動かす以外にもVSCodeのExtentionsでも公開されています。

プロダクトで使ってみる

前述したとおりerbファイルで使おうと考えていましたが、小さく始めようと思った矢先に大量にエラーが出たらそれも併せて修正しないと…となるとスタートとしてあまりよくないなと判断しました。

そこで、以前ログイン画面をリニューアルした話で新たなデザイン基盤にVue.jsを使って開発していると書きましたが、そのファイル群にmarkuplintを適用し「デザイン基盤でのマークアップ規約となるよう活用してみよう」というところからはじめました。

markuplintの対象はデザイン基盤のコードのみに絞り、

"markuplint": "markuplint 'app/javascript/norman/**/*.vue'"

CircleCIにてジョブを追加し、新たにチェック対象として動作するようにしました。

CircleCIのjobで「markuplintの実行」が成功しているスクリーンショット

ルールの適用について

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の窓口も作られており、弊社社員からもスポンサードしています。

そのほかこうした要望がある、こういう問題があった、とIssueで報告することもサポートする形だと思います。 更に使い込んでいってソースコード側のプルリクエストにてコントリビュートもしていければと考えております。

おわりに

まずは試しにPlaygroundで試し、VSCodeの拡張を入れるなど小さく始めつつ、チームでのマークアップ規約をつくる際に使用してみてはいかがでしょうか。

現在、markuplintはv2.0に向けて開発も進んでおり、SVG対応やCSS設計補助の強化、終了タグにまつわるルールも想定されていたりします。

機能面もそうですが、markuplintを使って業務効率が改善できたといった話や、より多くの方が触ってみてmarkuplintのユースケースも増えていけばいいなといちユーザーとして思っております。

*1:継続的ドキュメンテーション: Github DiscussionsとADRのすすめ - LIFULL Creators Blog リスペクト

© 2016 CrowdWorks, Inc., All rights reserved.