92
GitHub - miya0001/Front-End-Checklist: フロントエンドチェックリスト日本語訳
source link: https://github.com/miya0001/Front-End-Checklist
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Front-End Checklist
The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your site / HTML page to production.
フロントエンドチェックリストは、みなさんがウェブサイトや HTML ページを本番環境で公開する前に確認するべきあらゆる項目を網羅したリストです。
これは、フロントエンド開発者たちの数年に及ぶ経験にもとづいており、さらに他のオープンソースのチェックリストの内容も追加されています。
フロントエンドチェックリストのすべての項目は大半のプロジェクトで必要とされていますが、いくつかの項目は省略できますし、必須でもありません。（たとえば管理用のウェブアプリケーションの場合は、RSSは必要ないでしょう。）私たちは三段階で重要度を評価しています。
- は、推奨を意味していますが、個別のシチュエーションによっては省略することも可能です。
- は、強く推奨を意味していますが、ごく稀なケースでは必須ではなく省略することも可能です。いくつかの項目においては省略することによってパフォーマンスやSEOで悪影響がある可能性があります。
- は、必須を意味しており、いかなる理由でも省略することはできません。これらを省略することで機能が不完全だったり、アクセシビリティやSEOの問題が発生することがあります。テストの優先順位はまずこれらの項目からはじめるべきです。
チェックリストのいくつかのリソースでは、絵文字を使ってコンテンツの種類を理解したり、ヘルプを見つけやすいようにしています。
: ドキュメンテーションまたは文章
: オンラインツール / テストツール
: メディアまたはビデオコンテンツ
備考: HTMLドキュメントの
<head>については、すべてのリストがこちらにあります。
Meta タグ
- DOCTYPE宣言: Doctype が HTML5 であり、すべての HTML ページの先頭にあること。
<!-- Doctype HTML5 -->
<!doctype html>次の3つの Meta タグ（Charset、X-UA、Viewport）は、<head>の先頭にあるべきです。
- 文字コード: 文字コード (UTF-8) が正しく宣言されている。
<!-- Set character encoding for the document -->
<meta charset="utf-8">- X-UA-Compatible: Meta タグ X-UA-Compatible が存在している。
<!-- Instruct Internet Explorer to use its latest rendering engine -->
<meta http-equiv="x-ua-compatible" content="ie=edge">- Viewport: viewport が正しく宣言されている。
<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1">- Title: title が全てのページで使用されている。（SEO: Google は、タイトルで使用される文字幅をピクセルで計算し、472から482ピクセルで切り詰めます。平均的な文字数は半角で55文字となります。）
<!-- Document Title -->
<title>Page Title less than 55 characters</title>- Description: meta description が提供されており、これはユニークでありなおかつ150文字以下である。
<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">- Favicons: それぞれの 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: apple-mobile-web-app-capable がある。 (すくなくとも 200x200pxのAppleアイコンファイルを作成すれば、必要な全ての寸法をサポートする。)
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">- Windows カスタムタイル: Windows カスタムタイルが提供されリンクされている。
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />browserconfig.xml の必要最小限の構成は以下:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="small.png"/>
<square150x150logo src="medium.png"/>
<wide310x150logo src="wide.png"/>
<square310x310logo src="large.png"/>
</tile>
</msapplication>
</browserconfig>- Canonical: 重複したコンテンツを避けるために
rel="canonical"を使用している。
<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">HTML タグ
- Language 属性: あなたのサイトの言語を指定するための
lang属性が記述されている。
<html lang="en">- Direction 属性: 書字方向を指定するための
dir属性が<html>タグに指定されている。（これは他の HTML タグ上でも使用可能である。）
<html dir="rtl">- 代替言語: あなたのサイトの言語タグが既述されており、現在のページに言語が関連づけられている。
<link rel="alternate" href="https://es.example.com/" hreflang="es">- 条件分岐コメント: もし必要なら、IE 用の条件分岐コメントタグが設置されている。
- RSS フィード: もしあなたのサイトがブログ、もしくは記事をもっているなら、RSS へのリンクが提供されている。
- インラインクリティカル CSS: ページロード時にすぐに表示される部分のコンテンツを整える CSS は（"above the fold content"）、クリティカル CSS によってコールされている。それは、主要な CSS の前の
<style></style>の間に記述されている。（圧縮されている）
- CSS 読み込み順: すべての CSS ファイルは
<head>内でいかなる JavaScript よりも先に読み込まれている。 (JS ファイルが時々非同期にあなたのページのトップに読み込まれる場合を除く。)
ソーシャル
Facebook OG と Twitter Cards は、すべてのウェブサイトに強く推奨します。 その他のソーシャルメディア用のタグは、特定の対象をターゲットとする際に、より確実に表示されるようになるでしょう。
- Facebook Open Graph: すべての Facebook Open Graph (OG) はテストされ、不足がなく不具合もない。画像サイズは少なくとも 600 x 315 ピクセル以上であり、1200 x 630 ピクセルを推奨する。
備考:
og:image:widthとog:image:heightを使用して画像の縦横サイズを指定すると、非同期にダウンロードして処理することなく、即座に画像をレンダリングすることができます。
<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">
<!-- Next tags are optional but recommended -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">- Twitter Card:
<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">ベストプラクティス
- HTML5 セマンティック要素: HTML5 セマンティック要素が適切に使用されている。(header, section, footer, main...)
- エラーページ: 404 及び 5xx 用のエラーページが存在している。5xx エラーページは CSS が内蔵されている必要があることを覚えておくこと。（サーバーに対する追加のリクエストを行わないこと。）
- Noopener:
target="_blank"で外部リンクを使用する際には、rel="noopener"属性をつけて Tabnabbing 脆弱性を防ぐこと。もしあなたが古いバージョンの Firefox をサポートする必要があるなら、rel="noopener noreferrer"を使用すること。
- 不必要なコード: 不必要なコードは、本番環境にアップロードされる前に削除されていること。
HTML のテスト
- W3C 準拠:: すべてのページを HTML バリデーターでテストして、問題点を抽出する。
- HTML Lint: ツールを使って HTML に問題があるかどうかを分析する。
- リンクチェッカー: リンク切れがなく、404 エラーが発生しないことを確認する。
- 広告ブロッカーテスト: 広告ブロッカーが有効でもコンテンツが正しく表示されている。（ユーザーに対してそれらの広告ブロッカーを無効化するようメッセージを表示することができる。）
ウェブフォント
備考: Webフォントを使用すると、スタイルが適用されていないテキストが表示される現象（FFlash Of Unstyled Text）や フォントがロードされるまで表示されない現象（Flash of Invisible Text）が発生する可能性があります。フォールバックフォントを使用するか、ウェブフォントローダーを使用して動作を制御することを検討してください。
- ウェブフォントのフォーマット: WOFF, WOFF2 及び TTF はすべてのモダンブラウザでサポートされている。
- ウェブフォントのサイズ: ウェブフォントのサイズは、すべての綴りが含まれた状態で 2MB を超えないこと。
- ウェブフォントローダー: ウェブフォントローダーで、ロード時の挙動を制御する。
備考: 多くのフロントエンド開発者が従っている CSS guidelines と Sass Guidelines を見てみましょう。 もし CSS プロパティについて疑問があるなら、CSS Reference に訪れてみましょう。また一貫性を学ぶための短めの Code Guide もあります。
- Responsive Web Design: そのウェブサイトはレスポンシブデザインを採用している。
- CSS Print: 印刷用のスタイルシートがそれぞれのページに対して正しく提供されている。
- Preprocessors: あなたのサイトは CSS プリプロセッサーを使用している。 (Sass が推奨される。)
- Unique ID: もし ID が使用されているなら、そのページの中でユニークであること。
- Reset CSS: CSS のリセット (reset, normalize または reboot) が使用されており最新である。 (もしあなたが Bootstrap や Foundation などの CSS フレームワークを使用しているなら、それらはすでに導入されている。)
- JS prefix: すべての 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 及びインラインスタイル:
<style>による内部 CSS やインラインスタイルを使用することを避け、正当な理由でのみ使用する。（例： スライダー用の背景画像や CSS クリティカルなど） - ベンダープレフィックス: CSS ベンダープレフィックスが、ブラウザの互換性に基づいて生成され、使用されている。
パフォーマンス
- ファイルの結合: CSS ファイルが結合されている。 (HTTP/2 では不要)
- 圧縮（Minify）: すべての CSS ファイルは圧縮されている。
- ノンブロッキング: CSS ファイルは DOM の読み込みに時間がかからないようにノンブロッキングである。
- Unused CSS: 使用していない CSS は削除されていること。
CSS のテスト
- 文法: すべての CSS 及び SCSS にはエラーがないこと。
- レスポンシブデザイン: すべてのページは、320px, 768px, 1024px のブレイクポイントでテストされていること。（可能であれば、アナリティクスの結果に基づいて他のブレイクポイントでもテストする。）
- CSS バリデーター: CSS がテストされ、関連するエラーが修正されていること。
- デスクトップブラウザ: すべてのページは現在あるすべてのデスクトップブラウザでテストされている。 (Safari, Firefox, Chrome, Internet Explorer, EDGE...)
- モバイルブラウザ: すべてのページは現在あるすべてのモバイルブラウザでテストされている。 (Native browser, Chrome, Safari...)
- OS: すべてのページは現在あるすべての OS でテストされている。 (Windows, Android, iOS, Mac...).
- ピクセルパーフェクト: すべてのページはピクセルパーフェクトに近い状態であること。クリエイティブの品質によっては 100% 正確ではない場合があるが、テンプレートにほぼ近い状態である必要がある。
- 書字方向: すべてのページは、必要に応じて LTR 及び RTL でテストされていること。
Notes: 画像の最適化に関して総合的に理解するには、Addy Osmani による Essential Image Optimization をおすすめします。
ベストプラクティス
- Optimization: すべての画像はブラウザでの表示に対して最適化されていること。WebP フォーマットは、ホームページのような重要なページでも使用することができます。
- Picture/Srcset:
picture/srcsetによって現在のビューポートに最も適切なイメージを提供する。
- Retina: Retina ディスプレイをサポートするために2倍または3倍のイメージサイズの画像を提供している。
- Sprite: 小さい画像はスプライト画像にまとめられている。（アイコンの場合は、SVGスプライトイメージに含めることができます。）
- Width and Height: 最終的に表示される際のサイズがわかっている場合、すべての
<img>は、heightとwidthが指定されている。（pxまたは%を指定しない。） - Alt テキスト: すべての
<img>は Alt テキストが代替テキストとして指定されていること。
- 遅延ロード: 画像は遅延ロードされていること。（noscript による代替策が常に提供されていること。）
JavaScript
ベストプラクティス
- インライン JavaScript: インライン JavaScript がないこと。（HTML と混ざっているもの）
- ファイルの結合: JavaScript ファイルは一つのファイルに結合されていること。
- 圧縮（Minify）: JavaScript ファイルは圧縮されていること。（
.min.jsという拡張子を使用できる。）
- JavaScript セキュリティ:
- ノンブロッキング: JavaScript ファイルは、
async属性を使用して非同期で読み込まれるか、defer属性を使用して遅延実行されている。
- Modernizr: もし、ある特定の機能を使用する際には、Modernizr を使用して、
<html>の class を追加することができる。
JavaScript テスティング
- ESLint: ESLint にてエラーが発生しないこと。（あなたの設定またはスタンダードなルールを基準とする。）
セキュリティ
ウェブサイトをスキャンして確認する
ベストプラクティス
- HTTPS: すべてのページ及び外部コンテンツで HTTPS が使用されている。（プラグイン、画像 ...）
- HTTP Strict Transport Security (HSTS): HTTP ヘッダーには 'Strict-Transport-Security' が設定されている。
- Cross Site Request Forgery (CSRF): CSRF 攻撃を防ぐために、あなたのサーバーへのリクエストにたいしては、それがあなたのウェブサイト/アプリから送信されていることを確認している。
- Cross Site Scripting (XSS): あなたのサイトには、XSS が可能な脆弱性が存在していない。
- Content Type Options サーバーからの
X-Content-Type-Optionsヘッダーによって、Google Chrome や Internet Explorer の mime-sniff による Content-Type に一致しない動作を防止する。
- X-Frame-Options (XFO) 来訪者をクリックジャッキング攻撃から保護する。
- Content Security Policy Content Security Policy によってあなたのサイトで、コンテンツがどのように読み込まれるか、許可されている場所から読み込まれているかなどを定義している。これはクリックジャッキング攻撃等からも防御することができる。
パフォーマンス
ベストプラクティス
- ページの重さ: それぞれのページの重さは 500 KB以下である。
- Minified HTML: HTML が圧縮 (Minify) されている。
- Lazy loading: 画像やスクリプト、CSS は、レスポンス時間を改善するために遅延ロードされている。（それぞれのセクションで詳細をみてください。）
- Cookie size: もし Cookie を使用しているなら、4096 バイトを超えていないこと、20以上の Cookie を使用していないこと。
- Third party components: 外部の JS に依存するサードパーティの iframe やコンポーネントは（例えばソーシャル共有ボタン）、可能な限りスタティックなコンポーネントに置き換えられるべきである。これによって外部 API の呼び出しに制限を与えることができ、ユーザーのプライバシーを保護することができる。
HTTP リクエストの最適化
- DNS resolution: サードパーティーサービスの DNS には
dns-prefetchを使用して、アイドル時間中に名前解決を行う。
<link rel="dns-prefetch" href="https://example.com">- Preconnection: サードパーティーサービスの DNS ルックアップ、TCP ハンドシェイク及び TLS ネゴシエーションには、
preconnectを使用してアイドル時間中に事前に行われている。
<link rel="preconnect" href="https://example.com">- Prefetching: すぐに必要になりそうなリソース（たとえば遅延ロードを行なっている画像）は、
prefetchを使用してアイドル時間中にリクエストを行なっている。
<link rel="prefetch" href="image.png">- Preloading: そのページで必要なリソース（たとえば
<body>の最後に設置されているスクリプトなど）にはpreloadを使用している。
<link rel="preload" href="app.js">パフォーマンステスト
- Google PageSpeed: ホームページだけでなく、すべてのページがテストされており、90-100 のスコアであること。
アクセシビリティ
Notes: You can watch the playlist A11ycasts with Rob Dodson
ベストプラクティス
- プログレッシブエンハンスメント: 主要な機能、たとえばメインナビゲーションや検索などは、JavaScript 無しでも動作しなければならない。
- Color contrast: カラーコントラストは WCAG のレベル AA を満たしている。（モバイル向けには AAA）
- H1: 全てのページには、サイトのタイトルとは違う H1 がある。
- Headings: 見出しは正しい順序で適切に使用されている。（H1 から H6）
ランドマーク
- Role banner:
<header>にはrole="banner"がある。 - Role navigation:
<nav>にはrole="navigation"がある。 - Role main:
<main>にはrole="main"がある。
セマンティック
- 適切な HTML5
inputタイプが使用されている: これは、キーパッドやウィジェットが様々なタイプにカスタマイズされるモバイルデバイスでは特に重要である。
- Label:
labelは、それぞれのフォーム要素に関連づけられている。もしlabelを表示できない場合にはaria-labelを使用する。
アクセシビリティテスト
- アクセシビリティスタンダードテスト: もしアクセシビリティスタンダードに準拠するなら、WAVE ツールを使用してテストを行うことができる。
- キーボード操作: すべてのインタラクティブな要素に到達可能で使用可能であることが、目に見える順序でキーボードだけを使ってテストされている。
- スクリーンリーダー: すべてのページはスクリーンリーダーでテストされている。（VoiceOver, ChromeVox, NVDA or Lynx）
- フォーカススタイル: もし、フォーカスが無効化されているなら、CSS による状態の可視化に置き換えられている。
- Google Analytics: Google Analytics がインストールされており、正しく設定されている。
- 見出し構造: 見出し用のテキストが、そのページの内容を理解することの手助けになっている。
- sitemap.xml:
sitemap.xmlが存在しており Google Search Console に登録されている。（旧 Google Webmaster Tools） - robots.txt:
robots.txtによってブロックされていないこと。
- 構造化データ: 構造化データを使用しており、エラーがないことをテストされている。構造化データはクローラーがそのページのコンテンツを理解するための手助けになっている。
- Sitemap HTML: HTML サイトマップが提供されており、フッターのリンクからリンクされている。
- Pagination link tags: Provide
rel="prev"andrel="next"to indicate paginated content.
<!-- Example: Pagination link tags for page 2 of a paginated list -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">フロントエンドチェックリストは、他の言語でも提供されています。すべての翻訳者の皆さん、すばらしい仕事をしてくれてありがとう！
フロントエンドチェックリストバッジ
もし、フロントエンドチェックリストのルールに従っていることをアピールしたいなら、README ファイルにこのバッジを貼ってください。
[](https://github.com/thedaviddias/Front-End-Checklist/)訳注： オリジナル版への貢献と区別するため、オリジナルへの貢献については英語の原文そのままを掲載しておきます。
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.
Support
If you have any question or suggestion, don't hesitate to use Gitter or Twitter:
Authors
Contributors
This project exists thanks to all the people who contribute. [Contribute].
Backers
Thank you to all our backers! 
[Become a backer]
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
License
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK