はじめに
この記事は、フロントエンドの機能追加（スクールのハッカソン）として「アンガーママ画像＋音声演出」を実装した際の、個人的な備忘録程度の記録です。
また、複数のファイルを個別にステージ・コミットする方法や、ステージングの取り消し方など、日常の開発で役立つGitの操作についても、自分なりに整理して記録しています。
実装内容の概要
-
/public/images/mom-ang-removebg.png: 怒っているママ画像 -
/public/sounds/angry-voice.mp3: 叫び声のような演出音声 -
page.tsx: 5回に1回表示・再生されるようにロジック追加
ブランチ作成とステージング
まずは新機能のためにブランチを切ります：
git checkout -b feature/mom-audio
変更が完了したので、まとめてステージングして確認します。
git add .
git status
Changes to be committed:
new file: public/images/home1.png
new file: public/images/mom-ang-removebg.png
new file: public/sounds/angry-voice.mp3
modified: src/app/beautiful-woman-mode/page.tsx
ステージングの取り消し
すべてのファイルをステージしてしまったので、いったん取り消します：
git reset
Unstaged changes after reset:
M src/app/beautiful-woman-mode/page.tsx
ここで、編集済みの状態には戻りますが、ステージングは外れます。
個別にコミットして管理を明確に
まず、演出ロジックを加えた page.tsx だけをコミット：
git add src/app/beautiful-woman-mode/page.tsx
git commit -m "アンガーママ及び音声演出"
[feature/mom-audio ca2d7fc] アンガーママ及び音声演出
1 file changed, 31 insertions(+), 4 deletions(-)
残ったファイル（画像・音声などのアセット）は、別の意味付けで後からコミットできます。
ポイントまとめ
| 操作 | コマンド |
|---|---|
| ブランチ作成 | git checkout -b feature/mom-audio |
| ステージング |
git add ファイル名 または git add .
|
| ステージング取り消し |
git reset または git restore --staged <file>
|
| 個別コミット | git add file && git commit -m "..." |
| 状態確認 |
git status、git diff
|
まとめ
機能開発中に画像・音声・コードが一度に変わる場面では、変更の意図ごとにコミットを分けることが重要だと思っています！Gitの柔軟なステージング操作を身につけておくと、後から自分で振り返るときにも便利です。