【備忘録】HTMLとJavaScriptの命名ルールと属性の順番【現役エンジニアの実例】

命名規則の基本方針
- 命名ルールの基本的な考え方
HTMLにおけるidとclassの命名ルール
HTML属性の並び順ルール
JavaScriptにおける命名規則
まとめ：コーディング規約の重要性
- 重要なポイント

HTMLやJavaScriptの命名規則に迷うこと、ありませんか？

本記事では、現役エンジニアである私が実際に使っている「命名ルール」と「属性の並び順」について、備忘録としてまとめました。

CSSのプロパティの記述順序については以下の記事で解説してます。

あわせて読む

: 【CSS】プロパティの記述順序

もくじCSSのプロパティ順序が重要な理由プロパティの並び順のルール（パターン紹介）1. グループ分類順2. アルファベット順3. 独自ルールの作成まとめ CSSを書いていて、「なんとなく書いたけど、あ ...

命名規則の基本方針

コーディングをするうえで、命名規則（ネーミングルール）は非常に重要です。

コードは「書いた人」だけでなく「読む人（＝未来の自分や他の開発者）」にとってもわかりやすくあるべきだからです。

命名に一貫性がないと、「この変数は何を意味しているのか？」「このclass名はどこで使われているのか？」といった小さな疑問が積み重なり、保守や修正がしづらくなります。

命名ルールの基本的な考え方

命名規則を考える際には、次の3つのポイントを意識しています。

読みやすさ
他人が見ても意味が直感的に伝わること。
たとえばuserNameやformContainerのように、内容が明確な単語を使うようにする
一貫性
プロジェクト全体で同じルール（例：キャメルケース or スネークケースなど）を守ることで、違和感のないコードになります。
予測可能性
新しく名前をつけるときに「他と同じルールなら、こんな名前にすればよさそうだな」と予測できると、迷いが減ります。

命名ルールは厳密な正解があるわけではありませんが、「自分やチーム内で統一されていること」が重要です。

HTMLにおけるidとclassの命名ルール

HTMLでは、idとclass属性を使って要素を識別・分類します。

これらはスタイルの適用やJavaScriptでの操作に使われるため、命名ルールを統一しておくことが重要です。

id と class の違いと使い分け

idはページ内で一意（ユニーク）である必要があり、特定の1要素を対象にする場合に使います。
主にJavaScriptでの操作やアンカーリンクのターゲットに使われます。
classは複数の要素に使える共通の識別子です。
CSSでスタイルを適用したり、JavaScriptでグループ操作をしたりする際によく使います。

よくあるNG例

id="content1"、class="style1"：何を表しているのかが不明

class="RedText"：スタイルの内容を含めるのは避けたほうが良い（プレゼンテーションではなく役割ベースの命名を）

よく混同される他のスタイルとの違い

スタイル	記法	使用例	主な用途
ケバブケース	kebab-case	main-header	HTML, CSSの命名に多い
キャメルケース	camelCase	mainHeader	JavaScriptの変数・関数名に多い
スネークケース	snake_case	main_header	一部言語や定数などで使われる

HTML属性の並び順ルール

HTMLでは、要素に対して複数の属性を指定できますが、属性の並び順に明確なルールは存在していません。

そのため、書き手によって順序がバラバラになることも少なくありません。

しかし、プロジェクト全体で属性の並び順を統一することで、以下のようなメリットがあります。

コードの可読性が上がる
変更・検索がしやすくなる
チームでのコーディングがスムーズになる

とくに、属性が多くなる<input>や<textarea>のようなフォーム要素では、順序に一貫性があると非常に見やすくなります。

私自身が実践している「属性の並び順ルール」を紹介します。

あくまで個人的なルールではありますが、一定のロジックに基づいているので、参考になれば幸いです。

1. 識別系属性（構造・識別）

構造を明示したり、JavaScriptやフォーム連携で参照するための属性。

id
name
for
aria-labelledby
aria-describedby
role
slot

2. スタイル・クラス関連属性

CSSでのスタイリングや直接のスタイル指定に関係する属性。

class
style

3. レイアウト・状態・表示制御

要素の状態や動作、表示に関する属性。

type
value
checked
selected
disabled
readonly
required
multiple
autofocus
hidden
open
src
href
alt
loading
target
rel
width
height

4. 補助情報・UIヒント

ユーザー向けの説明や、フォームの入力制限に関する属性。

placeholder
title
maxlength
minlength
min
max
step
size
rows
cols
autocomplete
pattern
inputmode
accept
wrap

5. イベント・JavaScript関連属性

ユーザー操作やイベントに対するスクリプト処理を設定する属性。

onclick
onchange
oninput
onfocus
onblur
onmouseover
onmouseout
onsubmit
onkeydown
onkeyup
onload
onerror

6. カスタム属性（data属性など）

