概要

OpenCommit を利用すれば AI にコミットメッセージを書かせることができます。本記事では、OpenCommit を利用して Next.js プロジェクトで AI にコミットメッセージを書かせてみました。

結論

OpenCommit を利用することで以下が実現できます。

コミットメッセージに悩むことなく、コミットメッセージを作成できる。
GitHub Actions と連携することで、チームメンバーのスキルに依存せず、コミットメッセージの一貫性を確保できる。
コミットメッセージに絵文字を自動で追加できる。
Git Hook と連携することで、git commit 時にコミットメッセージを自動生成できる。
OpenCommit の各種設定は ~/.opencommit、あるいは .env に保存できる。

Commitlint の連携もありますが、Commitlint と連携させると日本語のコミットメッセージが英語に変わります。日本語でコミットメッセージを作成したい場合は、連携させないほうが良いです。

今回作業した結果は以下のリポジトリがあります。

記事の対象者

コミットメッセージを考えるのが面倒な方
Web 開発をしている方
VSCode で開発している方

OpenCommit とは

OpenCommit は、AI にコミットメッセージを書かせることができるパッケージです。OpenCommit を利用すると、コミットメッセージを考える時間がなくなり、かつ、自身が書くコミットメッセージをより詳細なコミットメッセージを自動生成できます。

以下が特徴です。

JavaScript 製で Node.js で動作するため、Web 開発で利用できます。
GitHub Marketplace で利用できるため、GitHub Action で利用できます。
Conventional Commit に対応しています。
Commitlint に対応しています。

利用料金

利用には OpenAI の API キーが必要となり、API キーを取得するためにはクレジットカードの登録が必要です。利用料金は OpenCommit の公式ドキュメントによると、3.5-turbo-16k は、普段使いであれば 1 日あたり 0.1 ドルぐらいかかります。コミットメッセージを考える時間がなくなるので許容できる金額です。gpt-4 は高いので使うのやめたほうが良いです。

OpenCommit by default uses 3.5-turbo-16k model, it should not exceed $0.10 per casual working day.

比較

AI にコミットメッセージを書かせる事ができるパッケージはいくつかあります。バグが有ってもなかなか回収されなかったり、機能追加されなかったりと、まだまだ発展途上なイメージがあります。

パッケージ名	スター数	言語
OpenCommit	4.8k	JavaScript製
auto-commit	1.1k	Rust製
aicommits	7k	TypeScript製

※ 2023 年 1 月 20 日現在の数値です。

aicommits

aicommits は TypeScript 製のパッケージです。

https://github.com/Nutlope/aicommits

ChatGPT の API 公開初期にコミットメッセージを自動生成するパッケージをリリースしたことで多くスター数を集めています。ダウンロード数は OpenCommit のほうが多いです。

auto-commit

auto-commit は Rust 製のパッケージです。

https://github.com/m1guelpf/auto-commit

利用できるモデルは GPT-3.5 で固定されています。

Next.jsプロジェクトを作成

作業するための Next.js プロジェクトを作成します。長いので、折り畳んでおきます。

新規プロジェクト作成と初期環境構築の手順詳細

プロジェクトを作成

create next-app@latestでプロジェクトを作成します。

$ pnpm create next-app@latest next-opencommit-sample --typescript --eslint --import-alias "@/*" --src-dir --use-pnpm --tailwind --app
$ cd next-opencommit-sample

Peer Dependenciesの警告を解消

Peer dependenciesの警告が出ている場合は、pnpm installを実行し、警告を解消します。

 WARN  Issues with peer dependencies found
