リンティングとは?
リンティングは、ソースコードを実行する前に問題を見つけるために自動的に解析するプロセスです。リンターは、コードを読み取り、構文エラーやタイプミスからスタイルの不一致、潜在的なバグに至るまでの問題を指摘するツールです。
この用語は、もともとCプログラムの疑わしい構成をチェックするためのUnixツールである lintに由来しています。今日では、リンターはほぼすべてのプログラミング言語に存在し、コード品質の第一の防衛線として機能します。
リンターは、コードのスペルチェッカーのようなもので、タイプミスだけでなく、論理的な間違いもキャッチし、スタイルルールを施行し、バグを引き起こしやすいパターンについて警告を発します。
アクセシビリティリンターとは?
アクセシビリティリンターは、悪いアクセシビリティの実践の可能性をチェックし、ウェブサイトやアプリケーションがビルドされ、動作する前ではなく、開発中にフィードバックを提供します。
Axe DevTools Linterの機能
Axe DevTools Linterは、ソースファイルの静的解析を行います。コードを読み取り、 Dequeのルール に基づいて、アクセシビリティの問題を引き起こす可能性が高いパターンを特定します。例えば、以下のようなものを検出できます:
- 代替テキストがない画像
- ラベルのないフォーム入力
- 不正または不足しているARIA属性
- 見出し構造の問題
Axe DevTools Linterは、実行中のアプリケーションではなくソースコードを解析するため、コードが統合され、デプロイされ、またはコンパイルされる前にこれらの問題を早期に検出できます。
Axe DevTools Linterにできないこと
Axe DevTools Linterは静的解析ツールであるため、以下のことはできません:
- 動的に読み込まれるコンテンツやJavaScript駆動のUI変更など、アプリケーションの実行時の動作をテストすること。
- すべてのアクセシビリティ問題を検出すること。静的解析では検出可能な欠陥の一部だけをカバーし、いくつかの問題はブラウザーベースのテストや手動のレビューが必要になります。
- 手動のアクセシビリティテストやブラウザーベースのツールの代替になること。
対応技術
Axe DevTools Linterは以下のファイルタイプをチェックできます:
| テクノロジー | ファイル拡張子 |
|---|---|
| React | .js, .jsx, .tsx |
| Vue | .vue |
| Angular | .component.html |
| HTML | .html, .htm, .xhtml |
| LiquidJS | .liquid |
| Markdown | .md, .markdown |
| React Native | を見る React Native向けAxe DevTools Linter |
Axe DevTools Linterの使用方法
Axe DevTools Linterは、ワークフローに応じていくつかの方法で使用できます:
IDE拡張機能 により、コードを書いている間にリアルタイムのフィードバックを提供します。 VS Code拡張機能 および JetBrainsプラグイン (WebStormおよびIntelliJ IDEA Ultimate)は、コードを入力する際にエディタ内でアクセシビリティの問題を示します。
コネクタ は、バッチ処理、スクリプト、またはCI/CDパイプラインの一部としてファイルをリントするためのコマンドラインツールです。次を参照してください: Axe DevTools Linter Connectorの使用。
GitHubアクション は、プルリクエストで変更されたファイルをチェックし、アクセシビリティの問題を報告します。次を参照してください: Axe DevTools Linter GitHubアクション。
その他のCI/CD統合 には、 Jenkins、 SonarQube、および Gitのプリコミットフックがあります。
分析の実行場所
ローカルリント:VS Code拡張機能、JetBrainsプラグイン、およびConnector( --local オプション付き)すべてがご自身のマシンでアクセシビリティ分析を実行します。ファイルの内容は決してコンピュータから外部に出ることはありません。
サーバーベースのリント:Connectorは、Axe DevTools Linterサーバーにファイルを送信して分析を行うこともできます。これはGitHubアクションで使用されている方法です。サーバーオプションは2つあります:
- DequeホスティングSaaS:Dequeのクラウドサーバー。APIキーが必要で、サーバー設定は必要ありません。
- オンプレミス:ご自身のインフラ内で稼働するサーバーです。次を参照してください: インストールとセキュリティ。
Connectorを使用したローカルおよびサーバーベースのリントの選択に関するガイダンスについては、次を参照してください: ローカルリント。
ドキュメントの概要
Axe DevTools Linter SaaS APIキーを取得する は、Dequeのクラウドベースのリントサービスにアクセスするためのキーの取得方法を説明しています。
アクセシビリティルール は、Axe DevTools Linterがチェックするすべてのルールを一覧表示し、 Deque Universityでの詳細情報へのリンクを提供します。
Axe DevTools Linterの設定 は、VS Code拡張機能、JetBrainsプラグイン、Axe DevTools Linter Connector、およびREST APIで利用可能な設定オプションをカバーしています /lint-source エンドポイント。
インストールとセキュリティ は、オンプレミスサーバーのインストールとNGINXをリバースプロキシとして利用したセキュリティの確保に関する記事を含んでいます。
Axe DevTools Linterの使用 は、様々な統合をカバーしています: JetBrainsプラグイン、 VS Code拡張機能、 Connector CLI、 GitHub Action、 pre-commit フック、 Jenkins、および SonarQube。
カスタムコンポーネントのLinting では、Axe DevTools Linter のカスタムコンポーネントサポートについて、 VS Code および JetBrains ユーザー と REST エンドポイントユーザー向けのウォークスルーや、 事前構成済みコンポーネントライブラリに関する記事を紹介します。
REST API を使った開発 では、REST インターフェースを使用してプログラムで Axe DevTools Linter にアクセスする方法を説明します。
クレジット では、Axe DevTools Linter が使用するサードパーティソフトウェアの帰属およびライセンス情報を提供します。
Note: It is never necessary to use Deque's software or services in a way that collects, stores, or shares personal data. Do not use the software or services in a manner that collects, stores, or shares personal data.
