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

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

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

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の問題が発生することがあります。テストの優先順位はまずこれらの項目からはじめるべきです。

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

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

Head

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

Meta タグ

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


<!doctype html>

📖 Determining the character encoding - HTML5 W3C

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

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


<meta charset="utf-8">

X-UA-Compatible: Meta タグ X-UA-Compatible が存在している。


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

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

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


<meta name="viewport" content="width=device-width, initial-scale=1">

Title: title が全てのページで使用されている。（SEO: Google は、タイトルで使用される文字幅をピクセルで計算し、472から482ピクセルで切り詰めます。平均的な文字数は半角で55文字となります。）


<title>Page Title less than 55 characters</title>

📖 Title - HTML - MDN

🛠 SERP Snippet Generator

Description: meta description が提供されており、これはユニークでありなおかつ150文字以下である。


<meta name="description" content="Description of the page less than 150 characters">

📖Meta Description - HTML - MDN

Favicons: それぞれの 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">

🛠 Favicon Generator

🛠 RealFaviconGenerator

📖 Favicon Cheat Sheet

📖 Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? - CSS Tricks

📖 PNG favicons - caniuse

Apple Touch Icon: apple-mobile-web-app-capable がある。 (すくなくとも 200x200pxのAppleアイコンファイルを作成すれば、必要な全ての寸法をサポートする。)


<link rel="apple-touch-icon" href="/custom-icon.png">

📖 Configuring Web Applications

Windows カスタムタイル: 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>

📖 Browser configuration schema reference

Canonical: 重複したコンテンツを避けるために rel="canonical" を使用している。


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

📖 Use canonical URLs - Search Console Help - Google Support

📖 5 common mistakes with rel=canonical - Google Webmaster Blog

HTML タグ

Language 属性: あなたのサイトの言語を指定するための lang 属性が記述されている。

<html lang="en">

Direction 属性: 書字方向を指定するための dir 属性が <html> タグに指定されている。（これは他の HTML タグ上でも使用可能である。）

<html dir="rtl">

📖 dir - HTML - MDN

代替言語: あなたのサイトの言語タグが既述されており、現在のページに言語が関連づけられている。

<link rel="alternate" href="https://es.example.com/" hreflang="es">

条件分岐コメント: もし必要なら、IE 用の条件分岐コメントタグが設置されている。

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

RSS フィード: もしあなたのサイトがブログ、もしくは記事をもっているなら、RSS へのリンクが提供されている。
インラインクリティカル CSS: ページロード時にすぐに表示される部分のコンテンツを整える CSS は（"above the fold content"）、クリティカル CSS によってコールされている。それは、主要な CSS の前の <style></style> の間に記述されている。（圧縮されている）

🛠 Critical by Addy Osmani on GitHub は、これを自動的に行います。

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

<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

📖 A Guide to Sharing for Webmasters

🛠 Facebook OG testing であなたのサイトをテストしましょう。

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

📖 Getting started with cards — Twitter Developers

🛠 Twitter card validator であなたのサイトのテストをしましょう。

⬆ トップに戻る

HTML

ベストプラクティス

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

📖 HTML Reference

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

📖 About rel=noopener

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

HTML のテスト

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

🛠 W3C validator

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

🛠 Dirty markup

🛠 Sonar a linting tool for the web

リンクチェッカー: リンク切れがなく、404 エラーが発生しないことを確認する。

🛠 W3C Link Checker

広告ブロッカーテスト: 広告ブロッカーが有効でもコンテンツが正しく表示されている。（ユーザーに対してそれらの広告ブロッカーを無効化するようメッセージを表示することができる。）

⬆ トップに戻る

ウェブフォント

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

📖 Google Technical considerations about webfonts

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

📖 WOFF - Web Open Font Format - Caniuse.

📖 WOFF 2.0 - Web Open Font Format - Caniuse.

📖 TTF/OTF - TrueType and OpenType font support

📖 Using @font-face - CSS-Tricks

ウェブフォントのサイズ: ウェブフォントのサイズは、すべての綴りが含まれた状態で 2MB を超えないこと。
ウェブフォントローダー: ウェブフォントローダーで、ロード時の挙動を制御する。

🛠 Typekit Web Font Loader

⬆ トップに戻る

CSS