.
├─┬ autoprefixer 10.0.1
│ └── ✕ unmet peer postcss@^8.1.0: found 8.0.0
├─┬ tailwindcss 3.3.0
│ ├── ✕ unmet peer postcss@^8.0.9: found 8.0.0
│ ├─┬ postcss-js 4.0.1
│ │ └── ✕ unmet peer postcss@^8.4.21: found 8.0.0
│ ├─┬ postcss-load-config 3.1.4
│ │ └── ✕ unmet peer postcss@>=8.0.9: found 8.0.0
│ └─┬ postcss-nested 6.0.0
│   └── ✕ unmet peer postcss@^8.2.14: found 8.0.0
└─┬ next 14.0.4
  ├── ✕ unmet peer react@^18.2.0: found 18.0.0
  └── ✕ unmet peer react-dom@^18.2.0: found 18.0.0

以下を実行することで警告が解消されます。

$ pnpm i postcss@latest react@^18.2.0 react-dom@^18.2.0

不要な設定を削除し、プロジェクトを初期化します。

styles

CSSなどを管理するstylesディレクトリを作成します。globals.cssを移動します。

$ mkdir -p src/styles
$ mv src/app/globals.css src/styles/globals.css

globals.cssの内容を以下のように上書きします。

src/styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

初期ページ

app/page.tsxを上書きします。

src/app/page.tsx

import { FC } from "react";

const Home: FC = () => {
  return (
    <div className="">
      <div className="text-lg font-bold">Home</div>
      <div>
        <span className="text-blue-500">Hello</span>
        <span className="text-red-500">World</span>
      </div>
    </div>
  );
};

export default Home;

レイアウト

app/layout.tsxを上書きします。

src/app/layout.tsx

import "@/styles/globals.css";
import { FC } from "react";
type RootLayoutProps = {
  children: React.ReactNode;
};

export const metadata = {
  title: "Sample",
  description: "Generated by create next app",
};

const RootLayout: FC<RootLayoutProps> = (props) => {
  return (
    <html lang="ja">
      <body className="">{props.children}</body>
    </html>
  );
};

export default RootLayout;

TailwindCSSの設定

TailwindCSSの設定（tailwind.config.ts）を上書きします。

tailwind.config.ts

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  plugins: [],
}
export default config

TypeScriptの設定

TypeScriptの設定（tsconfig.json）を上書きします。

tsconfig.json

{
  "compilerOptions": {
    "target": "es2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "checkJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "noUncheckedIndexedAccess": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    },
    "plugins": [
      {
        "name": "next"
      }
    ],
  },
  "include": [
    ".eslintrc.cjs",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.cjs",
    "**/*.mjs",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules"]
}

動作確認

ローカルで動作確認します。

$ pnpm dev

コミットして作業結果を保存しておきます。

$ pnpm build
$ git add .
$ git commit -m "feat:新規にプロジェクトを作成し, 作業環境を構築"

OpenCommitのインストール

OpenCommit のパッケージをローカルにインストールします。

$ pnpm add -D opencommit

APIキーの取得・設定

OpenAI の API キーを取得し、OpenCommit に API キーを設定します。

APIキーを取得

API キーを OpenAI から取得するため、こちらにアクセスします。

「Log in」からログインします。

Alt text

「Craete new secret」から新規に API キーを作成します。

Alt text

opencommit と名前をつけて、「Create secret key」をクリックして API キーを作成します。

Alt text

「API キー」をコピーして、「Done」をクリックしてクローズします。

Alt text

クレジットカードを登録

クレジットカードを登録します。クレジットカードを登録することで、API キーを利用できます。

Billing から、「Add payment details」をクリックします。

Alt text

「Individual」をクリックします。

Alt text

クレジットカード情報を入力し、「Continues」をクリックします。

Alt text

「Initial credit purchase」でチャージする金額を設定します。

Alt text

「Confirm payment」をクリックし、チャージを完了します。

Alt text

「Billing」を確認すると、チャージが完了していることが確認できます。

Alt text

月額の利用上限と通知上限を設定

月額の利用上限を設定できます。月額の利用上限を超えた場合は、API リクエストはリジェクトされます。また、月額の利用が一定のしきい値を超えた場合メールで通知する設定もできます。ここでは、どちらの上限金額も 10 ドルを設定します。

