Vue Academy · レッスン

Storybook Addonとアクセシビリティテスト

@storybook/addon-a11y、viewport addon、自動ドキュメント生成用のdocs addon

「Storybook Addonとアクセシビリティテスト」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

アドオンでStorybookを拡張する

アドオンによって、Storybookに追加のパネルやツールを組み込めます。ControlsやActions以外にも、アクセシビリティ、レスポンシブなビューポート、自動生成ドキュメントなどに対応するアドオンがあります。

アクセシビリティアドオン

@storybook/addon-a11yは各ストーリーでaxe-coreエンジンを実行し、WCAG違反（コントラストの問題、ラベルの欠落、不適切なロールなど）をパネルに表示します。

// terminal
// npm install -D @storybook/addon-a11y

アドオンを登録する

.storybook/main.tsのaddons配列にアドオンを追加します。読み込むにはStorybookを再起動してください。

// .storybook/main.ts
const config = {
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-a11y",
  ],
}

a11yパネルを確認する

ストーリーを開き、Accessibilityタブを確認します。各結果はViolations（修正が必要）、Passes、Incomplete（手動確認が必要）に分類されます。違反項目をクリックすると、該当する要素が強調表示されます。

検出できる一般的な違反

テキストと背景のコントラストが不十分。
アクセシブルな名前のないボタンやリンク。
altテキストがない画像。
関連付けられたラベルのないフォーム入力。

これらをリリース後ではなく分離した状態で検出すれば、修正コストを大幅に抑えられます。

ストーリーごとのa11y設定

パラメーターを使ってストーリーごとにルールを調整できます。たとえば、別の場所で処理するルールを無効にしたり、検査対象から除外する要素を指定したりできます。

export const NoContrastCheck = {
  parameters: {
    a11y: {
      config: {
        rules: [{ id: "color-contrast", enabled: false }],
      },
    },
  },
}

Viewportアドオン

viewportアドオン（essentialsの一部）を使うと、モバイル、タブレット、デスクトップなど、異なるデバイスサイズでストーリーをプレビューできます。レスポンシブ対応のブレークポイントを確認するのに便利です。

Viewportを選択する

ツールバーのドロップダウンで、キャンバスに表示するプリセットのデバイスフレームを切り替えます。ストーリーごとにデフォルトのviewportを設定することもできます。

export const Mobile = {
  parameters: {
    viewport: { defaultViewport: "mobile1" },
  },
}

カスタムViewport

preview.tsで独自のブレークポイントを定義し、デザインシステムで使用する正確な幅に合わせることができます。

// .storybook/preview.ts
const preview = {
  parameters: {
    viewport: {
      viewports: {
        tablet: { name: "Tablet", styles: { width: "768px", height: "1024px" } },
      },
    },
  },
}

Docsアドオン

@storybook/addon-docsは自動生成ドキュメントを提供します。tags: ["autodocs"]と組み合わせると、propsとストーリーからコンポーネントごとのDocsページを生成します。

export default {
  component: Card,
  tags: ["autodocs"],
}

常に最新のドキュメント

ドキュメントは実際のコンポーネントとストーリーから生成されるため、内容が古くなることがありません。propテーブルには実際のprop定義が反映され、例には実際に動作するストーリーが使われます。

確認テスト

Storybookのアドオンについての理解度を確認しましょう。

まとめ

Storybookの主要なアドオンについて学びました。

@storybook/addon-a11yはストーリーごとにWCAG違反（コントラスト、ラベル、ロール）を報告し、ストーリーごとに調整できます。
viewportアドオンは、プリセットまたはカスタムサイズでレスポンシブ対応のブレークポイントをプレビューします。
@storybook/addon-docsとtags: ["autodocs"]を使うと、propsとストーリーから常に最新のドキュメントを自動生成できます。
main.tsのaddons配列にアドオンを登録します。

よくある質問

「Storybook Addonとアクセシビリティテスト」レッスンは無料ですか？

はい。「Storybook Addonとアクセシビリティテスト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「Storybook Addonとアクセシビリティテスト」で何を学びますか？

@storybook/addon-a11y、viewport addon、自動ドキュメント生成用のdocs addon ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「Storybook Addonとアクセシビリティテスト」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る