こんにちは、ヨロと申します。
本日は、Git、GitHubの使い方や設定について軽くまとめてみました。
追記：今回手違いがあり説明用の画像等が全て消えてしまいました。
そのため実際に自分で手を動かしながら動作確認などをしていただけるとありがたいです。
申し訳ありません。
【GitHub, Git】インストールから使い方, 入門・練習・設定方法【Windows】
という事で、まず始めにGitを使うメリットというのは、
ファイルに変更を加えたら、その分の履歴を残す事が出来る、
なので、編集を沢山加え過ぎて最初のところまで戻りたいのに、一体どこまで戻ればいいのかが分からなくなってしまった、
そんな時にも、Gitに履歴が残っているのでとても便利で、いつでも過去の状態に戻す事が出来る。
なので、チームで編集する時なんかにも、誰がどの部分に編集を加えたかなどが明らかになるので、とても管理がしやすい。
GitHub、Gitの使い方、設定方法：GitとGitHubの違いとは？
GitとGitHubの違いを簡単にいうと、
Gitとは、
ファイルやソースコードなどを保存する事が出来、
設定の変更やその履歴などを管理してくれるような管理システム
GitHubとは、
Gitと連携させる事が出来るもので、この他にはBitBucketやGitBucketなんかがある。
他の人と一緒に作業をする場合にとても便利に使えるオンラインサービス
リポジトリ → そのプロジェクトの入っている一番上のフォルダの事。
Gitは、自分のパソコン上での話(ローカルレポジトリ)
GitHubなどは、オンライン, Webサービス(クラウド上)での話(共有、リモートリポジトリ)
Gitの簡単な仕組みの説明としては、
変更したファイルを一旦、インデックスというものに登録して、
そのインデックスからローカルリポジトリ(コンピュータ内)に変更した履歴を保存(コミット)
その保存した内容をリモートリポジトリ(GitHubなどのWebサービス)にアップ(プッシュという)
GitHub、Gitの使い方、設定方法、入門・練習編：Gitインストール【Windows】
ファイルをアップロードする場合、まず始めにGitをインストールする必要がある、
ダウンロードしたファイルをダブルクリックでインストール、
「Next」「Next」「Next」で次々進んでOK。
インストール終了後、コマンドプロンプトで「git –version」
→ バージョンが確認出来ればインストール完了。
そうする事によって、コマンドプロンプトでgitコマンドが使えるようになる。
Gitの基本的な使い方、書き方、設定方法、入門・練習編【Windows】
という事で、ここから実際にGitを使ってみる、
まずはファイルの準備から、
１つのフォルダの中に、index.htmlを保存し、HTMLファイル内に内容を書いていく。
ファイルの階層は、
・index.html
・inu.png
・penguin.png
・usagi.png
という事で、まずは「index.html」から
<img src="inu.png" alt="inu">そして、ブラウザで見るとこんな感じ。
とりあえずは、ここからがスタート。
という事で、まず管理を始める時は、
コマンドプロンプトで、cdコマンドを使って、対象のフォルダの中まで移動するか、
もしくは「cd 」と入力した後に、対象のフォルダをコマンドプロンプトにドラッグアンドドロップ。
そうしたら「git init」で、空のリポジトリを作成、
コマンドプロンプト上に、
Reinitialized existing Git repository in C:/Users/user/Desktop/pochi/.git/ という風に表示されれば設定はOK。
そうすると、Gitリポジトリを作成出来る。
こうする事によって、フォルダ内のファイルに何かしらの変更があった際でも、
全てが「.git」に記憶されるようになる(.gitは不可視ファイルなので目には見えない)
ファイルの履歴を管理したい場合、変更があった場合に全てトラッキングしたいといった場合などに便利。
そして次に、
git add . でインデックスにディレクトリ内の全てのファイルを登録。
git statusでディレクトリの状態、ファイルの一覧、変更内容を確認出来る。
↓
４つのファイルが緑色の文字で表示されていれば、登録は無事OK。
変更履歴を保存(コミット)
変更した履歴をコミットする方法としては、
git commit
もしくは、
git commit -m “ここにコメントを残す事が出来る”
↓
なので今回は試しに、git commit -m “Add Inu to index.html”
そして、git log で過去の変更履歴(コミット内容)を確認する事が可能。
コミットメッセージの追加方法
もし「git commit」でコミットした場合は、
コミットメッセージを追加するよう言われるので、コマンドプロンプト上で「a」を入力、
そうすると、コマンドプロンプトの画面左下に「INSERT」と表示され、文字入力のモードになる。
コメント、文字入力を済ませ、内容を保存したい場合は、文字入力の後に「ESC」
→ そうすると、INSERTという表示がなくなるので、「:wq」でエンターキー。
↓
index.htmlに情報に追加、変更を行ってみる
ここでもう一度、index.htmlに、他の変更を加えてみる。
今回は、犬の画像の隣にペンギンの画像を追加してみる。
// index.html
<img src=”penguin.png” alt=”penguin”> を追加。
この時点で試しに、git statusでステータスを見てみると、
まだインデックスに登録していないので、index.html という文字が赤で表示される。なので、
git add . でインデックスにファイルを登録。
git statusでステータスを確認、そうすると、
ファイルの文字が緑色で表示されて、インデックスに登録される。
そうしたら、
git commit -m “Add penguin to index.html”
ここで念のため、git logで、過去の変更履歴を確認してみると、
↓
今この時点で２つのコミットがあるはず。
過去の設定(コミット)に戻す方法
ここで試しに、過去のコミットに戻ってみる。その場合は、
git checkout HEAD^^
(^^^^ の数で何個前の設定に戻るかを指定することが可能)
そうすると、ペンギン画像が消えて、犬の画像のみになる(HTMLファイルも自動的に書き換えられる)
git checkout master でペンギン画像が元に戻る。
新しくブランチを作る方法
次は、新しくブランチを作ってみる。
git branchで確認をすると、今の時点では、masterしかない。
新しくブランチを作るコマンドは、
git checkout -b ブランチ名
という事で試しに、
git checkout -b add_usagi で add_usagi というブランチを追加。
ここで、git branchで確認をすると、
add_usagi
master
の２つの登録がされている。
この時点で、index.htmlに新たに変更を加える、
今度はペンギンの隣にウサギを追加してみる。
<img src="usagi.png.webp" alt="usagi"> を追加。これらの変更を再度、インデックスに登録をする必要があるので、
git add .
そうしたら、変更したものをコミットする必要があるので、
git commit -m “Add Usagi to index.html” で変更履歴をコメント付きでコミット。
この時点で試しに、git checkout master で、過去のコミットに戻ってみると、
犬の画像とペンギンの画像が残り、ウサギの画像は消える(HTMLファイルの中身も自動で書き換えられる)
git checkout add_usagi で、ウサギの画像が追加される。
という感じで、ブランチごとに管理する事が出来る。
ブランチをmasterにまとめる(合体させる)方法
次にブランチを１つにまとめる方法、
まず、git checkout masterでブランチを切り替える。
この状態で、masterにadd_usagi をマージ(合体)させる。その場合は、
git merge add_usagi
そうすると、masterに、add_usagiがマージ(合体)される
これでマージ(合体)は終わり
git branch で確認をすると、
masterが緑色で選択されたままなのにも関わらず、内容には、ウサギの画像も含まれている。
と、こんな感じで、他のブランチで作った変更内容をmasterに反映させる事が出来る
どんどん機能を実装していって、masterにマージする事によって、プロジェクトを改善していくという事が出来る。
過去の変更履歴(コミット内容)を確認
過去の変更履歴(コミット内容)を確認する場合は「git log」
変更履歴の内容を確認する場合は「git status」
もしくは、より詳細を確認したいという場合は、
「git show ここにIDを貼り付ける」
IDの部分には、画像の赤枠内に書かれているcommitのIDを貼り付ける。
全ての確認が終わった後は「q」で元に戻ればOK。
と、ここまでで設定はひとまず終わり、これで変更履歴が取れるようになる。
ただ、今の状態だと、もし自分のコンピュータが壊れてしまった場合に、全ての変更履歴やファイル、ソースコードもなくなってしまう。
なので、オンライン上に保存する必要がある、その場合は「GitHub」というサービスを使うといい。
GitHubの設定方法に関しては、少し長くなるので、別のページでご紹介。
GitHubの使い方, 入門, 練習, 設定方法・チュートリアル【Windows】
Gitの使い方｜まとめ
という事で、Gitの使い方を簡単にまとめると、
ファイルに変更を加えたら、毎回、
git add . でインデックスにディレクトリ内の全てのファイルを登録。
そして、登録が済んだら、
git commit -m”” でコミットする。
とりあえず、Gitに関しては今日はここまで。
GitとGitHubって何が違うんだろう？