「Limits」をクリックします。「Set monthly budget」で月額の利用上限、「Seet an email notification threshold」で月額利用が一定のしきい値を超えた場合の通知上限を設定します。問題なければ、「Save」をクリックし保存します。

Alt text

APIキーを設定

OpenCommit のに API キーを設定します。<your_api_key> には、先ほどコピーした API キーを設定します。

$ pnpm oco config set OCO_OPENAI_API_KEY=<your_api_key>

これで、~/.opencommit に API キーを含めデフォルトの設定が反映されています。

~/.opencommit

OCO_OPENAI_API_KEY=sk-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
OCO_OPENAI_MAX_TOKENS=undefined
OCO_OPENAI_BASE_PATH=undefined
OCO_DESCRIPTION=false
OCO_EMOJI=false
OCO_MODEL=gpt-3.5-turbo-16k
OCO_LANGUAGE=en
OCO_MESSAGE_TEMPLATE_PLACEHOLDER=$msg
OCO_PROMPT_MODULE=conventional-commit

これで設定は完了です。

OpenCommitを使う

OpenCommit を利用するために必要なパッケージをインストールしましたので、ここでは、OpenCommit を利用してコミットしてみます。OpenCommit でコミットメッセージを生成して、コミットするには、opencommit を利用します。するとコミットメッセージが生成されます。

$ git add .
$ pnpm opencommit

┌  open-commit
│
◇  2 staged files:
  package.json
  pnpm-lock.yaml
│
└  Some files are excluded by default from 'git diff'. No commit messages are generated for this files:
pnpm-lock.yaml

│
◇  📝 Commit message generated
│
└  Generated commit message:
——————————————————
chore(package.json): add opencommit package as a dev dependency to enable conventional commit messages
——————————————————

│
◆  Confirm the commit message?
│  ○ Yes / ● No
└

ですが、コミットメッセージを日本語に変えたいので、「Confirm the commit message」は「No」を選択します。

OpenCommitの設定を変更

ここでは OpenCommit のデフォルトの設定を変更していきます。

言語を日本語に変更

言語はデフォルトでは英語なので、日本語に変更します。

以下のコマンドで変更できますが、直接、~/.opencommit を変更しても良いです。

$ pnpm oco config set OCO_LANGUAGE=ja

~/.opencommit

OCO_LANGUAGE=ja

コミットをします。コミットメッセージが日本語になっています。コミットはキャンセルしておきます。

$ git add .
$ pnpm opencommit

┌  open-commit
│
◇  2 staged files:
  package.json
  pnpm-lock.yaml
│
└  Some files are excluded by default from 'git diff'. No commit messages are generated for this files:
pnpm-lock.yaml

│
◇  📝 Commit message generated
│
└  Generated commit message:
——————————————————
修正(package.json): opencommitパッケージを追加
新機能(package.json): opencommitパッケージを使用してコミットメッセージを生成する機能を追加
——————————————————

│
◆  Confirm the commit message?
│  ○ Yes / ● No
└

コミットメッセージは確かに日本語になりました。

コミットメッセージを詳細化

コミットメッセージを詳細化できます。

$ pnpm oco config set OCO_DESCRIPTION=true

~/.opencommit

OCO_DESCRIPTION=true

OpenCommit でコミットすると、メッセージが詳細化されています。コミットはキャンセルしておきます。

$ git add .
$ pnpm opencommit

┌  open-commit
│
◇  2 staged files:
  package.json
  pnpm-lock.yaml
│
└  Some files are excluded by default from 'git diff'. No commit messages are generated for this files:
pnpm-lock.yaml

│
◇  📝 Commit message generated
│
└  Generated commit message:
——————————————————
修正(package.json): opencommitパッケージを追加
新機能(package.json): opencommitパッケージを追加しました。opencommitはコミットメッセージを作成するためのツールであり、コミットメッセージの作成を効率化します。これにより、より明確で一貫性のあるコミットメッセージを作成することができます。
——————————————————