備考: 多くのフロントエンド開発者が従っている 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 フレームワークを使用しているなら、それらはすでに導入されている。)

📖 Reset.css

📖 Normalize.css

📖 Reboot

JS prefix: すべての class (または JavaScript で使用されいる ID) は、js- で始まっており、それらは CSS で使用されていない。

<div id="js-slider" class="my-slider">

<div id="id-used-by-cms" class="js-slider my-slider">

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

🛠 Autoprefixer CSS online

パフォーマンス

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

📖 loadCSS by filament group

📖 Example of preload CSS using loadCSS

Unused CSS: 使用していない CSS は削除されていること。

🛠 UnCSS Online 🛠

🛠 PurifyCSS

🛠 Chrome DevTools Coverage

CSS のテスト

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

🛠 stylelint, a CSS linter

📖 Sass guidelines

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

🛠 CSS Validator

デスクトップブラウザ: すべてのページは現在あるすべてのデスクトップブラウザでテストされている。 (Safari, Firefox, Chrome, Internet Explorer, EDGE...)
モバイルブラウザ: すべてのページは現在あるすべてのモバイルブラウザでテストされている。 (Native browser, Chrome, Safari...)
OS: すべてのページは現在あるすべての OS でテストされている。 (Windows, Android, iOS, Mac...).

ピクセルパーフェクト: すべてのページはピクセルパーフェクトに近い状態であること。クリエイティブの品質によっては 100% 正確ではない場合があるが、テンプレートにほぼ近い状態である必要がある。

Pixel Perfect - Chrome Extension

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

📖 Building RTL-Aware Web Apps & Websites: Part 1 - Mozilla Hacks

📖 Building RTL-Aware Web Apps & Websites: Part 2 - Mozilla Hacks

⬆ トップに戻る

画像

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

ベストプラクティス

Optimization: すべての画像はブラウザでの表示に対して最適化されていること。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: picture/srcset によって現在のビューポートに最も適切なイメージを提供する。

📖 How to Build Responsive Images with srcset

Retina: Retina ディスプレイをサポートするために2倍または3倍のイメージサイズの画像を提供している。
Sprite: 小さい画像はスプライト画像にまとめられている。（アイコンの場合は、SVGスプライトイメージに含めることができます。）
Width and Height: 最終的に表示される際のサイズがわかっている場合、すべての <img> は、height と width が指定されている。（px または % を指定しない。）
Alt テキスト: すべての <img> は Alt テキストが代替テキストとして指定されていること。

📖 Alt-texts: The Ultimate Guide

遅延ロード: 画像は遅延ロードされていること。（noscript による代替策が常に提供されていること。）

⬆ トップに戻る

JavaScript

ベストプラクティス

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

📖 Minify Resources (HTML, CSS, and JavaScript)

JavaScript セキュリティ:

📖 Guidelines for Developing Secure Applications Utilizing JavaScript

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

📖 Remove Render-Blocking JavaScript

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

🛠 Customize your Modernizr

JavaScript テスティング

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

📖 ESLint - The pluggable linting utility for JavaScript and JSX

⬆ トップに戻る

セキュリティ

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

securityheaders.io

Observatory by Mozilla

ASafaWeb - Automated Security Analyser for ASP.NET Websites

ベストプラクティス

HTTPS: すべてのページ及び外部コンテンツで HTTPS が使用されている。（プラグイン、画像 ...）

🛠 Let's Encrypt - Free SSL/TLS Certificates

🛠 Free SSL Server Test

📖 Strict Transport Security

HTTP Strict Transport Security (HSTS): HTTP ヘッダーには 'Strict-Transport-Security' が設定されている。

🛠 Check HSTS preload status and eligibility

📖 HTTP Strict Transport Security Cheat Sheet - OWASP

📖 Transport Layer Protection Cheat Sheet - OWASP

Cross Site Request Forgery (CSRF): CSRF 攻撃を防ぐために、あなたのサーバーへのリクエストにたいしては、それがあなたのウェブサイト/アプリから送信されていることを確認している。

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

Cross Site Scripting (XSS): あなたのサイトには、XSS が可能な脆弱性が存在していない。

📖 XSS (Cross Site Scripting) Prevention Cheat Sheet - OWASP

📖 DOM based XSS Prevention Cheat Sheet - OWASP

