仕上げチェックの一部を自動化してみた（外部ツール編）

前回は「公開前の仕上げチェックシート」を自分用にまとめた話を書きました。
今回はその続きで、チェックの中から ツールで自動化できそうな部分 を試してみたメモです。

これを自動化したい

• metaタグ（title / description）の有無
• フォーム送信が通るか
• エラーメッセージが正しく出るか
• 外部リンクの target/rel 設定
• 404ページがちゃんと表示されるか
• ページ速度やSEOの最低限の指標

「人間の目で見るしかない部分」もあるけど、こういうのはツールに任せられそうです。

Puppeteer / Playwright を使ってみた

Node.jsのE2Eテストツールです。
ブラウザを自動操作してDOMを取ったり、クリックやフォーム送信もできます。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // meta description
  const desc = await page.$eval('meta[name="description"]', el => el.content);
  console.log('Meta Description:', desc);

  // フォーム送信
  await page.type('input[name="name"]', 'テストユーザー');
  await page.click('button[type="submit"]');
  await page.waitForNavigation();

  console.log('Form submitted!');
  await browser.close();
})();

実際にブラウザを操作するので「ちゃんと動くか」が確認できます。
Playwrightを使えば、Chromium / Firefox / WebKit の3つで同じテストが動かせるのも便利でした。

Lighthouse CI を使ってみた

Google製のWebサイト診断ツール「Lighthouse」をCIで回す仕組みです。
できることはかなり強力で、以下をスコア化してくれます。

• パフォーマンス（速度、画像最適化など）
• SEO（meta description欠落など）
• アクセシビリティ（alt属性、コントラスト比）
• ベストプラクティス（httpsじゃないリソースなど）

GitHub Actionsと組み合わせるとこんな感じ

- name: Install Lighthouse CI
  run: npm install -g @lhci/cli
- name: Run Lighthouse CI
  run: |
    lhci autorun \
      --collect.url=https://example.com \
      --collect.numberOfRuns=3 \
      --assert.preset=lighthouse:recommended

デプロイのたびに実行して、スコアを数値で残せるので「改善した／悪化した」がすぐわかります。

自動化できないところ

• レイアウト崩れ（結局目で見るしかない）
• コピーライトの年号や文章表現の違和感
• 「動作はしてるけど、なんか使いにくい」といった体感部分

つまり「自動化は万能じゃないけど、忘れやすいチェックはツールに任せられる」という感じでした。

まとめ

仕上げチェックを外部ツールに任せると、定量的な数値（Lighthouse CI）と、動作確認（Puppeteer/Playwright）がカバーできて便利です。
次は、こうしたチェック結果を「案件ごとにまとめて見れる仕組み」にしたら効率化できそうだな、と思っています。

今回は以上です！