【Git】Gitのファイルを更新しよう！【GitHub】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験から Web エンジニアに転職し、
現在正社員として 5 年働いています！

Gitの解説シリーズです。

今回はGitHubのファイルを更新する方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

GitHubのファイルを確認しよう

■ GitHub とローカル環境の連携が出来ていない方はこちらをご参照ください

【Git】最速でGitHubとローカル環境を連携させよう！

samehack.com

■ 本記事と内容を合わせたい方はこちらもご参照ください

【Git】GitHubにファイルを追加しよう！【GitHub】

samehack.com

元のファイルを確認しよう

GitHubと連携済みのindex.htmlを確認しましょう

ファイルを更新しよう

index.htmlの”Hello World”を”こんにちは”に変更し、1行追加しましょう

ファイルの差分を確認しよう

HEADと作業ファイルの差分(diff)を確認しよう

git diff HEAD

<h1>Hello World!</h1>
<h2>Hello World!</h2>
<h3>Hello World!</h3>

↑ が削除され、↓ が追加された、ということを意味します。

<h1>こんにちは</h1>
<h2>こんにちは</h2>
<h3>こんにちは</h3>
<h4>こんにちは</h4>

VSCodeのChangesを確認すれば一目で理解出来ます

HEADとは?

上記の処理はHEADと作業ファイルの比較をしていますが、
HEADとは、ひとことでいうと
今いるブランチの最新のコミットという意味です。

ステージングにadd

VSCodeの機能を使って、変更したファイルをステージングに追加

git add index.html

VSCodeの機能を使って、addをキャンセルしよう!

git restore --staged index.html

ローカルリポジトリにcommit

VSCodeの機能を使って、コミットメッセージをつけてコミット

git commit -m "テキストの変更を行いました"

リモートリポジトリ(GitHub)にpush

VSCodeの機能を使って、ローカルにコミットした内容をリモートリポジトリ(GitHub)にpushしよう！

git push origin main

GitHubで確認しよう

GitHub で確認するとコミットメッセージとともに index.html が追加されたことが確認できました!

ブランチの切り方については次の記事を参考にしてください!

【Git】ブランチを切ってマージしよう！【GitHub】

samehack.com

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram