世界一よくわかるgit操作~pushまで~

githubは変更履歴を管理、共有するためのツールです。今や、世界中でエンジニアが利用しているツールとなっています。そのため、これからエンジニアになるには超絶必須ツールです。ですが、初学者の方は苦手意識を持ちがちだと思います。そこで、gitと友達になってもらうことを目標にこの記事を書かせてもらいました。

Make friends with Git !

Gitをインストール

1.　Gitがインストールされているか確認

Mac

git --version

Windows

git version

2.　下記のようにバージョンが表示されればOK

git version 2.32.1 (Apple Git-133)

3.　Gitがインストールされていなかった場合、インストールする

Macはこちらから
- https://git-scm.com/download/mac
windowsの方はこちらから
- https://gitforwindows.org/

Gitの初期設定

下記のようにユーザー名とメールアドレスを登録することで、誰がコミットしたのか分かるようになります！

git config --global user.name "ユーザー名"
git config --global user.email "メールアドレス"

さらに、github上のコントリビューション・カレンダーにコントリビューションを追加することができるようになります！コントリビューションとは、「貢献」という意味です。コミットやプッシュすることで、増やすことができます。

この様子が草が生えているように見えることから、コントリビューションは「草」と呼ばれたりしています。俗に言う、「草を生やす」ってやつですね！どれだけ自分がプログラミングをやっているか、視覚的に分かるため、就活の材料にはピッタリですね！

githubアカウント作成

めっちゃ宇宙...素敵..！

1.　https://github.com/ にアクセスする
2.　「Sign up」をクリック
3.　必要情報を入力
4.　「create　account」をクリック
5.　メールアドレスに届いたコードを入力
6.　各項目にチェックしていく
7.　「free」を選択して作成完了！

リポジトリ作成

1.　https://github.com/ にアクセスしてログインする

2.　赤丸の「New」をクリック

3.　「Repository name」を記入して名前をつける

4.　「Public」か「Private」を選択する（今回はPublic）

5.　「Create repository」をクリックして作成

6.　こんな画面が出ればOKです！（リポジトリ名は「test」にしました！）

ファイル変更からプッシュ（マスターブランチに反映）まで

git init ローカルリポジトリの初期化

1.　作業するディレクトリを作成する

2.　作成したディレクトリをエディター（vscode）で開く

お好きなシェル（Macならターミナル、windowsならコマンドプロンプトとか）を開いて、作成したディレクトリーまで移動して

code .

でvscodeを起動することができます。

3.　ターミナルを開いて、作成したディレクトリに移動していることを確認

4.　ターミナルで git init する

git init

5.　初期化されているか確認する

下記のように　.gitディレクトリ（ローカルリポジトリ）が作成されていればOK

これで準備は整いました！

ファイルを作成する

今回は下記のようにindex.htmlファイルを作成しました
1.　赤丸に青丸で①と表示されているので、クリックします

2.　「変更」欄に先ほど作成したindex.hmtlがあることが分かりますので、index.htmlをクリックします

3.　下記のように表示され、左（赤いの）が変更前、右（黄緑の）が変更後のindex.htmlです
（今回は、新規に作成したため、「コードなし」と「コードあり」になっています）

この変更前と変更後の差を「差分」と呼びます！

git add [ステージングする対象ファイル]

githubに変更を反映するには、まず、この手順が必要です。これはステージングと呼ばれています。コミットするための準備って感じです。

1.　先ほどクリックしたindex.htmlの左横にあるアイコンたちの中の、「+」ボタンをクリックします

2.　「ステージされている変更」にindex.htmlが追加されています

3.　上記の「-」ボタンを押すことで、下記のように変更を無かったことにすることもできます

git commit -m [コミットメッセージ]

次に、コミットが必要です。これは、ステージングされたものをプッシュするための準備って感じです。

1.　赤い囲いのところに、メッセージを入れます（今回は初回コミットのためfirst commit）

このメッセージをコミットメッセージと呼びます。どんな変更内容を反映するのか短く分かりやすいメッセージで書いてみましょう！

2.　「ソース管理」の右横のチェックをクリックします

3.　これでコミットできました！

git branch -M main

githubが公式にデフォルトブランチ名を「master」から「main」に変更する方向性を打ち立ています。そのため、先ほど見た画面の手順の中にも

「git branch -M main」が確認できると思います。これは、デフォルトブランチをmasterブランチからmainブランチに変更するためのコマンドです。githubと友達になるためにこちらも実行しましょう！
1.　ターミナルを開きます（Macは「control+shift+@」、windowsは「control+@」）
2.　コマンドを入力してエンターを押します

git branch -M main

3.　画面左下に「main」と表示されればOK

git remote add origin [リモートURL]

ここまで準備してきましたが、まだ、リポジトリと連携していません。そのための手順がこちらです。

git remote add origin [リモートURL]

1.　作成したリポジトリのページにアクセスする

2.　赤丸をクリックして、リモートURLをコピーする

3.　vscodeでターミナルを開く（Macは「control+shift+@」、windowsは「control+@」）
4.　上記コマンドにリモートURLをペーストする

git remote add origin https://github.com/washogo/test.git

5.　下記コマンドを打つ

git remote -v

6.　下記のように表示されていればOK

git push (-u) origin [ブランチ名]

いよいよプッシュして、githubに変更内容を反映するときがきました！やっと草を生やせます！

「ブランチの発行」をクリックします

2.　作成したリポジトリのページにアクセスするか、リロードする
3.　赤い囲いをクリックします

4.　下記のようにコミットされた時間とコミットメッセージが確認できます

5.　赤い囲いをクリックします

6.　下記のように変更内容の差分を確認することもできます

7.　次のpushからは下記のように「変更の同期」と表示されると思いますので、それをクリックします
(divタグで「githubと友達になろう！」と入れてみました！)

まとめ

いかがだったでしょうか？
今回はvscodeのgui操作を使用してpushまでの流れを解説していきました。git操作に関しては、「慣れる」ことが大切です。たくさん会って、遊んで、話して、そうして、いつの間にか仲良くなっていくものですよね？それと同じです！ぜひ、積極的に草を生やしましょう！
次回は、ブランチ作成からマージまでを解説したいと思います！ありがとうございました。

参照