GUIDELINE&TIPS

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

Written by EVOWORX

INDEX

推奨環境

OS

  • Windows：11、10
  • macOS： 最新3バージョン
  • iOS：最新2バージョン
  • Android：最新4バージョン

※macOS/Androidに関しては、サポート終了期間が明記されていませんが、セキュリティアップデートが配信されなくなったものを除外すると上記のようになります。

ブラウザ

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

.browserlists記入例

> 0.5% in JP
last 2 versions
FF ESR
not ie >=11
not dead

参考

ブレークポイント

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

以下に例を挙げます。

iPadを基準とした場合

  • スマートフォン：(max-width: 767px)
  • タブレット：(min-width: 768px) and (max-width: 1279px)
  • PC：(min-width: 1280px) and (max-width: 1439px)
  • ワイドスクリーン：(min-width: 1440px)

8の倍数のグリッドを基準とした場合

  • スマートフォン（縦）：(max-width: 479px)
  • スマートフォン（横）：(min-width: 480px) and (max-width: 799px)
  • タブレット：(min-width: 800px) and (max-width: 1119px)
  • PC：(min-width: 1120px) and (max-width: 1439px)
  • ワイドスクリーン：(min-width: 1440px)

参考

iPhone 15 Plus / 15 Pro Max / 14 Pro Max： 430 x 932

iPhone 14 Plus / 13 Pro Max：428 x 926

iPhone 15 / 15 Pro / 14 Pro：393 x 852

iPhone 14 / 13 / 13 Pro： 390 x 844

iPhone 13 mini： 375 x 812

iPhone SE (3rd)： 375 x 667

iPad Pro 12.9"(6th) ： 1024 x 1366

iPad Pro 11" (4th) ： 834 x 1194

iPad (10th) / iPad Air (5th)： 820 x 1180

iPad mini (6th) ：744 x 1133

320dp: 通常のスマートフォンの画面（240x320 ldpi、320x480 mdpi、480x800 hdpi など）。

480dp: 5 インチ未満の大画面スマートフォン（480x800 mdpi）。

600dp: 7 インチ タブレット（600x1024 mdpi）。

720dp: 10 インチ タブレット（720x1280 mdpi、800x1280 mdpi など）。

日本における画面解像度のシェア（2022/09-2023/09）

デスクトップ

  1. 1920×1080：26.87%
  2. 1536×864 ：11.58%
  3. 1366×768 ：10.32%

タブレット

  1. 768×1024：38.41%（iPad 〜7th、iPad mini 〜5th 他）
  2. 810×1080：9.98% （iPad 7th〜9th)
  3. 834×1194：5.28% （iPad Pro 11"）

モバイル

  1. 390×844：18.49% （iPhone 12〜14）
  2. 375×667：14.05%（iPhone SE 3rd）
  3. 375×812：11.59%（iPhone 13 mini / 12mini）

Editorconfig

各プロジェクトでEditorconfigを設定する。

設定例

root = true

[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

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

※PrettierでもEditorCofngは利用可能です。

HTML

指定がない限り WHATWG Living Standard (日本語訳) に準拠する。

参考

タグ・属性

  • 用途にあったタグを使用する。
  • 全て小文字で記載する。 id、class名も全て小文字、単語間はハイフンでつなぐ。
  • 終了タグの省略はしない。
  • imgタグ、picture内のsourceタグにはwidth/heightを指定する。loading / decording は使用箇所に応じて適宜選択する。

参考

アクセシビリティ

  • アウトラインを明確化する。
  • button main nav のような、タグ自体に意味があるものは role 属性は付加しない。
  • 最低限のキーボードアクセス、スクリーンリーダーでの読み上げに配慮する。
  • 指定がない場合、WCAG2.0（JIS X 8341-3:2016）のレベルA基準を満たすことを目標とする。

参考

見出し

基本的にh1は1ファイルに1つとし、titleタグの内容と一致するようにする。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<header>
<p>Site Name</p>
</header>
<main>
  <h1>Page Title</h1>
  <section>
    <h2>Heading</h2>
    <section>
      <h3>Sub Heading</h3>
    </section>
    <section>
      <h3>Sub Heading</h3>
    </section>
  </section>
</main>
<footer></footer>
</body>
</html>

文字参照・特殊文字

基本的には Google HTML StyleGuide と同様にHTMLで使用される < > " & や 空白文字以外には使わない方針とする。

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 のパラメータとしての&も&ampとする。

※空白文字はノーブレークスペース&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>

Favicon

下記5ファイルを設定。

  • favicon.ico 32x32
  • icon.svg 180x180※サイズ目安
  • apple-touch-icon.png 180x180
  • icon-192.png 192x192
  • manifest.json
<!-- <head> -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

/* manifest.json */
{"icons": [
  { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }
]}

※PWAの場合は512pxのスプラッシュ画像も含める

参考

CSS

JavaScript

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

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

Core Web Vitalsについて

Core Web Vitalsの指標 に基づき、LCP2.5秒以内、FID100mミリ秒未満、CLSスコア0.1未満を可能な範囲で目指す。

Git

運用方法

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

コミットコメント

1行目に簡単な説明

2行目は空行

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

例）

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

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

その他

Wordpress、MovableType のようなCMS、Astro、11ty などのSSG、Next.js、Nuxt.js、Svelte 等のライブラリの使用や制作環境は案件に応じて適したものを適宜選択すること。

最終更新：2023/10/24

PICK UP