フロントエンドチェックリスト（日本語訳）

  • 14
    Like
  • 0
    Comment
1473685905 miya0001
Edited at
3

GitHubでフロントエンドチェックリストというものが公開されており、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。

https://github.com/thedaviddias/Front-End-Checklist

日本語版は、以下のGitHubリポジトリにあります。

https://github.com/miya0001/Front-End-Checklist

誤訳や誤りなどがあれば GitHub で報告していただけると幸いです。

フロントエンドチェックリスト

Contributors
CC0

フロントエンドチェックリストは、みなさんがウェブサイトや HTML ページを本番環境で公開する前に確認するべきあらゆる項目を網羅したリストです。

これは、フロントエンド開発者たちの数年に及ぶ経験にもとづいており、さらに他のオープンソースのチェックリストの内容も追加されています。

目次

  1. 利用方法
  2. Head
  3. HTML
  4. ウェブフォント
  5. CSS
  6. 画像
  7. JavaScript
  8. セキュリティ
  9. パフォーマンス
  10. アクセシビリティ
  11. SEO

利用方法

フロントエンドチェックリストのすべての項目は大半のプロジェクトで必要とされていますが、いくつかの項目は省略できますし、必須でもありません。（たとえば管理用のウェブアプリケーションの場合は、RSSは必要ないでしょう。）私たちは三段階で重要度を評価しています。

  • Low は、推奨を意味していますが、個別のシチュエーションによっては省略することも可能です。
  • Medium は、強く推奨を意味していますが、ごく稀なケースでは必須ではなく省略することも可能です。いくつかの項目においては省略することによってパフォーマンスやSEOで悪影響がある可能性があります。
  • High は、必須を意味しており、いかなる理由でも省略することはできません。これらを省略することで機能が不完全だったり、アクセシビリティやSEOの問題が発生することがあります。テストの優先順位はまずこれらの項目からはじめるべきです。

チェックリストのいくつかのリソースでは、絵文字を使ってコンテンツの種類を理解したり、ヘルプを見つけやすいようにしています。

  • 📖: ドキュメンテーションまたは文章
  • 🛠: オンラインツール / テストツール
  • 📹: メディアまたはビデオコンテンツ

Head

備考: HTMLドキュメントの <head> については、すべてのリストがこちらにあります。

Meta タグ

  • DOCTYPE宣言: High Doctype が HTML5 であり、すべての HTML ページの先頭にあること。
<!-- Doctype HTML5 -->
<!doctype html>

📖 Determining the character encoding - HTML5 W3C

次の3つの Meta タグ（Charset、X-UA、Viewport）は、<head>の先頭にあるべきです。

  • 文字コード: High 文字コードの宣言 (UTF-8) が正しく宣言されている。
<!-- Set character encoding for the document -->
<meta charset="utf-8">
  • X-UA-Compatible: Medium Meta タグ X-UA-Compatible が存在している。
<!-- Instruct Internet Explorer to use its latest rendering engine -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

📖 レガシードキュメントモードの設定 (Internet Explorer)

  • Viewport: High viewport が正しく宣言されている。
<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1">
  • Title: High title が全てのページで使用されている。（SEO: ウェブサイトのタイトルも含めて65文字以内であること。）
<!-- Document Title -->
<title>Page Title less than 65 characters</title>

📖 Title - HTML | MDN

  • Description: High meta description が提供されており、これはユニークでありなおかつ150文字以下である。
<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">
  • Favicons: Medium それぞれの favicon が作られており正しく表示されている。もし、favicon.ico しかない場合、それはあなたのサイトのルートに設置されている。通常はマークアップは必要ない。しかしながら、以下の例のようにリンクをはることがまだ有効である。昨今では、PNG フォーマット が .ico フォーマットよりも推奨されている。（サイズ: 32x32px）
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Recommended favicon format -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
  • Apple Touch Icon: Low apple-mobile-web-app-capable がある。 (すくなくとも 200x200pxのAppleアイコンファイルを作成すれば、必要な全ての寸法をサポートする。) 
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">

📖 Configuring Web Applications

  • Canonical: Medium 重複したコンテンツを避けるために rel="canonical" を使用している。
<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">

HTML タグ

  • 言語: High あなたのサイトの言語タグが記述されており、そのページの言語を指定している。
<html lang="en">
  • 文字方向: Medium 文字方向が記述されている。（これは他の HTML タグ上でも使用可能である。）
<html dir="rtl">

📖 dir - HTML | MDN

  • 代替言語: Low あなたのサイトの言語タグが既述されており、現在のページに言語が関連づけられている。
