Go to Qiita Advent Calendar 2024 Top
LoginSignup
1654
1741

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@miya0001(Takayuki Miyauchi)inGeolonia

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

Last updated at Posted at 2017-10-23

Build Status

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

日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。

最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳)

Front-End Checklist Logo

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.

Join the chat at https://gitter.im/Front-End-Checklist/Lobby
Front‑End_Checklist followed
Backers on Open Collective Sponsors on Open Collective
Contributors
StackShare
CC0

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

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

Sponsor

目次

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

利用方法

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

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

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

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

Head

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

Meta タグ

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

<!doctype html>

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

  • 文字コード: High 文字コード (UTF-8) が正しく宣言されている。

<meta charset="utf-8">
  • X-UA-Compatible: Medium Meta タグ X-UA-Compatible が存在している。

<meta http-equiv="x-ua-compatible" content="ie=edge">

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

  • Viewport: High viewport が正しく宣言されている。

<meta name="viewport" content="width=device-width, initial-scale=1">
  • Title: High title が全てのページで使用されている。（SEO: Google は、タイトルで使用される文字幅をピクセルで計算し、472から482ピクセルで切り詰めます。平均的な文字数は半角で55文字となります。）

<title>Page Title less than 55 characters</title>
  • Description: High meta description が提供されており、これはユニークでありなおかつ150文字以下である。

<meta name="description" content="Description of the page less than 150 characters">
  • Favicons: Medium それぞれの favicon が作られており正しく表示されている。もし、favicon.ico しかない場合、それはあなたのサイトのルートに設置されている。通常はマークアップは必要ない。しかしながら、以下の例のようにリンクをはることがまだ有効である。昨今では、PNG フォーマット が .ico フォーマットよりも推奨されている。（サイズ: 32x32px）

<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">

<link rel="icon" type="image/png" href="https://example.com/favicon.png">
  • Apple Touch Icon: Low apple-mobile-web-app-capable がある。 (すくなくとも 200x200pxのAppleアイコンファイルを作成すれば、必要な全ての寸法をサポートする。) 

<link rel="apple-touch-icon" href="/custom-icon.png">
  • Windows カスタムタイル:Low Windows カスタムタイルが提供されリンクされている。

<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: Medium 重複したコンテンツを避けるために rel="canonical" を使用している。

<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">

HTML タグ

  • Language 属性: High あなたのサイトの言語を指定するための lang 属性が記述されている。
<html lang="en">
  • Direction 属性: Medium 書字方向を指定するための dir 属性が <html> タグに指定されている。（これは他の HTML タグ上でも使用可能である。）
<html dir="rtl">
  • 代替言語: Low あなたのサイトの言語タグが既述されており、現在のページに言語が関連づけられている。
<link rel="alternate" href="https://es.example.com/" hreflang="es">
  • 条件分岐コメント: Low もし必要なら、IE 用の条件分岐コメントタグが設置されている。

  • RSS フィード: Low もしあなたのサイトがブログ、もしくは記事をもっているなら、RSS へのリンクが提供されている。

  • インラインクリティカル CSS: Medium ページロード時にすぐに表示される部分のコンテンツを整える CSS は（"above the fold content"）、クリティカル CSS によってコールされている。それは、主要な CSS の前の <style></style> の間に記述されている。（圧縮されている）

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

ソーシャル

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

  • Facebook Open Graph: Low すべての 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">

<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
  • 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...)

  • エラーページ: High 404 及び 5xx 用のエラーページが存在している。5xx エラーページは CSS が内蔵されている必要があることを覚えておくこと。（サーバーに対する追加のリクエストを行わないこと。）

  • Noopener: Medium target="_blank" で外部リンクを使用する際には、rel="noopener" 属性をつけて Tabnabbing 脆弱性を防ぐこと。もしあなたが古いバージョンの Firefox をサポートする必要があるなら、rel="noopener noreferrer" を使用すること。

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

