Next.jsにMarkuplintを入れてHTMLの品質を向上させる

はじめに

世間はAIの時代ですが、web制作はアクセシビリティを気にしないといけない時代なのではないでしょうか？

今回はNext.jsのプロジェクトにMarkuplintを導入していきます。
https://markuplint.dev/ja/

あなたのマークアップに安寧を
すべてのマークアップ開発者のためのHTMLリンター

Markuplintを入れることによって

Markuplintを入れることによって主に、

• HTML Standardの仕様に沿ったマークアップ
• WAI-ARIAの仕様に沿ったアクセシブルなマークアップ

などのチェックをすることができます。
JSXやVueなどさまざまな構文やテンプレートにも対応しています。

「HTML知らないこと割とあるなぁ。」

Markuplintを入れることできっとみんなこう思うと思います。

HTMLをきちんと学んだことがあるフロントエンドエンジニアどれくらいいるんですかね。
ちなみに私は、HTML解体新書をサラッと読んだことあるくらいにしか学んだことがありません。
HTMLにはエラーが出ないですし、よしなにマークアップしがちだと思います。

Markuplintを入れることによってHTMLにエラーを出してくれます。そして、正しいマークアップに導いてくれます。素晴らしい。

https://twitter.com/cloud10designs/status/1639081050084376582?s=20
Markuplintの作者のゆうてんさんは、

初学者にこそMarkuplintつかってほしい

とおっしゃられていますが、個人的には「HTMLをきちんと学んできてこなかったフロントエンドエンジニア」にも使ってほしいと思います。

覚えなくていいんですよ！！サクッとMarkuplintを入れるだけ！！

導入

Markuplintをインストールします。

yarn add -D markuplint

対話式の質問を答えていくと、.markuplintrcが作成されます。

npx markuplint --init

次に、今回はNext.js（React）を使用するので、jsxパーサプラグインとreactスペックプラグインをインストールします。

yarn add -D @markuplint/react-spec @markuplint/jsx-parser

先ほど入れたjsxパーサプラグインとreactスペックプラグインを、jsxまたはtsxファイルに適用するために、.markuplintrcにparserとspecを追記します。
また、推奨プリセットがあるので今回はreact用のプリセットを適用します。

.markuplintrc

{
  "extends": [
    "markuplint:recommended-react"
  ],
  "parser": {
    ".[jt]sx$": "@markuplint/jsx-parser"
  },
  "specs": {
    ".[jt]sx$": "@markuplint/react-spec"
  }
}

推奨プリセットを使用しない場合や、各自でルールをカスタマイズしたい場合は、rulesやnodeRulesなどに追記していきます。
Next.jsでemotionを使いたい場合、css属性が必要になるので以下のルールを追記など。

.markuplintrc

  "rules": {
    "invalid-attr": {
      "options": {
        "ignoreAttrNamePrefix": "css"
      }
    },
  },

サクッと読める程度なので独自でカスタマイズしていくのもありだと思います。
https://markuplint.dev/ja/docs/rules

最後に、　Markuplintの設定が完了したのでpackage.jsonにスクリプトを追加します。
src直下のファイルのみチェックしたいので以下のスクリプトを追記します。
今回は一旦、jsxとtsxファイルのみで。

package.json

"markuplint": "markuplint \"./src/**/*.{jsx,tsx}\""

実行します。

yarn markuplint

〜完〜

vscodeの拡張機能

毎回yarn markuplintを実行しないといけないのはつらいので、vscodeの拡張機能があるので入れておきましょう。
https://marketplace.visualstudio.com/items?itemName=yusukehirao.vscode-markuplint
ついでに、.vscode/extensions.jsonでおすすめしておきます。

.vscode/extensions.json

{
  "recommendations": [
    "yusukehirao.vscode-markuplint"
  ]
}

おわり

Markuplintめちゃくちゃ導入しやすいです。ESLintとかと比べるとそんな気がします。
vue、react、svelteは推奨プリセットも用意されているので楽だと思います。https://markuplint.dev/docs/guides/presets#recommended-presets

tableタグにcaptionが必要なこととか、単純にinput,selectなどの要素にはlabelが必要だったりとか。
割とスルーしがちなアクセシビリティ的要素を検証してくれるのはとてもありがたい。
id重複とか、alt必須とかも。

HTMLもきちんと学ばないといけないんだなと、そして、Markuplintによって非常に楽に学んで使えることができるのだなと思いました。
まだ導入していない人は一度試してみては。色々カスタマイズできるので。

快適なweb制作アクセシビリティライフを─────────