<link rel="alternate" href="https://es.example.com/" hreflang="es">
  • 条件分岐コメント: Low もし必要なら、IE 用の条件分岐コメントタグが設置されている。

📖 About conditional comments (Internet Explorer) - MSDN - Microsoft

  • RSS フィード: Low もしあなたのサイトがブログ、もしくは記事をもっているなら、RSS へのリンクが提供されている。
  • CSS クリティカル: Medium クリティカル CSS (または "above the fold") が、ページの可視部分をレンダリングするために使用されるすべての CSS を収集していること。それは主な CSS を読み込む前に呼び出されており、<style></style> の間に1行で記述されている。（圧縮されている）

📖 About conditional comments (Internet Explorer) - MSDN - Microsoft

🛠 Critical by Addy Osmani on Github

  • CSS 読み込み順: High すべての CSS ファイルは <head> 内でいかなる JavaScript よりも先に読み込まれている。 (JS ファイルが時々非同期にあなたのページのトップに読み込まれる場合を除く。)

ソーシャル

Facebook OG と Twitter Cards は、すべてのウェブサイトに強く推奨します。 その他のソーシャルメディア用のタグは、特定の対象をターゲットとする際に、より確実に表示されるようになるでしょう。

  • Facebook Open Graph: Low すべての Facebook Open Graph (OG) はテストされ、不足がなく不具合もない。画像サイズは少なくとも 600 x 315 ピクセル以上であり、1200 x 630 ピクセルを推奨する。
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
  • Twitter Card: Low 
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">

⬆ トップに戻る

HTML

ベストプラクティス

  • HTML5 セマンティック要素: High HTML5 セマンティック要素が適切に使用されている。(header, section, footer, main...)

📖 HTML Reference

  • エラーページ: High 404 及び 5xx 用のエラーページが存在している。5xx エラーページは CSS が内蔵されている必要があることを覚えておくこと。（サーバーに対する追加のリクエストを行わないこと。）
  • Noopener: Medium target="_blank" で外部リンクを使用する際には、rel="noopener" 属性をつけて Tabnabbing 脆弱性を防ぐこと。もしあなたが古いバージョンの Firefox をサポートする必要があるなら、rel="noopener noreferrer" を使用すること。

📖 About rel=noopener

  • 不必要なコード: Low 不必要なコードは、本番環境にアップロードされる前に削除されていること。

HTML のテスト

  • W3C 準拠:: High すべてのページを HTML ばりデーターでテストして、問題点を抽出する。

🛠 W3C validator

  • HTML Lint: High ツールを使って HTML に問題があるかどうかを分析する。

🛠 Dirty markup

  • デスクトップブラウザ: High すべてのページは、現在のすべてのデスクトップブラウザでテストされている。(Safari, Firefox, Chrome, Internet Explorer, EDGE...)
  • モバイルブラウザ: High すべてのページは、現在のすべてのモバイルブラウザでテストされている。(Native browser, Chrome, Safari...)
  • リンクチェッカー: High リンク切れがなく、404 エラーが発生しないことを確認する。

🛠 W3C Link Checker

  • 広告ブロッカーテスト: Medium 広告ブロッカーが有効でもコンテンツが正しく表示されている。（ユーザーに対してそれらの広告ブロッカーを無効化するようメッセージを表示することができる。）
  • ピクセルパーフェクト: High すべてのページはピクセルパーフェクトに近い状態であること。クリエイティブの品質によっては 100% 正確ではない場合があるが、テンプレートにほぼ近い状態である必要がある。

Pixel Perfect - Chrome Extension

⬆ トップに戻る

ウェブフォント

  • ウェブフォントのフォーマット: High WOFF, WOFF2 及び TTF はすべてのモダンブラウザでサポートされている。
  • ウェブフォントのサイズ: High ウェブフォントのサイズは、すべての綴りが含まれた状態で 2MB を超えないこと。

⬆ トップに戻る

CSS

備考: 多くのフロントエンド開発者が従っている CSS guidelines と Sass Guidelines を見てみましょう。 もし CSS プロパティについて疑問があるなら、CSS Reference に訪れてみましょう。

  • Responsive Web Design: High そのウェブサイトはレスポンシブデザインを採用している。
  • CSS Print: Medium 印刷用のスタイルシートがそれぞれのページに対して正しく提供されている。
  • Preprocessors: Medium あなたのサイトは CSS プリプロセッサーを使用している。 (Sass が推奨される。)
  • Unique ID: High もし ID が使用されているなら、そのページの中でユニークであること。
  • Reset CSS: High CSS のリセット (reset, normalize または reboot) が使用されており最新である。 (もしあなたが Bootstrap や Foundation などの CSS フレームワークを使用しているなら、それらはすでに導入されている。)
  • JS prefix: Low すべての class (または JavaScript で使用されいる ID) は、js- で始まっており、それらは CSS で使用されていない。
