pss-aileen / project-github-commit-message

🔧 Generate a commit message without thinking.

Commit Easily

Commit Easilyはコミットメッセージを簡単に何も考えずに作成できるWebアプリです。 [Version 3.0.0]からforkして、ご自身に合ったprefixを簡単に作成することができます。

概要

• prefixの入力を簡単にしたい
• プロジェクトごとのprefixを簡単に取得、閲覧したい
• 何のためのprefixかの解説も同時に見たい
• スペースの開け方を統一したい
• ターミナルの入力途中に間違ってエンターキーを押してやりなおしたくない
• とにかく頭を無にして何も考えることなくコミットメッセージを考えたい

そんな人（自分）の悩みを解決するWebアプリです。

URL: https://pss-aileen.github.io/project-github-commit-message/

使い方

1. prefixのタイプを選択
2. prefixを選択
3. 変更内容の概要を入力
4. 詳細を書く（必要であれば）
5. issue番号を書く（必要であれば）
6. GENERATEをクリックしてコミットメッセージを生成
7. COPYをクリックしてターミナルに貼り付け

使用技術

• HTML/CSS
• JavaScript
• Tailwind CSS
• その他
  • jsonにprefixを保管し、オブジェクト指向をでプログラムを書きました（Version 3から）

制作について

• 制作期間
  • 3日
• こだわり
  • 気分が上がるように可愛いアイコンを使ってデザインをまとめました

---

Release

show detail

• [Version 3.0.2] 2024/03/23
  • 修正
    • NORMAL の PREFIX を変更
• [Version 3.0.1] 2024/03/10
  • 修正
    • TYPE PRACTICE PROJECT に WATCH を追加
      • Udemy講座を視聴して、見た動画ごとにコミットする場合のprefix
• [Version 3.0.0] 2024/02/24
  • 内部構造作り替え
    • オブジェクト指向でプログラムを組み直し
    • prefixの情報をjsonで管理するように変更
• [Version 2.0.7] 2024/01/30
  • 修正
    • 選択肢にアイコン追加
    • PAIZAの選択肢の順番変更
• [Version 2.0.6]
  • skip
• [Version 2.0.5] 2024/01/03
  • 新機能
    • ダークモードに対応
  • 修正
    • RELEASE、NEWの時、SUBJECTを自動的に出力
• [Version 2.0.4] 2024/01/01
  • 修正
    • UPDATEの日付を2411→240101になるよう変更
• [Version 2.0.3] 2023/12/23
  • 修正
    • UPDATEの自動日付を20231223から231223になるように変更
• [Version 2.0.2] 2023/12/22
  • 新機能
    • prefixでUPDATEを選んだ時、日付が自動でSUBJECTに入るようにした
• [Version 2.0.1] 2023/12/17
  • 新機能
    • リセットボタン: 自分のインターネット回線が遅くでリロードして書いた内容を消していると面倒だったので、リセットボタンを作成
  • practice-project用のprefixの追加
• [Version 2.0.0] 2023/12/13
  • 新機能
    • プロジェクトごとにprefixを切り替えられる機能を追加
  • 修正
    • prefixが複数選択できる問題を解決（HTMLのSelectからmultipleを削除）
• [Version 1.0.0] 2023/12/03

---

• npm run dev: 開発
• npm run deploy: deployブランチにアップ→publicフォルダとして生成される

project-github-commit-message's Issues

バージョンはプルリクエスト出して、マージする時のタイトルに入れる

🔖 RELEASE: Version 2.0.1 - ごにょごにょ

GitHubのテンプレート、Labelの導入

prefixを小文字へ、prefix大整理

コミットメッセージ用、練習issue

コードの分割、見直し

• dev ブランチにて開発
• コードの分割というより見直しがしたい、今のコード複雑すぎる気がする

理想のコミットメッセージ

理想

:emoji: Subject

Commit Body

Labelにsetupとresetを追加する

• starterを用いてのsetupを作りたい
• reset時々するのでこちらもほしい

🔰 setup: starter導入

🔥 reset: restart project