│
◆  Confirm the commit message?
│  ○ Yes / ● No
└

Gitmojiを利用

Gitmoji を利用できます。

https://gitmoji.dev/

$ pnpm oco config set OCO_EMOJI=true

~/.opencommit

OCO_EMOJI=true

OpenCommit でコミットすると、Gitmoji により絵文字がコミットメッセージに追加されています。コミットはキャンセルしておきます。

$ git add .
$ pnpm opencommit

┌  open-commit
│
◇  2 staged files:
  package.json
  pnpm-lock.yaml
│
└  Some files are excluded by default from 'git diff'. No commit messages are generated for this files:
pnpm-lock.yaml

│
◇  📝 Commit message generated
│
└  Generated commit message:
——————————————————
📦 新機能(package.json): opencommitパッケージを追加
opencommitパッケージを追加しました。これにより、コミットメッセージを作成する際にGitMojiコンベンションを使用できるようになります。これにより、コミットメッセージがより明確で一貫性のあるものになります。
——————————————————

│
◆  Confirm the commit message?
│  ○ Yes / ● No
└

モデルの変更

ChatGPT のモデルを変更できます。利用可能なモデルは以下のいずれかです。

gpt-4
gpt-3.5-turbo-16k (default)
gpt-3.5-turbo-0613
gpt-3.5-turbo

今回は gpt-4 を設定します。

$ pnpm oco config set OCO_MODEL=gpt-4

~/.opencommit

OCO_MODEL=gpt-4

OpenCommit でコミットすると、gpt-3.5-turbo-16k と比較し、gpt-4 のほうが詳細なメッセージを作成できています。コミットはキャンセルしておきます。

$ git add .
$ pnpm opencommit

┌  open-commit
│
◇  2 staged files:
  package.json
  pnpm-lock.yaml
│
└  Some files are excluded by default from 'git diff'. No commit messages are generated for this files:
pnpm-lock.yaml

│
◇  📝 Commit message generated
│
└  Generated commit message:
——————————————————
➕ 追加(package.json): opencommitパッケージを追加
opencommitパッケージを追加した理由は、コミットメッセージの作成を助けるためです。これにより、コミットメッセージの品質が向上し、開発者が変更の理由をより明確に理解できるようになります。
——————————————————

│
◆  Confirm the commit message?
│  ○ Yes / ● No
└

gpt-4 は高いのでデフォルトに戻しておきます。

$ pnpm oco config set OCO_MODEL=gpt-3.5-turbo-16k

コミットメッセージのフォーマットの設定

デフォルトでは、conventional-commit が設定されています。Conventional Commits は、Git コミットメッセージのためのフォーマット規約です。Conventional Commits を採用することで、コミットメッセージに一貫性を持たせ、読みやすくできます。

Commitlint の設定を読み込ませることでカスタマイズされたフォーマットの準拠したコミットメッセージの作成が可能です。OpenCommit と Commitlint を連携させることで、カスタマイズされたコミットメッセージの生成が可能となります。

https://commitlint.js.org/

先に commitlint をインストールします。

$ pnpm install --save-dev @commitlint/{cli,config-conventional,load}

commitlint の設定ファイル（commitlint.config.cjs）を作成します。commitlint で設定するルールは、Conventional Commit に準拠した@commitlint/config-conventionalを参考にしました。ルールはこちらを見ることで解読できます。

$ touch commitlint.config.cjs

commitlint.config.cjs