HTML のテスト

  • W3C 準拠:: High すべてのページを HTML バリデーターでテストして、問題点を抽出する。
  • HTML Lint: High ツールを使って HTML に問題があるかどうかを分析する。
  • リンクチェッカー: High リンク切れがなく、404 エラーが発生しないことを確認する。
  • 広告ブロッカーテスト: Medium 広告ブロッカーが有効でもコンテンツが正しく表示されている。（ユーザーに対してそれらの広告ブロッカーを無効化するようメッセージを表示することができる。）

⬆ トップに戻る

ウェブフォント

備考: Webフォントを使用すると、スタイルが適用されていないテキストが表示される現象（FFlash Of Unstyled Text）や フォントがロードされるまで表示されない現象（Flash of Invisible Text）が発生する可能性があります。フォールバックフォントを使用するか、ウェブフォントローダーを使用して動作を制御することを検討してください。

  • ウェブフォントのフォーマット: High WOFF, WOFF2 及び TTF はすべてのモダンブラウザでサポートされている。

  • ウェブフォントのサイズ: High ウェブフォントのサイズは、すべての綴りが含まれた状態で 2MB を超えないこと。

  • ウェブフォントローダー: Low ウェブフォントローダーで、ロード時の挙動を制御する。

⬆ トップに戻る

CSS

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

  • Responsive Web Design: High そのウェブサイトはレスポンシブデザインを採用している。
  • CSS Print: Medium 印刷用のスタイルシートがそれぞれのページに対して正しく提供されている。
  • Preprocessors: Low あなたのサイトは 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">

<div id="id-used-by-cms" class="js-slider my-slider">
  • 内部 CSS 及びインラインスタイル: High <style> による内部 CSS やインラインスタイルを使用することを避け、正当な理由でのみ使用する。（例： スライダー用の背景画像や CSS クリティカルなど）
  • ベンダープレフィックス: High CSS ベンダープレフィックスが、ブラウザの互換性に基づいて生成され、使用されている。

パフォーマンス

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

CSS のテスト

  • 文法: High すべての CSS 及び SCSS にはエラーがないこと。

  • レスポンシブデザイン: High すべてのページは、320px, 768px, 1024px のブレイクポイントでテストされていること。（可能であれば、アナリティクスの結果に基づいて他のブレイクポイントでもテストする。）

  • CSS バリデーター: Medium CSS がテストされ、関連するエラーが修正されていること。

  • デスクトップブラウザ: High すべてのページは現在あるすべてのデスクトップブラウザでテストされている。 (Safari, Firefox, Chrome, Internet Explorer, EDGE...)
  • モバイルブラウザ: High すべてのページは現在あるすべてのモバイルブラウザでテストされている。 (Native browser, Chrome, Safari...)
  • OS: High すべてのページは現在あるすべての OS でテストされている。 (Windows, Android, iOS, Mac...).
  • ピクセルパーフェクト: High すべてのページはピクセルパーフェクトに近い状態であること。クリエイティブの品質によっては 100% 正確ではない場合があるが、テンプレートにほぼ近い状態である必要がある。

Pixel Perfect - Chrome Extension

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

⬆ トップに戻る

画像

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

ベストプラクティス

  • Optimization: High すべての画像はブラウザでの表示に対して最適化されていること。WebP フォーマットは、ホームページのような重要なページでも使用することができます。
  • 🛠 Imagemin
  • 🛠 Use ImageOptim to optimise your images for free.
  • 🛠 Use Kraken.io awesome alternative for both png and jpg optimization. Up to 1mb per files on free plan.
  • Picture/Srcset: Medium picture/srcset によって現在のビューポートに最も適切なイメージを提供する。
  • Retina: Low Retina ディスプレイをサポートするために2倍または3倍のイメージサイズの画像を提供している。
  • Sprite: Medium 小さい画像はスプライト画像にまとめられている。（アイコンの場合は、SVGスプライトイメージに含めることができます。）
  • Width and Height: High 最終的に表示される際のサイズがわかっている場合、すべての <img> は、height と width が指定されている。（px または % を指定しない。）
  • Alt テキスト: High すべての <img> は Alt テキストが代替テキストとして指定されていること。
  • 遅延ロード: Medium 画像は遅延ロードされていること。（noscript による代替策が常に提供されていること。）

⬆ トップに戻る

JavaScript

