個人開発でコミットメッセージ作成ツールを作りました
はじめまして、nkitaoといいます。
35歳にして、急に個人開発に目覚めた社内SEです。
趣味や何かに没頭することに年齢なんて関係ないですよね！
作ったものをいろいろな方に使っていただきたいと思い、投稿することに決めました。
zennは初投稿です。お手柔らかにお願いします。 🙇
作ったもの
コミットメッセージ作成ツールとは？
コミットメッセージの作成をサポートするためのツールになります。
コミットメッセージの作成時・または過去のコミットログを振り返った時に下記のように困ったことはないでしょうか？
- メッセージが統一されておらずわかりずらい
- プロジェクトごとにフォーマットが異なる
- スコープの名称に揺れがある
- プロジェクト事にフォーマットを変更したい
- 絵文字を使って華やかにしたい
このツールはそのような課題を解決するために作成しました。
コミットメッセージのフォーマッターやツールとしては、commitizenやgit-za、commit.template等、本当に素晴らしい便利なツールが様々ありますが、それらとの差別化としては下記が挙げられます。
- Webベースですぐに利用可能
- インストール不要
- テンプレート・フォーマットの作成もGUIベースでわかりやすい
- 過去の入力内容を記憶（再利用）
また、手軽に使っていただきたいという思いから、ログイン不要で設定情報は全てブラウザ内に保存される設計にしています。
使い方
使い方は非常にシンプルで、画面へアクセス後、種別、要約や本文などの入力・選択された情報を基に、
フォーマットされたコミットメッセージが自動的に作成されます。
あらかじめ用意しているフォーム・フォーマットはConventional CommitsやAngularのCommit Message Format等を参考にしています。
また、このツールはカスタマイズモードを利用して自分好みにカスタマイズすることも可能です。
参加中のプロジェクトや個人開発の方針に合わせて是非ご活用いただければと思います。
詳細な使い方はサイトにも記載しているので、是非こちらもご覧いただければと思います！！
コミットメッセージ作成ツール
使用した主な技術
コミットメッセージ作成ツールでは、以下の技術を使用して開発しました。
- React
- Nextjs
- shadcn/ui
- tailwindcss
- emoji-mart
- react-hook-form
- dexie
- react-hotkeys-hook
- react-markdown
どれもとても素晴らしくリスペクトしかありません👏
せっかくなので、各技術の選定理由も記載します。
選定理由
React
「モダン フロント 人気」等で検索して、一番人気ありそうなものを選定しました。
以前AngularJSを使っていたので、その流れでAngularとも思ったのですが、せっかく新たに開発することになるので、触ったことのないReactで実装してみたなと思ったのも理由の一つです。
NEXT.js
フロントのWebフレームワークとしてほぼ必要な機能がそろっており、Vecelを利用することで、簡単・スムーズに本番環境へデプロイでき、かつ、hobbyプラン（無料）という神プランがあるという理由で選びました。
バージョンは14.1.0でAppRouterを採用しています。
爆速で開発からリリースまで短時間でサクサク進められる開発体験は非常に良かったです。
ただ、サイトマップの仕様で一部利用できなかったり、独自な機能が多くあり若干ですが不満があったりしました。
次の開発ではWeb標準に基づいて設計されているというRemixも使ってみたいなと思いました。
tailwindcss
これまでの個人開発ではChakra UIやMUIなどを利用していましたが、細かなデザインをしたい場合やライブラリを導入した際のデザイン調整で苦労したことがあり、思い切って今回はtailwindcssを利用しました。
記述量は非常に多くなりましたが、直感的で自分の思った通りのデザインをかけるのは狙いどおりで採用してよかったと感じています。
ただ、主要なコンポーネント（各種フォーム、ポップアップ等）のデザインを一から作成することになるので、その辺りは後述のshadcn/uiを利用しています。
※デザイン云々いっていますが、私自身まったくデザインセンスはありません。CSSフレームワークにおんぶに抱っこです。
shadcn/ui
デザインは細かく調整したいけど、一から全てのコンポーネントのデザインを考えるのは、ちょっとつらい。ある程度デザインとしてまとまったものが欲しい。
とワガママな願望をもちながらで色々とネットを漁っていたところ。
shadcn/uiに出会いました。
Docs のIntroductionにも記載されていますが、
Pick the components you need. Copy and paste the code into your project and customize to your needs. The code is yours. Use this as a reference to build your own component libraries.
必要なコンポーネントを選択し、そのコードをプロジェクトにコピーして貼り付け、必要に応じてカスタマイズします。コードはあなたのものです。これを参考にして独自のコンポーネントライブラリを構築してください。
という紹介文があり、「これだー！」と思い導入を決めました。
Examplesのページはモノトーンのシックなデザインですが、Themesにその他のカラーパターンもあるので、サイトのイメージカラーにある程度合わせて作成することができるのも魅力の一つでした。
本ツールではGreenを採用しています。
react-hook-form
shadcn/uiのFormを利用する際にreact-hook-formを利用した例が提示されていたことと、別の個人開発でも利用した経験があったため選定しました。
はじめて利用したときは１つのフォームを作成するのにその他必要な設定や記述が多く不安でしたが、今回のコミットメッセージではまさにフォームへの入力情報や属性値の情報が肝となるため、結果的には採用してよかったと思いました。（このライブラリの能力を活かしきれているかどうかは別の話です。）
dexie
ブラウザへのデータ保存方法としては、cookieやlocalStorage、IndexedDBなどありますが、本ツールにおいては利用者によって保存されるテンプレート数が異なり、説明文などの情報を入力することができるので、IndexedDBを利用したいと思っていました。
軽微な設定値であればlocalStorageへ入力できるカスタムフックを自作していましたが、IndexedDBだとその辺の実装だけでもそれなりに工数がかかりそうだったので、dexieを導入しました。
useLiveQueryや、トランザクション等の機能が多く用意されていますが、利用方法は非常にシンプルでしたのでもし使う機会があればおすすめします。
emoji-mart, react-hotkeys-hook, react-markdown
その他のライブラリについてもいろいろと理由はありますが、githubやnpmを検索して、スターの数やメンテナンスの間隔とかで決めたりしました。
大変だったところ
入力フォームのレイアウトを作るにあたり、既存で利用されているコミットメっセージのフォーマッターをいくつか調べました。有名どころとしては上記でも記述していますが、
など、仕様自体はそれほど複雑ではないのですが、どのような形でUIに落とし込むのか結構考えました。
作っては修正しての繰り返しでなにが正しいのかさっぱりわからなくなりました。
ちなみに最初は👇のような形で作っていたのですが
から
のように方向転換につぐ方向転換の結果まったく違うUIになっています。
なぜでしょう。不思議です。
なお、テスト的にAngularプロジェクトのコミットメッセージフォーマットも作ってますので、
よろしければそちらもご覧いただけると嬉しいです。
コミットメッセージ作成ツール (Angular)
こだわったところ
保存できるドロップダウン
スコープの項目の動的ドロップダウン（Dynamic-Dropdown）は、過去に入力した情報を自動的に保存してくれる項目になります。
私だけじゃないと思いたいのですが、以前入力した情報を再利用したいケースがありませんか？
以前どんな記述をしたのか思い出すのにログを漁ってるうちに諦めて、それっぽい命名をしたところ、やっぱり表記揺れがあり悲しくなったことは少なくないです。
キーボードファースト
Webサービスになるので、どうしてもブラウザを開いてアクセスという手間かかってしまいます。
この手間はどうしようもないですが、少なくともメッセージを作成する上でマウスでカチカチしなくてもキーボードから手を離さずに
コミットメッセージを作成できるように心がけました。
今後の展望
今後は以下の機能のような機能も追加したいなと思っています。
- テンプレートの共有機能
- さらに詳細なカスタマイズ
- 各項目への説明文
- type:(scope) summary等のフォーマット
- 過去のコミットメッセージのログの自動保存
よりチーム向け？の追加機能ですが、利用者が少なければ
結局自分だけで使うことになので、様子見ながら開発しようと思っています。
最後に
ここまで読んでいただきありがとうございます！！🙇
個人開発していると、本当にこのUIでわかりやすいのか？使いやすいのか？
など色々不安になることがたくさんあったのですが、
ひとまず形として出来上がったことと、このように記事を含めて公開できたことが嬉しいです。
誰かの「こういうのほしかった」な気持ちに刺さればいいなと思っています。
最後の最後に
良い悪いどのような感想でも結構ですのでフィードバックいただけると非常に嬉しいです！
サイトのフッターに匿名でも記入できるフォームを用意してますので、
是非お気軽にご感想いただければと思います。泣いて喜びます！
Discussion