<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">
  • 内部 CSS 及びインラインスタイル: High 内部 CSS やインラインスタイルを使用することを避け、正当な理由でのみ使用する。（例： スライダー用の背景画像や CSS クリティカルなど）
  • ベンダープレフィックス: High CSS ベンダープレフィックスが、ブラウザの互換性に基づいて生成され、使用されている。

🛠 Autoprefixer CSS online

パフォーマンス

  • ファイルの結合: High CSS ファイルが結合されている。 (HTTP/2 では不要)
  • ミニファイ: High すべての CSS ファイルはミニファイされている。
  • ノンブロッキング: Medium CSS ファイルは DOM の読み込みに時間がかからないようにノンブロッキングである。
  • Unused CSS: Low 使用していない CSS は削除されていること。

CSS のテスト

  • 文法: High すべての CSS 及び SCSS にはエラーがないこと。
  • レスポンシブデザイン: High すべてのページは、320px, 768px, 1024px のブレイクポイントでテストされていること。（可能であれば、アナリティクスの結果に基づいて他のブレイクポイントでもテストする。）
  • CSS バリデーター: Medium CSS がテストされ、関連するエラーが修正されていること。

🛠 CSS Validator

  • 書字方向: High すべてのページは、必要に応じて LTR 及び RTL でテストされていること。

⬆ トップに戻る

画像

Notes: 画像の最適化に関して総合的に理解するには、Addy Osmani による Essential Image Optimization をおすすめします。

ベストプラクティス

  • Optimization: High すべての画像はブラウザでの表示に対して最適化されていること。WebP フォーマットは、ホームページのような重要なページでも使用することができます。
  • Retina: Low Retina ディスプレイをサポートするために2倍または3倍のイメージサイズの画像を提供している。
  • Sprite: Medium 地位材画像はスプライト画像にまとめられている。（アイコンの場合は、SVGスプライトイメージに含めることができます。）
  • Width and Height: High すべての <img> は、height と width が指定されている。（px または % を指定しない。）

備考: 開発者の多くは、width と height がレスポンシブウェブデザインと互換性がないと想定しています。 断じてそうではありません。

  • Alt テキスト: High すべての <img> は Alt テキストが代替えテキストとして指定されていること。
  • 遅延ロード: Medium 画像は遅延ロードされていること。（noscript による代替策が常に提供されていること。）

⬆ トップに戻る

JavaScript

ベストプラクティス

  • インライン JavaScript: High インライン JavaScript がないこと。（HTML と混ざっているもの）
  • ファイルの結合: High JavaScript ファイルは一つのファイルに結合されていること。
  • ミニファイ: High JavaScript ファイルはミニファイされていること。（.min.js という拡張子を使用できる。）

Minify Resources (HTML, CSS, and JavaScript)

  • JavaScript セキュリティ:

Guidelines for Developing Secure Applications Utilizing JavaScript*

  • ノンブロッキング: Medium JavaScript ファイルは、async 属性を使用して非同期で読み込まれるか、defer 属性を使用して遅延実行されている。

📖 Remove Render-Blocking JavaScript

  • Modernizr: Low もし、ある特定の機能を使用する際には、Modernizr を使用して、<html> の class を追加することができる。

🛠 Customize your Modernizr

JavaScript テスティング

  • ESLint: High ESLint にてエラーが発生しないこと。（あなたの設定またはスタンダードなルルーを基準とする。）

⬆ トップに戻る

セキュリティ

ウェブサイトをスキャンして確認する

ベストプラクティス

  • HTTPS: Medium すべてのページ及び外部コンテンツで HTTPS が使用されている。（プラグイン、画像 ...）
  • HTTP Strict Transport Security (HSTS): Medium HTTP ヘッダーには 'Strict-Transport-Security' が設定されている。
  • Cross Site Request Forgery (CSRF): High CSRF 攻撃を防ぐために、あなたのサーバーへのリクエストにたいしては、それがあなたのウェブサイト/アプリから送信されていることを確認している。

📖 Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet - OWASP

  • Cross Site Scripting (XSS): High あなたのサイトには、XSS が可能な脆弱性が存在していない。
  • Content Type Options Medium サーバーからのレスポンスヘッダーによって、Google Chrome と Internet Explorer による、mime-sniff による Content-Type に一致しない動作を防止する。
  • X-Frame-Options (XFO) Medium 来訪者をクリックジャッキング攻撃から保護する。

