コーディングガイドライン

推奨環境

OS

• Windows：11、10、8.1（2023年1月10日までサポート）
• macOS： 最新3バージョン（2021/11/4時点では 10.15 Catalina、11 Big Sur、12 Monterey）
• iOS：現行バージョン＋1つ前のバージョン
• Android：8.0〜以上（参考：Androidのバージョン履歴）

ブラウザ

• Edge最新版
• Chrome最新版
• Firefox最新版
• Safari最新版（macOS/iOSのバージョンに準ずる）
• Android Chrome最新版

.browserlists記入例

last 2 versions
not ie <= 11
firefox ESR
not Android < 8

参考

• Yahooセキュリティ強化のお知らせ
• Microsoft ライフライクルポリシー
• Androidシェア
• iOSシェア
• 対応ブラウザ - Gmailヘルプ
• 対応ブラウザ - Youtubeヘルプ
• Yahoo! JAPANの推奨ブラウザー 
• ライフサイクルに関するFAQ - Internet Explorer
• Download virtual machines | Microsoft Edge Development
• Microsoft Edge Insider
• Safari for Developers
• Safari - Wikipedia
• Chromeブラウザのシステム要件
• Firefoxの動作要件

ブレークポイント

Recommended width breakpoints to support different screen sizes

案件ごとにターゲットとする端末を定め設定してください。

以下に例を挙げます。

iOSベース

• スマートフォン（portrait）：(max-width: 414px)
• スマートフォン（landscape）：(min-width: 415px) and (max-width: 767px)
• タブレット：(min-width: 768px) and (max-width: 1023px)
• PC（S）：(min-width: 1024px) and (max-width: 1279px)
• PC（M）：(min-width: 1280px) and (max-width: 1439px)
• PC（L）：(min-width: 1440px)

Androidベース

• スマートフォン（normal/portrait）：(max-width: 479px)
• スマートフォン（large/landscape）：(min-width: 480px) and (max-width: 719px)
• タブレット：(min-width: 720px) and (max-width: 959px)
• PC（S）：(min-width: 960px) and (max-width: 1279px)
• PC（M）：(min-width: 1280px) and (max-width: 1439px)
• PC（L）：(min-width: 1440px)

参考

iOS

• The Ultimate Guide To iPhone Resolutions
• Device Screen Sizes and Orientations | Human Interface Guidelines
• Displays | Apple Developer

Android

• Configuration qualifier names | Android Developers

small: The minimum layout size for a small screen is approximately 320x426 dp units.
normal: The minimum layout size for a normal screen is approximately 320x470 dp units.
large: The minimum layout size for a large screen is approximately 480x640 dp units.
xlarge: The minimum layout size for an xlarge screen is approximately 720x960 dp units.

• Support different screen sizes

Here's how other smallest width values correspond to typical screen sizes:

320dp: a typical phone screen (240x320 ldpi, 320x480 mdpi, 480x800 hdpi, etc).
480dp: a large phone screen ~5" (480x800 mdpi).
600dp: a 7” tablet (600x1024 mdpi).
720dp: a 10” tablet (720x1280 mdpi, 800x1280 mdpi, etc).

• Breakpoints | Material Design
• Android端末カタログ

実装

• メディアクエリの使用 | MDN
• プログラムによるメディアクエリのテスト | MDN

その他

• mydevice.io
• DEVICE METRICS

日本における画面解像度のシェア（2020/12-2021/12）

• https://gs.statcounter.com/screen-resolution-stats/desktop/japan/#monthly-202012-202112-bar

① 1920×1080：27.09%

② 1366×768：12.58%

③ 1536×864：10.37%

• https://gs.statcounter.com/screen-resolution-stats/tablet/japan/#monthly-202012-202112-bar

① 768×1024：48.94%（iPad）

② 834×1112：7.52% （iPad Air）

③ 1024×1366：4.2% （iPad Pro）

• https://gs.statcounter.com/screen-resolution-stats/mobile/japan/#monthly-202012-202112-bar

① 375×667：19.36% （iPhone 6/7/8）

② 360×640：14.18%（Android）

③ 375×812：13.19%（iPhone X）

Editorconfig

root = true

[*]
charset = utf-8
end_of_line = lf
indent_style = tab
indent_size = 4
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
indent_style = space
indent_size = 4
trim_trailing_whitespace = false

[*.js]
indent_style = space
indent_size = 2

[{package.json,postcss.json}]
indent_style = space
indent_size = 2

• 文字コード・改行コードは全てUTF-8/LF
• HTML/CSSのインデントはハードタブ
• Javascriptのインデントはスペース2つ分
• マークダウンのインデントはスペース4つ分

HTML

指定がない限りHTML5とする。（UTF-8/LF）

仕様は WHATWG Living Standard (日本語訳)に準拠する。

参考

• HTML: HyperText Markup Language | MDN
• Nu Html Checker

タグ・属性

全て小文字で記載する。 id、class名も全て小文字、単語間はハイフンでつなぐ。

アクセシビリティ

• 用途にあったタグを使用する。
• button main nav のような、タグ自体に意味があるものは role 属性は付加しない。
• 最低限のキーボードアクセス、スクリーンリーダーでの読み上げに配慮する。
• アウトラインを明確化する。

ドキュメント

