【JavaScript入門】スタイルガイドとは？

　“スタイルガイド（コーディング規約）” は 「書き方のバラつきをなくし、だれが読んでも一瞬で理解できるコード」 を実現するためのルール集です。とくにチーム開発では、命名・インデント・ファイル構成・コメント方法などをそろえないとレビューや保守が雪崩のように大変になります。ここではスタイルガイドの目的と主な項目を整理し、最後に「ルールを切り替えてサンプルコードをハイライト表示するミニページ」を作って体験してみましょう。

スタイルガイドで定義する主な項目例
ファイル構造ディレクトリ命名、1 ファイル 1 クラス原則 など
命名規則変数 camelCase、クラス PascalCase、定数 UPPER_SNAKE
フォーマットインデント 2 or 4 space、最大行長 100 文字
文法ルール=== を必須、未使用変数禁止、セミコロンの有無
コメント指針JSDoc フォーマット、関数の目的＋副作用を必ず記述
ツール連携ESLint/Prettier の設定、CI で自動チェック

スタイルガイドは “既製品” をベースに 自社用プリセット を作るのがおすすめ。
例：Google ベース＋React 用ルールを追加、など。

サンプル：ルール切り替えデモページ

ファイル名： styleguide_demo.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>📚 スタイルガイドとは？</title>
<style>
  body{font-family:"Segoe UI",sans-serif;background:#f7fbff;margin:2rem}
  h1 {font-size:1.8rem;text-align:center;margin-bottom:1.2rem}
  select, pre{font-size:1rem;margin-top:1rem}
  pre{background:#272822;color:#eee;padding:1rem;border-radius:6px;overflow:auto}
  .google  {--kw:#79b;--fn:#97c;--str:#e6db74}
  .airbnb  {--kw:#d1675a;--fn:#6abf69;--str:#c1ba63}
  .jquery  {--kw:#5fa8d3;--fn:#c792ea;--str:#f6d06b}
  code span.k{color:var(--kw)}
  code span.f{color:var(--fn)}
  code span.s{color:var(--str)}
</style>
</head>
<body>
  <h1>📚 スタイルガイドとは？</h1>

  <label>ガイドを選択:
    <select id="ruleSel">
      <option value="google">Google</option>
      <option value="airbnb">Airbnb</option>
      <option value="jquery">jQuery</option>
    </select>
  </label>

  <pre id="codeBox" class="google"><code>
<span class="k">function</span> <span class="f">greet</span>(name) {
  <span class="k">const</span> <span class="f">message</span> = <span class="s">'こんにちは, '</span> + name;
  <span class="k">return</span> message;
}
  </code></pre>

<script>
// 日本語メッセージ用関数
const log = msg => console.log('ログ:', msg);

// セレクトボックスの変更でテーマを切り替え
document.getElementById('ruleSel').addEventListener('change', e => {
  const box = document.getElementById('codeBox');
  box.className = e.target.value;        // CSS 変数を切替
  log(`${e.target.value} ルールを適用しました`);
});
</script>
</body>
</html>

出力イメージ

ページ上部のプルダウンから Google / Airbnb / jQuery を選ぶと、下のコードハイライト色が切り替わります。

ブラウザの出力例

デバックコンソールの出力

console には「Google ルールを適用しました」など日本語ログ。

ログ: airbnb ルールを適用しました
ログ: jquery ルールを適用しました
ログ: google ルールを適用しました

プログラム解説

  1. CSS 変数 で --kw(キーワード) --fn(関数名) --str(文字列) の 3 色をガイドごとに定義。
  2. <pre> にクラスを付け替えるだけで色テーマが変化し、「ガイドごとの差異を視覚化」。
  3. log() はサンプルでもスタイルガイドを意識し arrow function + camelCase を採用。

まとめ

  • スタイルガイドは “読みやすさ” と “チーム全員が迷わない” を保証するコードのルールブック。
  • 既存ガイド（Google/Airbnb/jQuery/Node など）をベースに プロジェクト実情へローカライズ するのが現実的。
  • 小さなデモでも 命名・インデント・コメント を意識すると学習効果大。
    このページをたたき台に、自分たちの開発フローやツールチェーンに最適なスタイルを検討してみましょう。