HTML仕様に含まれない独自拡張のための属性。

JSとのデータ連携によく使われます。

data-*
aria-*（アクセシビリティ用）

実際の使用例

inputタグ

<input
  id="email"
  name="email"
  class="form-input"
  style="width: 100%"
  type="email"
  value=""
  disabled
  placeholder="メールアドレスを入力"
  maxlength="100"
  oninput="validateEmail(this)"
  data-tracking-id="email-field"
>

aタグ

<a
  id="link-contact"
  class="btn btn-primary"
  href="/contact"
  target="_blank"
  rel="noopener noreferrer"
  title="お問い合わせページへ移動"
  onclick="trackClick('contact')"
  data-track-id="contact-link"
>
  お問い合わせ
</a>

imgタグ

<img
  id="main-logo"
  class="logo-image"
  src="/images/logo.png"
  alt="サイトのロゴ"
  loading="lazy"
  width="200"
  height="50"
  title="トップページに戻る"
  onerror="handleImageError(this)"
  data-role="site-logo"
/>

JavaScriptにおける命名規則

JavaScriptでは、変数や関数、クラス、定数などの名前の付け方に一定のルールを設けることで、コードの可読性や保守性を高めることができます。

とくにチーム開発や将来的なリファクタリングを考慮すると、命名の統一は重要なポイントです。

命名ルールを守ることで得られる主なメリットは以下の通りです。

コードを見ただけで、役割やスコープが予測しやすくなる
変数や関数の命名に迷わなくなる
他の人のコードも理解しやすくなる
バグやミスの早期発見につながる

以下に私が実際に意識している命名パターンを、用途ごとに紹介していきます。

変数・関数：キャメルケース（camelCase）

JavaScriptでは、変数名や関数名にはキャメルケースを使うのが一般的です。

先頭は小文字で始まり、単語の区切りごとに大文字を使います。

let userName = 'Taro';

function fetchUserData() {
  // ...
}

命名のポイント

状態を表すものは名詞系（例：userData, isLoggedIn
動詞＋目的語の形式で「何をするか」がわかるように（例：getUserInfo, sendRequest）

定数：スネークケース＋すべて大文字（UPPER_SNAKE_CASE）

APIキーや定数として扱う値は、すべて大文字＋アンダースコア（スネークケース）で書くのが慣例です。

これは「この値は再代入されるべきではない」という意図を読み手に伝える役割があります。

const API_URL = 'https://api.example.com/';
const MAX_RETRIES = 5;

クラス名・コンストラクタ：パスカルケース（PascalCase）

クラスやコンストラクタ関数は、先頭も大文字にする パスカルケースを使います。

class UserProfile {
  constructor(name) {
    this.name = name;
  }
}

イベント名やハンドラー関数：キャメルケースでprefixをつける

イベントハンドラーはhandleやonなどのプレフィックスをつけると、役割が明確になります。

function handleClickButton() {
  // ...
}

element.addEventListener('click', handleClickButton);

イベント名自体（カスタムイベントなど）を扱う場合は、ハイフン区切り（ケバブケース）で統一されることもあります（DOMやHTMLとの親和性を考慮）。

boolean 値（true/false）：is / has / can などで始める

真偽値を格納する変数には、is、has、canなどの動詞を先頭に使うと、自然な表現になります。

const isLoggedIn = true;
const hasPermission = false;
const canEdit = true;

命名で避けたいパターン

意味のない名前（data1, temp, foo, barなど）
略しすぎてわかりにくい（usrNm, cfgValなど）
一貫性のない命名スタイル（例：user_nameとuserNameが混在）

まとめ：コーディング規約の重要性

本記事では、HTMLとJavaScriptのコーディング規約について、実践的な例を交えながら解説してきました。

重要なポイント

命名規則は「読みやすさ」「一貫性」「予測可能性」の3つの原則を意識する
HTMLではケバブケース（kebab-case）を採用し、意味のある命名を心がける
属性の並び順は、識別系→スタイル→レイアウト→補助情報→イベント→カスタム属性の順で統一する
JavaScriptでは用途に応じて適切な命名規則（キャメルケース、パスカルケース、スネークケース）を使い分ける

これらの規約は、厳密な正解があるわけではありません。

しかし、チーム内で統一されたルールを設けることで、コードの可読性と保守性が大きく向上します。

特に、プロジェクトの規模が大きくなるほど、一貫性のある命名規則と属性の並び順は重要になります。

新しく参加したメンバーがコードを理解しやすくなり、バグの発見や修正もスムーズに行えるようになるでしょう。

本記事で紹介した規約は、あくまで一例です。

あなたのプロジェクトやチームの状況に合わせて、最適なルールを検討してみてください。

重要なのは、「なぜそのルールを採用するのか」を理解し、チーム全体で共有することです。