VOOZH about

URL: https://qiita.com/miya0001/items/8fff46c201bf9eaeba4a

⇱ フロントエンドチェックリスト（日本語訳） #JavaScript - Qiita

👁 Image
1648

Go to list of users who liked

1734

Share on X(Twitter)

Share on Facebook

Add to Hatena Bookmark

More than 5 years have passed since last update.

@miya0001(Takayuki Miyauchi)in👁 Image
Geolonia

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

1648
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">

<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 という拡張子を使用できる。）
  • ノンブロッキング: 👁 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].
👁 Image

Backers

Thank you to all our backers! 🙏 [Become a backer]

👁 Image

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

👁 Image

👁 Image

👁 Image

👁 Image

👁 Image

👁 Image

👁 Image

👁 Image

👁 Image

👁 Image

License

👁 CC0

⬆ トップに戻る

1648

Go to list of users who liked

1734
0

Go to list of comments

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
1648

Go to list of users who liked

1734