jiyuujin is united with the people of Ukraine and the international community.
手始めに markuplint を導入する
4/14/2022
A11Y
HTML5
TypeScript
React

下記の通り示す順に見ていくこととする。

  • Lint とは
    • 効果的に Lint を使う
  • markuplint とは
  • markuplint を導入する
  • markuplint 大きな特長を挙げる
  • markuplint v2 とは

記事と合わせ 登壇スライド も作成している。

https://docs.google.com/presentation/d/1vvkYKVMRt6pYJSZC2Fm_eFKYxjhrqchfqn6UJBKikfU/edit?usp=sharing

Lint とは

まず Lint について、各個人によってコードの書き方は様々。機械的に体裁を整えることを目指し JavaScript や TypeScript の体裁を整える ESLint から CSS の体裁を整える StyleLint が存在している。

そこに HTML の体裁を整える MarkupLint が新たに登場、実際に JavaScript フレームワークで利用可能となった。

効果的に Lint を使う

エディタの機能を利用できれば、とりあえず十分。

  • VSCode の editor.codeActionsOnSave を利用する
  • JetBrains IDE の autoFix を利用する
  • Git Hook (Husky) を利用する

ただ、これらの機能を利用するにしても設定ファイル (ESLint なら .eslintrc 、 MarkupLint なら .markuplintrc) を準備する必要がある。

markuplint とは

2021 年 1 月 W3C が HTML Living Standard を正式な勧告として発表。実際に HTML Living Standard の仕様に準拠した HTML となっているかを機械的に検証してくれる。

一時期、その W3C を起因としたゴタゴタもあり、かつて勧告された HTML5 はこれを機に廃止へ向かった。

markuplint を導入する

下記条件を踏まえてインストールを進める。

  • ネーミングに関する規約を定める
  • HTML 規格に準拠しているかチェックする
  • コードスタイルをチェックする

マークアップを巡るアクセシビリティを考慮するため markuplint をインストールする。

npx markuplint --init

✔ Which do you use template engines? · No items were selected
✔ May I install them automatically? (y/N) · true
✔ Do you customize rules? (y/N) · true
✔ Are you going to conformance check according to HTML standard? (y/N) · true
✔ Are you going to do with accessibility better practices? (y/N) · true
✔ Are you going to set the convention about naming? (y/N) · true
✔ Are you going to check for the code styles? (y/N) · true

なお、ローカルに markuplint をインストールしていただいても構いません。

# npm
npm i -D markuplint

# yarn
yarn add -D markuplint

この markuplint に加え JavaScript フレームワークごとお世話となるプラグインが異なる。

  • React では markuplint と合わせ @markuplint/jsx-parser@markuplint/react-spec をインストールする
  • Vue では markuplint と合わせ @markuplint/vue-parser@markuplint/vue-spec をインストールする

各々、設定ファイル .markuplintrc の parser でインストールしたプラグインを読み込む。

markuplint 大きな特長を挙げる

markuplint 公式ウェブサイトには、 Accessibility の項目が存在する。

https://markuplint.dev/rules#accessibility

landmark-roles

banner , main , complementary and contentinfo がトップレベルのランドマークであるか警告する。

どのランドマークにも知覚できるコンテンツが存在するか警告する (Work in Progress)

required-h1

文書内に h1 要素が存在しない場合に警告する。

wai-aria

role 属性や aria-* 属性が WAI-ARIA や "ARIA in HTML " の仕様に準拠していない場合に警告する。

明確な違反

  • 仕様に存在しないロールを使用する
  • 抽象的なロールを使用する
  • 設定されたロール (または暗黙のロール) に属さないプロパティまたはステートを使用する
  • プロパティ/ステートの無効な値を使用する
  • HTML の ARIA に従って許可されていないロールを使用する
  • 必須のプロパティまたは状態を設定しない

推奨されない

  • 非推奨のプロパティまたは状態を設定する
  • HTML の ARIA に従って明示的に暗黙的な役割を設定する
  • HTML の ARIA に従って、その要素がそれに相当するセマンティックな HTML 属性を持つ場合、そのプロパティ/ステートを明示的に設定する

markuplint v2 とは

今年 1 月 12 日には v2 がリリースされた。

  • ルールプリセット
  • plugins オプション
    • より自分たちのルールに合わせて拡張可能
      • ESLint でやってきたようなサードパーティ製をやっていき
  • その他

詳細は v2.0.0 をご確認いただきたい。

その内 extends オプションの提供開始は大きい。なお、現時点で提供されている markuplint:recommended 1 種類のみ。

{
  "extends": ["markuplint:recommended"]
}

とりあえずこれを設定しておけば良さそうです。

また、ルール並びに CLI オプションも追加されている。

その他

記事と合わせ 登壇スライド も作成している。

https://docs.google.com/presentation/d/1vvkYKVMRt6pYJSZC2Fm_eFKYxjhrqchfqn6UJBKikfU/edit?usp=sharing

ルール一覧

Rule
attr-duplication
character-reference
deprecated-attr
deprecated-element
doctype
id-duplication
permitted-contents
required-attr
invalid-attr
landmark-roles
required-h1
wai-aria
class-naming
attr-equal-space-after
attr-equal-space-before
attr-spacing
attr-value-quotes
case-sensitive-attr-name
case-sensitive-tag-name
indentation
(7210 characters)

あわせてよみたい..