first-contributionsのprefixを追加する

prefixが複数選択できる問題

修正が必要

環境をViteに変更する

メッセージが生成されるときに何か可愛いアクション、動きが欲しい

mainリポジトリにプッシュしたらGitHubActionsでdeployする

参考になるサイト（絵文字の使い方、コミットメッセージ例）

絵文字

• 📙 Emojipedia — 😃 Home of Emoji Meanings 💁👌🎍😍

コミットメッセージ例

• Git-Emojis - cool git commits
• [転載] gitにおけるコミットログ/メッセージ例文集100
• changelog_en.md

絵文字付きコミットメッセージ例

• Git Commit message Emoji
• GitHubのコミットメッセージに絵文字を入れて開発効率をあげる #Git - Qiita
• Gitのコミットメッセージに絵文字を入れて社内の開発効率をあげた話【Emoji Prefix】 #Git - Qiita⭐️
• ✨ 自分流絵文字で綺麗なコミット - OPTiM TECH BLOG
• gitmojiの絵文字ってどれを使えばいいの？ | cloud.config Tech Blog⭐️

リポジトリ

• carloscuesta/gitmoji: An emoji guide for your commit messages. 😜
• kazupon/git-commit-message-convention: 📝 Extend git commit message from angular style

NORMALのPREFIXを新しいものに変更

• FIX/

paiza追加

せっかくなのでTailwind使ってみる

https://tailwindui.com/components/application-ui/elements/button-groups

使いたい、よく使うコミットメッセージ

洗い出し

• ファイル、フォルダの追加
• ファイル、フォルダの削除
• デザインの修正
• JavaScriptの変更
• CSSの変更
• README.mdの作成、変更
• 機能の追加
• バグの修正
• リファクタリング
• 途中 work in progress

PREFIXをjsonにするといいことあるか、ないか考える

GitHub Desktop用のコピーエリアを作成する

全体の横幅拡大

リセットボタン

自分のネット回線が悪すぎて更新するとすごくイライラしてしまうので、リセットボタンを作りたい

issue番号のローカルストレージへの保存

commit文章にgit commit -m を含めない場合も作成する

• githubdesktopでコミットメッセージを直接書き込むことが増えたで、コマンドが含まれていないバージョンも生成したい
• タイトルと本文分けれればなお良い
• なんか上手い表示方法を考える

バージョンの付け方

todo

• バージョンの付け方をまとめる

ref

• https://www.lyzon.co.jp/blog/2019/20191017_how_to_attach_version_name/
• https://tcd-theme.com/2022/09/how-to-versioning.html
• https://semver.org/lang/ja/

TIL用のコミットメッセージの作成

プロジェクト概要

概要

• ターゲット
  • 小さなプロジェクトを行なっていく時、git commit messageをなんとなく書いている人
  • 書いているものの、なんか統一感がなくて困っている人
  • 雛形が決まっていて、そこにいれていくだけで良いものが欲しい人
• 目的
  • ターゲットが自分なので、自分がコミットメッセージを作成する際に迷わなく良くなるように作成
  • 今後コミットメッセージのつけかたで迷わなくて良いように、このプロジェクトを機にいろいろ調べる

機能要件

• ヘッダー
  • プロジェクト名（orロゴ）、github repoリンク
• メインセクション
  • git commit message generator
• フッター
  • 著作権情報、github repo、作者情報など

デザイン要件

• カラーパレット
  • かっこいい、わくわくする感じが良い。プログラミングやってるなー感、検討
• レスポンシブ
  • 全画面表示、ブラウザ幅を狭めても使えるようにしたい
• フォント
  • 可読性がよければなんでも良い、検討

技術的要件

• HTML、CSS
• コミットメッセージ生成は JavaScript

パフォーマンス要件

• リポジトリの番号、内容の保存、localStorage

COPYの実装

第一弾リリースの目処

• クロスサイトスクリプティング対策→textContentへの出力でエスケープされているのでOK
• コピーの実装

上記ができればリリース！

DAILY REPORT 20231223を 231223 にしたい

index.htmlをさっくり作る