• Web Content Accessibility Guidelines (WCAG) 2.0
• WCAG 2.0 解説書
• WCAG 2.0 達成方法集
• WAI-ARIAの基本 | MDN
• WAI-ARIA 1.2

チェックツール

• HTML_CodeSniffer
• Another HTML-lint 5 アクセシビリティチェック
• a11y.css
• アクセシビリティインスペクター
• Accessibility Reference | Tools for Web Developers | Google Developers

見出し

基本的にh1は1ファイルに1つ。

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<header></header>
<main>
  <h1></h1>
  <section>
    <h2></h2>
    <section>
      <h3></h3>
    </section>
    <section>
      <h3></h3>
    </section>
  </section>
</main>
<footer></footer>
</body>
</html>

省略

基本的にタグの省略はしない。

文字参照・実体参照

基本的には Google HTML StyleGuide と同様にHTMLで使用される<や&、&nbspなどの空白文字以外には使わない方針とするが、¥ © ® ™ は実体参照を使用する。

The only exceptions apply to characters with special meaning in HTML (like < and &) as well as control or “invisible” characters (like no-break spaces).

※hrefのパラメータとしての&も&とする。

※Windowsでの「〜」に関してはXPがサポート終了したため対応しない。波ダッシュ、全角チルダ問題まとめ

※空白文字はノーブレークスペース や単語結合子⁠、ソフトハイフン­などに相当

• Named character references (WHATWG) JSON版
• Character Entry Reference Chart (W3C)
• Using character escpes in markup and CSS

パンくず

デザイン上のマークアップとは別に、ld+jsonで記載

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "item": {
      "@id": "https://example.com/books",
      "name": "Books"
    }
  },{
    "@type": "ListItem",
    "position": 2,
    "item": {
      "@id": "https://example.com/books/authors",
      "name": "Authors"
    }
  },{
    "@type": "ListItem",
    "position": 3,
    "item": {
      "@id": "https://example.com/books/authors/annleckie",
      "name": "Ann Leckie"
    }
  },{
    "@type": "ListItem",
    "position": 4,
    "item": {
      "@id": "https://example.com/books/authors/ancillaryjustice",
      "name": "Ancillary Justice"
    }
  }]
}
</script>

<ol>
  <li>
    <a href="http://www.example.com/books">Books</a>
  </li>
  <li>
    <a href="http://www.example.com/sciencefiction">Science Fiction</a>
  </li>
  <li>
    <a href="http://www.example.com/books/sciencefiction/awardwinners">Award Winners</a>
  </li>
<ol>

• BreadCrumb | Google Developers
• BreadCrumb - schema.org
• JSON-LD | JSON for Linking Data
• Introduction to Structured Data
• 構造化データ テストツール
• 構造化データ マークアップ支援ツール
• Google推奨「JSON-LD」で構造化マークアップ - Qiita

ページ読み込み時間

LAN/Wi-Fi環境で3秒以内にファーストビューが表示されるようにする。

CSS

• Normalize.css や sanitize.css をベースとする。
• CSSプリプロセッサは基本的にSASS とする。
• BEMやFLOCCS、RSCSS、ECSSなどを参考に設計。

Opentype系設定

• 文字詰め：pkna
• ハイフネーション：欧文時有効にしておく
• リガチャ：日本語で「ます」が「〼」になることがあるので注意

JavaScript

Javascript Standard Style(日本語訳)に準拠する。

※セミコロン必須の JavaScript Semi-Standard Style も有。

Javascript Standard Style

Node.js

インストール

• グローバル

$ npm install standard --global

• ローカル

$ npm install standard --save-dev

※ .eslinrc や .jshintrc のような設定ファイルは不要

使用方法

プロジェクトのjsフォルダに移動

$ cd (プロジェクトのjsフォルダ)

下記のコマンドを実行

$ standard

※デフォルトでは /*.js,/*.jsx が対象

もしくはファイルを指定して実行

$ standard "src/util/**/*.js" "test/**/*.js"

--fix オプションをつけて実行することで自動的にフォーマット。

$ standard --fix

テキストエディタ
Sublime Text

lint：SublimeLinter＋SublimeLinter-contrib-standard

自動フォーマット：StandardFormat

Atom

• lint：linter-js-standard
• 自動フォーマット：standard-formatter

Visual Studio Code

• vscode-standardjs

参考

• JavaScript Standard Styleのススメ

Git

運用方法

• 本番と同じ状態のものを mainとし、このブランチでは作業しない。
• ステージング環境やテスト環境で状態が異なる場合は stage test などのブランチを作成し各環境に合わせる。
• 作業時は update {作業内容} {作業者名} 等、別のブランチに分岐させて作業し、作業完了後は責任者にプル（マージ）リクエストを作成する。

コミットコメント

1行目に簡単な説明

2行目は空行

3行目以降に詳しい説明（任意）

例）

[10/25更新] ABOUT文言修正 

「エヴォワークスとは」→「EVOWORXとは」に修正

参考

• SourceTreeの使い方 | コミット間の差分ファイルの抽出 （カスタム操作を使う方法）
• SourceTreeでコミット間の差分ファイルを圧縮しないで取り出す方法
• SourceTreeで差分ファイルを作りたい。けどコピペで動かない時の記事。
• Git - git-checkout-index
• Gitでやらかした時に使える19個の奥義