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

INDEX

推奨環境

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

参考

ブレークポイント

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

Android

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.
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).

実装

その他

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

① 1920×1080:27.09%

② 1366×768:12.58%

③ 1536×864:10.37%

① 768×1024:48.94%(iPad)

② 834×1112:7.52% (iPad Air)

③ 1024×1366:4.2% (iPad Pro)

① 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 (日本語訳)に準拠する。

参考

タグ・属性

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

アクセシビリティ

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

ドキュメント

チェックツール

見出し

基本的に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がサポート終了したため対応しない。波ダッシュ、全角チルダ問題まとめ

※空白文字はノーブレークスペース&nbsp;単語結合子&#8288;ソフトハイフン&shy;などに相当

パンくず

デザイン上のマークアップとは別に、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>

ページ読み込み時間

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

CSS

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:SublimeLinterSublimeLinter-contrib-standard

自動フォーマット:StandardFormat

Atom

Visual Studio Code

参考

Git

運用方法

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

コミットコメント

1行目に簡単な説明

2行目は空行

3行目以降に詳しい説明(任意)

例)

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

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

参考

PREV

GUIDELINE & TIPS一覧

NEXT

最新記事 Latest