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

命名規則の基本方針

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

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

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

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

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

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

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

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

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

id と class の違いと使い分け

おすすめの命名ルール

kebab-case（ケバブケース）を使う

例：main-header、user-profile、form-group

CSSとの相性がよく、視認性にも優れているため、idとclassのどちらにもkebab-caseを採用するのがおすすめです。

役割や意味がわかる名前を使う

抽象的なbox1やitem2よりも、user-cardやnav-itemのように、「何を表しているのか」が一目でわかる名前を付けましょう。

必要に応じて構造と役割を表現するプレフィックスを使う

例：btn-submit、form-contact、section-news

プレフィックスを使うことで、命名の予測可能性が高まり、要素の整理がしやすくなります。

よくあるNG例

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

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

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

HTML属性の並び順ルール

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

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

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

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

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

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

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

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

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

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

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

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

4. 補助情報・UIヒント

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

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

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

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

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

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

実際の使用例

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() {
  // ...
}

定数：スネークケース＋すべて大文字（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;

命名で避けたいパターン

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

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

重要なポイント

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

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

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

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

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

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

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