git / tools

Git コミットメッセージ生成

Conventional Commits形式のコミットメッセージをGUIで作成します。タイプ・スコープ・ブレーキングチェンジをフォームで入力し、正確なメッセージを自動生成。

コミットタイプ *
新機能の追加
スコープ(任意)
タイトル *
0/72
本文(任意)
フッター(任意)
// タイプとタイトルを入力するとメッセージが生成されます

使い方

01
  1. コミットタイプ(feat・fix・docs など)をボタンから選択してください
  2. 変更対象のスコープを任意で入力します(例: auth、api、ui)
  3. タイトルに変更内容を72文字以内で簡潔に記入します(英語・命令形推奨)
  4. 後方互換性のない変更の場合は「BREAKING CHANGE」チェックボックスをオンにします
  5. 必要に応じて本文・フッターを入力すると、右側にメッセージが自動生成されます
  6. 「コピー」ボタンでコミットメッセージをクリップボードにコピーできます

実装コード

02

コアロジックは文字列操作のみで実装しています。Conventional Commits仕様に従い、type(scope)!: subject の形式でヘッダーを組み立て、本文・フッターを空行で区切って連結します。外部ライブラリは不要です。

export function buildCommitMessage(fields: CommitFields): string {
  const { type, scope, breaking, subject, body, footer } = fields
  if (!type || !subject.trim()) return ''

  const scopePart = scope.trim() ? `(${scope.trim()})` : ''
  const breakingMark = breaking ? '!' : ''
  const header = `${type}${scopePart}${breakingMark}: ${subject.trim()}`

  const parts = [header]
  if (body.trim()) parts.push('', body.trim())
  if (breaking && !footer.toLowerCase().includes('breaking change')) {
    const breakingFooter = footer.trim()
      ? `BREAKING CHANGE: ${footer.trim()}`
      : 'BREAKING CHANGE: '
    parts.push('', breakingFooter)
  } else if (footer.trim()) {
    parts.push('', footer.trim())
  }

  return parts.join('\n')
}

よくある使用例・注意点

03
Conventional Commits とは
Conventional Commits は、コミットメッセージに人間と機械が読める意味を持たせるための仕様です。semantic-release や CHANGELOG 自動生成ツールと連携することで、バージョン管理を自動化できます。
スコープの命名規則
スコープは変更箇所のモジュール・コンポーネント名を使います。例: fix(auth): fix token expiry や feat(api): add pagination。プロジェクト内で一貫した命名を使うことが重要です。
BREAKING CHANGE の扱い
後方互換性のない変更には「BREAKING CHANGE」フッターが必要です。このツールでチェックを入れると、タイトルに「!」が付加され、フッターに BREAKING CHANGE: が自動挿入されます。semver では MAJOR バージョンのインクリメントに対応します。
本文・フッターの使い分け
本文(body)には変更の背景・理由・詳細を記述します。フッター(footer)には Issue 番号(Closes #123)や共著者(Co-authored-by:)、BREAKING CHANGE の説明を記載します。本文・フッターは空行で区切ることが仕様上必須です。

関連ツール

04
正規表現テスター文字数カウンターハッシュ生成

ソースコード

05

このツールのソースコード(テストコードを含む)はGitHubで公開しています。 MITライセンスで自由に利用・改変できます。

GitHub でコードを見る →