🎯 今日のゴール
VSCode を使って、家計診断Proのコードを GitHub と連携させ、
編集 → コミット → プッシュ が一連の流れでできるようにすること。
これは開発者にとって“最低限必要な基盤”であり、
今後の家計診断Proのコード改善が劇的に効率化されます。
🔧 1. VSCode で GitHub のプロジェクトフォルダを開く
Git 管理しているフォルダ：
FHC-GitHub
└── FHC_makepdf_20251027_2.ini
これを VSCode の
［Open Folder → FHC-GitHub］
で読み込みました。
開いた瞬間、VSCode が警告を表示：
“Untrusted files を開きますか？”
ここは迷わず ［Open］ を選択。
（Git 管理のフォルダは基本的に安全です）
🔍 2. VSCode が Git を自動検知
フォルダを開いた途端、VSCode の左側に以下が追加されました：
- SOURCE CONTROL（ソース管理）
FHC_makepdf_20251027_2.iniに青い “M” マーク（変更あり）
これは、
「Gitで管理されているファイルを認識しました」
というサインです。
✏️ 3. コードをほんの少し編集して “M（変更）” を確認
冒頭コメントを1行追加するなど、簡単な編集を入れると…
📌 ファイル名の右側に “M” が出現！
VSCode が変更を検知している証拠です。
これで編集→コミットの準備が整いました。
💾 4. 初めての VSCode コミット（Commit）
ソース管理パネルで：
▼ 上部のメッセージ欄に入力：
GitHub テストコミット
▼ ［Commit］をクリック！
すると VSCode が次の確認ダイアログを表示：
“ステージされていない変更を全部コミットしますか？”
👉 ここでは ［Yes］ を選択。
⚠️ 5. Git の user.name / user.email 未設定エラー
Commit 後に以下の警告が表示されました：
“config に user.name と user.email を設定してください”
これは Git を初めて使う時に出る“お約束のエラー”です。
すぐターミナルで設定しました：
git config --global user.name "Hideki Yamagami"
git config --global user.email "hideki.yamagami.biz@gmail.com"
これで VSCode からのコミットが正式に利用可能になりました。
☁️ 6. GitHub へ Push（アップロード）
コミットできたので、いよいよ push。
VSCode 左下の “main” 横に ↑マーク（push可）が表示されます。
同じく SOURCE CONTROL パネルの “…” → Push でもOK。
コマンドは内部的に：
git push -u origin main
VSCode は自動で GitHub と通信し、アップロードに成功！
👑 これで VSCode → GitHub の編集・反映フローが完成！
🎉 今日できるようになったこと（超重要）
✔ VSCode で GitHub リポジトリを開ける
✔ ファイル編集 → “M” 表示で変更検知
✔ VSCode 上でコミットができる
✔ Git の user.name / email を設定
✔ VSCode から GitHub へ push 成功
✔ 以降、編集→コミット→Push がワンクリックで可能に！
これは開発効率が一気に上がる転換点です。
🚀 この環境構築で何が変わるのか？
今後は…
- 新機能を追加するときはブランチを切れる
- 間違えても GitHub から 過去バージョンに戻せる
- 「どこを変更したか」が視覚的にわかる
- VSCode から commit → push が一瞬でできる
- 外部エンジニアを入れる場合も安全に共同作業できる
- Copilot や GitHub Actions など高度な開発ツールも利用可能に
家計診断Proの開発基盤がプロ仕様へ進化しました。
コメント