INDEX
🏇

手始めに markuplint を導入する

scrap#A11Y#HTML5#TypeScript#React

By jiyuujin at

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

  • 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 " の仕様に準拠していない場合に警告します。

::: message is-primary

明確な違反

  • 仕様に存在しないロールを使用する
  • 抽象的なロールを使用する
  • 設定されたロール (または暗黙のロール) に属さないプロパティまたはステートを使用する
  • プロパティ/ステートの無効な値を使用する
  • 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