ベストプラクティス

  • インライン JavaScript: High インライン JavaScript がないこと。（HTML と混ざっているもの）
  • ファイルの結合: High JavaScript ファイルは一つのファイルに結合されていること。
  • 圧縮（Minify）: High JavaScript ファイルは圧縮されていること。（.min.js という拡張子を使用できる。）
  • JavaScript セキュリティ: High
  • ノンブロッキング: Medium JavaScript ファイルは、async 属性を使用して非同期で読み込まれるか、defer 属性を使用して遅延実行されている。
  • Modernizr: Low もし、ある特定の機能を使用する際には、Modernizr を使用して、<html> の class を追加することができる。

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 Scripting (XSS): High あなたのサイトには、XSS が可能な脆弱性が存在していない。
  • Content Type Options Medium サーバーからの X-Content-Type-Options ヘッダーによって、Google Chrome や Internet Explorer の mime-sniff による Content-Type に一致しない動作を防止する。
  • X-Frame-Options (XFO) Medium 来訪者をクリックジャッキング攻撃から保護する。
  • Content Security Policy Medium Content Security Policy によってあなたのサイトで、コンテンツがどのように読み込まれるか、許可されている場所から読み込まれているかなどを定義している。これはクリックジャッキング攻撃等からも防御することができる。

⬆ トップに戻る

パフォーマンス

ベストプラクティス

  • ページの重さ: High それぞれのページの重さは 500 KB以下である。
  • Minified HTML: Medium HTML が圧縮 (Minify) されている。

  • Lazy loading: Medium 画像やスクリプト、CSS は、レスポンス時間を改善するために遅延ロードされている。（それぞれのセクションで詳細をみてください。）

  • Cookie size: もし Cookie を使用しているなら、4096 バイトを超えていないこと、20以上の Cookie を使用していないこと。

  • Third party components: Medium 外部の JS に依存するサードパーティの iframe やコンポーネントは（例えばソーシャル共有ボタン）、可能な限りスタティックなコンポーネントに置き換えられるべきである。これによって外部 API の呼び出しに制限を与えることができ、ユーザーのプライバシーを保護することができる。

HTTP リクエストの最適化

  • DNS resolution: Low サードパーティーサービスの DNS には dns-prefetch を使用して、アイドル時間中に名前解決を行う。
<link rel="dns-prefetch" href="https://example.com">
  • Preconnection: Low サードパーティーサービスの DNS ルックアップ、TCP ハンドシェイク及び TLS ネゴシエーションには、preconnect を使用してアイドル時間中に事前に行われている。
<link rel="preconnect" href="https://example.com">
  • Prefetching: Low すぐに必要になりそうなリソース（たとえば遅延ロードを行なっている画像）は、prefetch を使用してアイドル時間中にリクエストを行なっている。
<link rel="prefetch" href="image.png">
  • Preloading: Low そのページで必要なリソース（たとえば <body> の最後に設置されているスクリプトなど）には preload を使用している。
<link rel="preload" href="app.js">

パフォーマンステスト

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

⬆ トップに戻る

アクセシビリティ

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

ベストプラクティス

  • プログレッシブエンハンスメント: Medium 主要な機能、たとえばメインナビゲーションや検索などは、JavaScript 無しでも動作しなければならない。
  • Color contrast: Medium カラーコントラストは WCAG のレベル AA を満たしている。（モバイル向けには AAA）

見出し

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

ランドマーク

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

セマンティック

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

フォーム

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

アクセシビリティテスト

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

⬆ トップに戻る

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 サイトマップが提供されており、フッターのリンクからリンクされている。
  • Pagination link tags: Medium Provide rel="prev" and rel="next" to indicate paginated content.

<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">

⬆ トップに戻る

翻訳

フロントエンドチェックリストは、他の言語でも提供されています。すべての翻訳者の皆さん、すばらしい仕事をしてくれてありがとう！

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

もし、フロントエンドチェックリストのルールに従っていることをアピールしたいなら、README ファイルにこのバッジを貼ってください。

➔ Front‑End_Checklist followed

[![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](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

David Dias

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

CC0

⬆ トップに戻る

1654
1741
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1654
1741

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?