Reactのミニアプリ開発を行った過程で、作成したコードをGitHubにアップする作業を行いました。
これまではコードのGitHubへの反映はSourceTreeを使っていましたが、今回初めてCUI上でリポジトリ作成からプッシュまでを行いました。
この記事では、備忘録としてGitHubにアップするまでの一連のフローを記事化してみます。
※記載の情報は2025年3月現在のものです
目次
ローカルリポジトリを作成する
ローカルリポジトリについて
ユーザー自身が利用するために作成する、自分自身の環境に設置するリポジトリのこと。
自身の変更履歴などはこのリポジトリ上で管理されるイメージ。
①ユーザー名とメールアドレスをGit上で登録する
# ユーザーネーム
git config --global user.name <username>
# メールアドレス
git config --global user.email <emailaddress>
②フォルダを作成する
(1)コマンドラインで作成する場合
mkdir <filename>
cd <filename>
(2)GUIでフォルダ作成する場合
デスクトップを右クリックしてフォルダを新規作成する
③リポジトリを初期化する
下記コマンドを入力することで、リポジトリが初期化されて.gitサブディレクトリが作成される。
git init
④Git管理対象へファイルを追加する
①で作成したフォルダにGit管理させたいファイルを移動させる。
ファイルがない場合はviコマンドやtouchコマンドで新規作成する
現在の状態はgit statusコマンドで確認できる
⑤コミットしたいファイルをステージングに登録する
ステージングへ登録することでファイルやフォルダをコミットの対象にできる。
- 登録するファイルは個別に選択するが、スペースを空けて繋げて書くことで複数ファイルを登録可能
- ワイルドカードを使うことで特定のファイルをまとめて登録可能
# 基本形
git add <filename>
# 複数ファイルを登録したい場合
git add <filename1> <filename2>
# ワイルドカードを使う例
git add '*.jsx'
どのファイルがステージングに登録されているか確認したい場合はgit statusコマンドを使うと良い
⑥ステージングしたファイルをローカルリポジトリに追加(コミット)する
git commit -m "(コメント名)"
※git commitのみでもコミットはできるが、コミットメッセージを編集するエディタに飛ばされるので慣れないうちは-mをつけることを推奨。
ここまでの一連の作業を行うことで、ローカルリポジトリに作業のログを登録することができます。
ここからはローカルリポジトリの内容をGitHubのリポジトリに反映させる作業です。
リモートリポジトリ(GitHub)とローカルリポジトリを連携する
①GitHub上で新規リモートリポジトリを作成する
- GitHubのアカウントを登録する
- GitHub上で新規リポジトリを作成する
リポジトリ作成方法については公式ドキュメントをご参照ください。
②リモートリポジトリURLをGitコマンドで登録する
git remote add <RemoteRipositoryName> <RemoteRipositoryURL>
- リポジトリ名(RemoteRipositoryName)：初期状態は
origin - リポジトリURL(RemoteRipositoryURL)：リポジトリ内のCodeボタンを押下した際に出てくるもの
③初回プッシュのためのアクセストークンを登録する
現在のGitHubでは、初回プッシュの際の認証でアクセストークンが必要になる。そのため新規作成する必要がある。
- (1)GitHubアイコンを押下し
Settingsを選択 - (2)設定画面の一番下にある
Developer Settingsを押下 - (3)
Personal access tokensのアコーディオンを押下し、tokens (classic)を選択 - (4)
Generate new token (classic)から新しいトークンを作成する
注意事項
-
Expiration(有効期限)は無制限にしたいのでNo expirationを選択 -
Select scopesのチェックボックスはrepoの欄は全てチェックを入れる。他は入れなくて可 - 一度作成したアクセストークンの値は再参照できないので、トークン作成後は必ず値を保管しておくこと。
ここで登録したアクセストークンを④の初回プッシュ時のパスワードに登録することで、初回コミットが実行されるようになる。
④ローカルリポジトリの内容をリモートリポジトリにプッシュする
ローカルでコミットした内容(ファイル)はリモートリポジトリにプッシュすることでリモート環境(GitHub)に反映される。
git push <RemoteRepositoryName> <LocalRepositoryName>
- リモートリポジトリ名：初期状態は
origin - ローカルリポジトリ名：初期状態は
main
初回プッシュ時にはユーザーネームとパスワードを求められる。
- ユーザーネーム：自身のGitHubアカウントのユーザー名
- パスワード：前項で作成したアクセストークンを入力
プッシュしたファイルがGitHubのリポジトリ上に反映されていたら完了。
最後に
ここまで読んでくださりありがとうございます。
自分含めCUIでのGit作業はとっつきにくい点が多いと思います。この記事が同じような初学者の助けになれば嬉しいです！
参考文献
Gitのフローについて
https://backlog.com/ja/git-tutorial/
https://zenn.dev/gachigachi/articles/288685d70677b7
https://qiita.com/Futo_Horio/items/4d669f695680bc13d5fa
https://codezine.jp/article/detail/16559
Gitリポジトリの作成について
https://docs.github.com/ja/repositories/creating-and-managing-repositories/creating-a-new-repository
アクセストークンについて
https://qiita.com/mokio/items/f6c67c8f9af050383fc0