module.exports = {
  parserPreset: "conventional-changelog-conventionalcommits",
  rules: {
    "body-leading-blank": [1, "always"],
    "body-max-line-length": [2, "always", 100],
    "footer-leading-blank": [1, "always"],
    "footer-max-line-length": [2, "always", 100],
    "header-max-length": [2, "always", 100],
    "subject-case": [
      2,
      "never",
      ["sentence-case", "start-case", "pascal-case", "upper-case"],
    ],
    "subject-empty": [2, "never"],
    "subject-full-stop": [2, "never", "."],
    "type-case": [2, "always", "lower-case"],
    "type-empty": [2, "never"],
    "type-enum": [
      2,
      "always",
      [
        "build",
        "chore",
        "ci",
        "docs",
        "feat",
        "fix",
        "perf",
        "refactor",
        "revert",
        "style",
        "test",
      ],
    ],
  },
  prompt: {
    questions: {
      type: {
        description: "Select the type of change that you're committing",
        enum: {
          feat: {
            description: "A new feature",
            title: "Features",
            emoji: "✨",
          },
          fix: {
            description: "A bug fix",
            title: "Bug Fixes",
            emoji: "🐛",
          },
          docs: {
            description: "Documentation only changes",
            title: "Documentation",
            emoji: "📚",
          },
          style: {
            description:
              "Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)",
            title: "Styles",
            emoji: "💎",
          },
          refactor: {
            description:
              "A code change that neither fixes a bug nor adds a feature",
            title: "Code Refactoring",
            emoji: "📦",
          },
          perf: {
            description: "A code change that improves performance",
            title: "Performance Improvements",
            emoji: "🚀",
          },
          test: {
            description: "Adding missing tests or correcting existing tests",
            title: "Tests",
            emoji: "🚨",
          },
          build: {
            description:
              "Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)",
            title: "Builds",
            emoji: "🛠",
          },
          ci: {
            description:
              "Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)",
            title: "Continuous Integrations",
            emoji: "⚙️",
          },
          chore: {
            description: "Other changes that don't modify src or test files",
            title: "Chores",
            emoji: "♻️",
          },
          revert: {
            description: "Reverts a previous commit",
            title: "Reverts",
            emoji: "🗑",
          },
        },
      },
      scope: {
        description:
          "What is the scope of this change (e.g. component or file name)",
      },
      subject: {
        description:
          "Write a short, imperative tense description of the change",
      },
      body: {
        description: "Provide a longer description of the change",
      },
      isBreaking: {
        description: "Are there any breaking changes?",
      },
      breakingBody: {
        description:
          "A BREAKING CHANGE commit requires a body. Please enter a longer description of the commit itself",
      },
      breaking: {
        description: "Describe the breaking changes",
      },
      isIssueAffected: {
        description: "Does this change affect any open issues?",
      },
      issuesBody: {
        description:
          "If issues are closed, the commit requires a body. Please enter a longer description of the commit itself",
      },
      issues: {
        description: 'Add issue references (e.g. "fix #123", "re #123".)',
      },
    },
  },
};

OpenCommit はデフォルトで、conventional-commit が設定されているので Commitlint の設定を読み込むように変更します。

$ pnpm oco config set OCO_PROMPT_MODULE=@commitlint

~/.opencommit

OCO_PROMPT_MODULE=@commitlint

OpenCommit でコミットすると、設定が日本語でしたが、英語に変わりました。

$ git add .
$ pnpm opencommit

┌  open-commit
│
◇  3 staged files:
  commitlint.config.cjs
  package.json
  pnpm-lock.yaml
│
└  Some files are excluded by default from 'git diff'. No commit messages are generated for this files:
pnpm-lock.yaml

│
○  Generating the commit message
│
◇   ─────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                │
│  OCO_PROMPT_MODULE is @commitlint but you haven't generated consistency for this project yet.  │
│                                                                                                │
├────────────────────────────────────────────────────────────────────────────────────────────────╯
│
◇  Read @commitlint configuration (hash: 45307fd69b19c253cbdf99327f56a804c90ac9f1ba5f9e1bdf9510080037ae76)
│
│
◇  📝 Commit message generated
│
└  Generated commit message:
——————————————————
📚 docs(commitlint): add commitlint configuration file
📦 chore(package.json): add commitlint dependencies

