GitとGitHubでソースコードを管理する時の手順です。エディタはVScodeを使用します。
現場で利用経験が無い方が多いので説明用にまとめました。
ソースコードを管理する理由とは?
一人で開発してリリースまでする場合はバージョン管理ツールを使って管理する必要はないかも知れませんが、複数人だとでどうでしょうか。
開発する人数が多ければ多いほど、誰がソースコードを追加や変更したのかがわからなくなってきます。例えば何かしらの不具合が起きた時に、変更点が履歴として残っていれば簡単に修正したり戻すことができるでしょう。
そこで必要となるのがソースコードを管理するためのバージョン管理ツールです。変更した内容を管理することで開発をスムーズに行うことができます。
前提条件
Gitがインストールされていること
version確認のコマンドです
git --version
コマンドプロンプト、もしくはターミナルを開いて確認する。versionが返却されたらインストールされています。
C:\Users\takus>git --version
git version 2.24.1.windows.2
GitHubの登録が完了していること

VSCodeをインストールしていること

手順
- GitHubにRepositoryを作成する
- gitconfigの設定をする
- git clone(GitHubで管理しているrepositoryを複製する)
- GitHubにソースコードをpush(アップロード)する
GitHubにRepositoryを作成する
GitHubのヘッダー画面で「New」を選択

入力が完了したら「Create repositroy」を選択してください

各項目について説明します。repositoryを作成した後でも変更可能です。
Repository name : repositoryの名前
Description : repositoryの説明
Public or Private : repositoryの認可設定
Publicは誰でも閲覧可能。Privateは本人と許可されたユーザしか見れません。
initialize this repository with : 以下の内容は必須ではありません。選択しなくても問題ないです。
Add a README file : 管理しているソースコードの説明書となります。
インストール方法や、使い方などを記述します。
Add .gitignore : ソースコードの管理対象の設定
.gitignoreに記述したファイルは管理対象外となり、Git Hubにpush(アップロード)しなくなります。
Choose a license : ライセンスの種類
基本的にはMIT licenseで問題ないです。
ソースコードを管理するためのrepository(保管場所)が完成しました。

こちらのRepository(保管場所)にローカルで管理しているソースコードをpush(アップロード)していきます。
完成したrepositoryはこんな感じで表示されます。

gitconfigの設定をする
GitHubにpush(アップロード)できるようgitconfigの設定をする。
OSによってgitconfigの場所が変わりますが、Windowsの場合は以下のディレクトリにユーザ名とメールアドレスを設定する。誰がpushしたかを判別するためのものです。
Windows環境でデフォルトだと場所は以下となります。
C:\Users\[ユーザ名]\.gitconfig
.gitconfig
[user]
name = ユーザ名
email = メールアドレス
git clone(GitHubで管理しているrepositoryを複製する)
「Code」を選択してから「https://github.com/TokutyTok/React-Code-Collection.git」URLをコピーする。

ソースコードを管理するディレクトリを作成する。
mkdir C:\repos
ターミナルにてGitHubのrepository(保管場所)をローカルにclone(複製)する。
git clone https://github.com/TokutyTok/React-Code-Collection.git
VScodeだとこんな感じのログが出ます。

作成したディレクトリに複成できていたらOK

GitHubにソースコードをpush(アップロード)する
今度はローカルに複製したrepositoryに変更を加えてGitHubのrepositoryにpush(アップロード)してみます。
README.mdに当ブログのURLを追加してみました。
赤枠の部分が①となっていますが、何かしらの変更があればこちらに集計されます。今回はREADMEを変更したので1ファイル変更されているということです。

「+」を選択してましょう。ステージング(コミットしたいファイルを指定)されます。

「READMEにブログのURLを追加」コミットコメントを追加しましょう。
「コミット」を押下する。

「変更の同期1↑」もしくは「・・・」を選択してから「プッシュ」を押下する。

「変更の同期1↑」を押下した場合は以下のダイアログが出ますが、今回は「OK」で問題ないです。

今回は詳しい説明はしませんが、開発者が一人ではなく複数の場合は注意した方が良いです。プル(最新のソースを取得とマージをする)してからプッシュ(アップロード)を行っている。※ソースコードの競合が起こる可能性があります。
GitHubのrepositoryを確認してみましょう。無事にpushされました。

おすすめのUdemy講座
GitでおすすめのUdemy講座を紹介します。
Git: もう怖くないGit!チーム開発で必要なGitを完全マスター

GitHub Flowでのバージョン管理を学べるため現場で即役立つ内容となっています。
Gitの基本的な内容も網羅しているのでおすすめです!
ちゃんと学ぶ、Git/GitHub・SourceTree講座(Win/Mac対応・コマンド対応)

Gitを学ぶ上でクライアントソフトを使うメリットは視覚的にわかりやすいことです。
現場によってはSourceTreeなどのクライアントソフトを使用することもあるので知っておいて損はないと思います。