⬆ トップに戻る

パフォーマンス

ベストプラクティス

  • ページの重さ: High それぞれのページの重さは 500 KM以下である。
  • ミニファイ: Medium HTML がミニファイされている。

🛠 W3C Validator

  • Lazy loading: Medium 画像やスクリプト、CSS は、レスポンス時間を改善するために遅延ロードされている。（それぞれのセクションで詳細をみてください。）
  • Cookie size: もし Cookie を使用しているなら、4096 バイトを超えていないこと、20以上の Cookie を使用していないこと。

パフォーマンステスト

  • Google PageSpeed: High ホームページだけでなく、すべてのページがテストされており、90-100 のスコアであること。

⬆ トップに戻る

アクセシビリティ

Notes: You can watch the playlist A11ycasts with Rob Dodson 📹

ベストプラクティス

  • プログレッシブエンハンスメント: Medium 殊勝な機能、たとえばメインナビゲーションや検索などは、JavaScript 無しでも動作しなければならない。

📖 Enable / Disable JavaScript in Chrome Developer Tools

  • Color contrast: Medium カラーコントラストは WCAG のレベル AA を満たしている。（モバイル向けには AAA）

🛠 Contrast ratio

見出し

  • H1: High 全てのページには、サイトのタイトルとは違う H1 がある。
  • Headings: High 見出しは正しい順序で適切に使用されている。（H1 から H6）

📹 Why headings and landmarks are so important -- A11ycasts #18

ランドマーク

  • Role banner: High <header> には role="banner" がある。
  • Role navigation: High <nav> には role="navigation" がある。
  • Role main: High <main> には role="main" がある。

📖 Using ARIA landmarks to identify regions of a page

セマンティック

  • 適切な HTML5 input タイプが使用されている: Medium これは、キーパッドやウィジェットが様々なタイプにカスタマイズされるモバイルデバイスでは特に重要です。

📖 Mobile Input Types

フォーム

  • Label: High label は、それぞれのフォーム要素に関連づけられている。もし label を表示できない場合には aria-label を使用する。

📖 Using the aria-label attribute - MDN

アクセシビリティテスト

  • アクセシビリティスタンダードテスト: High もしアクセシビリティスタンダードに準拠するなら、WAVE ツールを使用してテストを行うことができる。

🛠 Wave testing

  • キーボード操作: High すべてのインタラクティブな要素に到達可能で使用可能であることが、目に見える順序でキーボードだけを使ってテストされている。
  • スクリーンリーダー: Medium すべてのページはスクリーンリーダーでテストされている。（VoiceOver, ChromeVox, NVDA or Lynx）
  • フォーカススタイル: High もし、フォーカスが無効化されているなら、CSS による状態の可視化に置き換えられている。

📹 Managing Focus - A11ycasts #22

⬆ トップに戻る

SEO

  • Google Analytics: High Google Analytics がインストールされており、正しく設定されている。
  • 見出し構造: Medium 見出し用のテキストが、そのページの内容を理解することの手助けになっている。
  • sitemap.xml: High sitemap.xml が存在しており Google Search Console に登録されている。（旧 Google Webmaster Tools）
  • robots.txt: High robots.txt によってブロックされていないこと。
  • 構造化データ: High 構造化データを使用しており、エラーがないことをテストされている。構造化データはクローラーがそのページのコンテンツを理解するための手助けになっている。
  • Sitemap HTML: Medium HTML サイトマップが提供されており、フーターのリンクからリンクされている。

⬆ トップに戻る

貢献

訳注： 本家版への貢献と区別するため、本家用の貢献については英語の原文そのままを掲載しておきます。

Open an issue or a pull request to suggest changes or additions.

Guide

The Front-End Checklist repository consists of two branches:

1. master

This branch consists of the README.md file that is automatically reflected on the Front-End Checklist website.

2. develop

This branch will be used to make some significant changes to the structure, content if needed. It is preferable to use the master branch to fix small errors or add a new item.

Contributors

Check out all the super awesome contributors.

Authors

David Dias, Geoffrey Signorato, Sandeep Ramgolam and Cédric Poilly.

License

CC0

日本語版への貢献（翻訳）

誤訳、誤記、その他の誤りを見つけた場合には、以下のリポジトリにプルリクエストをお送りいただくか、Issue にてご報告をお願いします。

原則として、このドキュメントはオリジナルの文書に忠実な翻訳をこころがけております。

⬆ トップに戻る

Edit request

Report article

Help us understand the problem. What is going on with this item?


Feedback

We don't reply to any feedback.
If you need help with Qiita, please send a support request from here.