Add the commitlint configuration file `commitlint.config.cjs` to the project to configure commit message linting. This will ensure that commit messages follow a consistent format and adhere to the specified conventions.

Update the `package.json` file to include the necessary dev dependencies for commitlint (`@commitlint/cli`, `@commitlint/config-conventional`, `@commitlint/load`) and other development dependencies (`opencommit`). This will enable commitlint to be used in the project for linting commit messages.
——————————————————

│
◆  Confirm the commit message?
│  ○ Yes / ● No
└

設定はデフォルトに戻しておきます。

$ pnpm oco config set OCO_PROMPT_MODULE=conventional-commit

Git Hookと連携

OpenCommit を Git Hook と連携することで、git commit コマンドで OpenCommit を実行できるようになります。コミットメッセージを生成する前にコミットメッセージを確認できます。

$ pnpm oco hook set

git commit でコミットすると、OpenCommit が実行され、コミットされます。

$ git add .
$ git commit

┌  opencommit
│
○  Generating commit message
│
└  Some files are excluded by default from 'git diff'. No commit messages are generated for this files:
│
◇  Done
hint: Waiting for your editor to close the file...

私は、VSCode でコミットメッセージをコミット前に確認できるため、以下のように表示されました。クローズして保存します。

Alt text

以下が最終的なログです。

┌  opencommit
│
○  Generating commit message
│
└  Some files are excluded by default from 'git diff'. No commit messages are generated for this files:
│
◇  Done
[main 22aacd5] 📦 新機能(.opencommit-commitlint): OpenCommitのcommitlint設定ファイルを追加 📦 新機能(commitlint.config.cjs): commitlintの設定ファイルを追加 📦 新機能(package.json): 開発依存関係にcommitlint関連のパッケージを追加 OpenCommitのcommitlint設定ファイルとcommitlintの設定ファイルを追加しました。また、開発依存関係にcommitlint関連のパッケージを追加しました。これにより、コミットメッセージの品質を向上させ、コミットメッセージの一貫性を確保するためのルールを適用することができます。
 4 files changed, 1706 insertions(+), 1 deletion(-)
 create mode 100644 .opencommit-commitlint
 create mode 100644 commitlint.config.cjs

エディターでコミットメッセージの確認なくコミットする場合は、以下のようにします。

$ git config --global core.editor true

VSCode でコミット前に OpenCommit が生成したコミットメッセージを確認したい場合は、以下のようにします。

$ git config --global core.editor 'code --wait'

GitHub Action (BETA) と連携

最後に、GitHub Action を利用して自動的にコミットメッセージを作成する機能もあります。

GitHub Action を利用するには、以下のように設定します。

$ mkdir -p .github/workflows
$ touch .github/workflows/opencommit.yml

.github/workflows/opencommit.yml

name: 'OpenCommit Action'

on:
  push:
    # this list of branches is often enough,
    # but you may still ignore other public branches
    branches-ignore: [main master dev development release]

jobs:
  opencommit:
    timeout-minutes: 10
    name: OpenCommit
    runs-on: ubuntu-latest
    permissions: write-all
    steps:
      - name: Setup Node.js Environment
        uses: actions/setup-node@v2
        with:
          node-version: '16'
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - uses: di-sukharev/opencommit@github-action-v1.0.4
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

        env:
          # set openAI api key in repo actions secrets,
          # for openAI keys go to: https://platform.openai.com/account/api-keys
          # for repo secret go to: <your_repo_url>/settings/secrets/actions
          OCO_OPENAI_API_KEY: ${{ secrets.OCO_OPENAI_API_KEY }}

          # customization
          OCO_OPENAI_MAX_TOKENS: 500
          OCO_OPENAI_BASE_PATH: ''
          OCO_DESCRIPTION: true
          OCO_EMOJI: true
          OCO_MODEL: gpt-3.5-turbo-16k
          OCO_LANGUAGE: ja
          OCO_PROMPT_MODULE: conventional-commit