Content Type Options サーバーからの X-Content-Type-Options ヘッダーによって、Google Chrome や Internet Explorer の mime-sniff による Content-Type に一致しない動作を防止する。

📖 X-Content-Type-Options - Scott Helme

X-Frame-Options (XFO) 来訪者をクリックジャッキング攻撃から保護する。

📖 X-Frame-Options - Scott Helme

📖 RFC7034 - HTTP Header Field X-Frame-Options

Content Security Policy Content Security Policy によってあなたのサイトで、コンテンツがどのように読み込まれるか、許可されている場所から読み込まれているかなどを定義している。これはクリックジャッキング攻撃等からも防御することができる。

📖 Content Security Policy - An Introduction - Scott Helme

📖 CSP Cheat Sheet - Scott Helme

📖 CSP Cheat Sheet - OWASP

⬆ トップに戻る

パフォーマンス

ベストプラクティス

ページの重さ: それぞれのページの重さは 500 KB以下である。

🛠 Website Page Analysis

📖 Size Limit: Make the Web lighter

Minified HTML: HTML が圧縮 (Minify) されている。

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

📖 Cookie specification: RFC 6265

📖 Cookies

🛠 Browser Cookie Limits

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

🛠 Simple sharing buttons generator

HTTP リクエストの最適化

📖 Explanation of the following techniques

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

📖 Difference between prefetch and preload

パフォーマンステスト

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

🛠 Google PageSpeed

🛠 Test your mobile speed with Google

🛠 WebPagetest - Website Performance and Optimization Test

🛠 GTmetrix - Website speed and performance optimization

⬆ トップに戻る

アクセシビリティ

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

ベストプラクティス

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

📖 Enable / Disable JavaScript in Chrome Developer Tools

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

🛠 Contrast ratio

見出し

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

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

ランドマーク

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

📖 Using ARIA landmarks to identify regions of a page

📖 ARIA roles categorization

セマンティック

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

📖 Mobile Input Types

フォーム

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

📖 Using the aria-label attribute - MDN

アクセシビリティテスト

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

🛠 Wave testing

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

📹 Managing Focus - A11ycasts #22

⬆ トップに戻る

SEO

Google Analytics: Google Analytics がインストールされており、正しく設定されている。
見出し構造: 見出し用のテキストが、そのページの内容を理解することの手助けになっている。
sitemap.xml: sitemap.xml が存在しており Google Search Console に登録されている。（旧 Google Webmaster Tools）
robots.txt: robots.txt によってブロックされていないこと。

📖 The robots.txt file

🛠 Test your robots.txt with Google Robots Testing Tool

構造化データ: 構造化データを使用しており、エラーがないことをテストされている。構造化データはクローラーがそのページのコンテンツを理解するための手助けになっている。

📖 Introduction to Structured Data - Search - Google Developers

📖 RDFa - Linked Data in HTML

📖 JSON-LD

📖 Microdata

🛠 Test your page with the Structured Data Testing Tool

🛠 Complete list of vocabularies that can be used as structured data. Schema.org Full Hierarchy

Sitemap HTML: HTML サイトマップが提供されており、フッターのリンクからリンクされている。

📖 Sitemap guidelines - Google Support

Pagination link tags: Provide rel="prev" and rel="next" to indicate paginated content.

🛠 Pagination (rel="prev/next") Testing Tool

📖 Pagination guidelines - Google Support


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

⬆ トップに戻る

翻訳

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

🇯🇵 Japanese: miya0001/Front-End-Checklist
🇪🇸 Spanish: eoasakura/Front-End-Checklist-ES
🇨🇳 Chinese: JohnsenZhou/Front-End-Checklist
🇰🇷 Korean: kesuskim/Front-End-Checklist
🇧🇷 Portuguese: jcezarms/Front-End-Checklist
🇻🇳 Vietnamese: euclid1990/Front-End-Checklist
🇹🇼 Traditional Chinese: EngineLin/Front-End-Checklist
🇫🇷 French: ynizon/Front-End-Checklist
🇷🇺 Russian: ungear/Front-End-Checklist
🇹🇷 Turkish: erdoganoksuz/Front-End-Checklist, eraycetinay/Front-End-Checklist

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

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

➔

[![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.