GitHub のリポジトリを作成し、その後に GitHub Actions で利用するためのシークレットを設定します。

「Settings」をクリック
「Secrets and variables」→「Actions」をクリック
「New repository secret」をクリック

Alt text

「Name」に「OCO_OPENAI_API_KEY」を入力
「Value」に API キーを入力
「Add secret」をクリック

Alt text

作成されていることが確認できます。

Alt text

では、git commit -m でコミットし、プッシュします。コミットメッセージは適当な「fix」とだけ記入しておきます。

$ git add .
$ git commit -m "fix"
$ git push origin main

すると GitHub Actions が実行されます。実行結果の確認方法を記載します。

「Actions」をクリック
先程入力したコミットメッセージ「fix」をクリック

Alt text

続いて「OpenCommit」をクリック

Alt text

処理結果を確認するため、「Run di-sukharev/opencommit@github-action-v1.0.4」をクリック

Alt text

あらたなコミットメッセージが作成されています。

Alt text

コミットメッセージを確認すると、コミットメッセージが変更されていることが分かります。

Alt text

これで、チームメンバーのスキルに依存せず、コミットメッセージの一貫性を確保できます。また、人が書くより細かく書けるので、より明確なコミットメッセージを作成できます。

OpenCommitの設定

最後に、OpenCommit の設定ファイルはいずれかの方法が選択できます。

1 つ目は、これまで利用させていただいたローカルの ~/.opencommit です。

2 つ目は、プロジェクトごとに .env ファイルを作成し、その中に設定を記載する方法です。.env ファイルは .gitignore に追加することを忘れずに。

.env

OCO_OPENAI_API_KEY=<your OpenAI API token>
OCO_OPENAI_MAX_TOKENS=<max response tokens from OpenAI API>
OCO_OPENAI_BASE_PATH=<may be used to set proxy path to OpenAI api>
OCO_DESCRIPTION=<postface a message with ~3 sentences description of the changes>
OCO_EMOJI=<boolean, add GitMoji>
OCO_MODEL=<either 'gpt-4', 'gpt-3.5-turbo-16k' (default), 'gpt-3.5-turbo-0613' or 'gpt-3.5-turbo'>
OCO_LANGUAGE=<locale, scroll to the bottom to see options>
OCO_MESSAGE_TEMPLATE_PLACEHOLDER=<message template placeholder, default: '$msg'>
OCO_PROMPT_MODULE=<either conventional-commit or @commitlint, default: conventional-commit>

ですが、.envに記載して実行すると、うまく動作しません。issue にも記載されていました。2023年10月25日に記載されているようですが、更新がありません。OpenCommitも他のパッケージ同様にそこまで更新が活発ではないのかもしれません。

まとめ

OpenCommit を利用することで以下が実現できました。

コミットメッセージに悩むことなく、コミットメッセージを作成できる。
GitHub Actions と連携することで、チームメンバーのスキルに依存せず、コミットメッセージの一貫性を確保できる。
コミットメッセージに絵文字を自動で追加できる。
Git Hook と連携することで、git commit 時にコミットメッセージを自動生成できる。
OpenCommit の各種設定は ~/.opencommit、あるいは .env に保存できる。

特に、GitHub Actions においては、チームメンバーのスキルに依存せず、コミットメッセージの一貫性を確保できると思われます。

Commitlint の連携もありますが、Commitlint と連携させると日本語のコミットメッセージが英語に変わります。日本語でコミットメッセージを作成したい場合は、連携させないほうが良いです。

また、環境変数に設定を記述できる趣旨を記載していますが、私の環境では動作させることができませんでした。issueには上がっていましたが、更新がありません。今後、更新されることを期待しています。

今回作業した結果は以下のリポジトリがあります。

Discussion