takenoko03の日記

PHP言語で仕事する

Gitを始めよう その5 GitHubの画面の見方

 GitHubの画面

1.GitHubのサイトへ移動。

2.メニューから「Your Profile」。

 

2.「Repositories」タブから「git_tutorial」をクリック。

 

3.「index.html」をクリック。

 

4.「index.html」の内容。

「Raw」はコピー&ペーストしたい時に使います。

「Blame」は何のために何時、何を変更したのかを表示します。

History」はファイルをコミットした履歴が表示されています。

以上です。

 コマンドにエイリアス(別名)を付けよう

コマンドの入力を短縮して入力するのを楽にします。

 エイリアスを使う理由

毎回「git status」や「git commit」と入力するのは長くて面倒なので。

 

 コマンドにエイリアスを付ける

「git config --global alias.ci commit」(ciと入力すればcommitされる)

「git config --global alias.st status」(stと入力すればstatusされる)

「git config --global alias.br branch」コマンドについては後述。

「git config --global alias.co checkout 」コマンドについては後述。

 

「git config --global」の部分はPC全体の設定を反映させます。

 

 ターミナルでの作業

1.GitBashを開く、「cd ~/documents/udemy_code/git_tutorial」を入力。

2.「git config --global alias.ci commit」と入力。

 

3.「git config --global alias.st status」と入力。

キーボードの「↑」キーを押すと、直前の入力をコピー&ペースト出来ます

 

4.「git config --global alias.br branch」と入力。

5.「git config --global alias.co checkout 」と入力。

 

6.「git st」と入力。(git statusコマンドと同じ動作をします)

 

7.「git ci」と入力。(git commitコマンドと同じ動作をします)

終了です。

 

 バージョン管理しないファイルは、無視しよう

バージョン管理したくないファイル

・パスワードなどの秘密情報が記載されたファイル。

パスワードを流失しないようにしましょう

・チーム開発で必要ないもの。キャッシュやwindows共通ファイルなど

 

 .gitignoreファイルに指定する

自動生成されるファイル、またはパスワードが記載されたファイルは管理しない。

 

 .gitignoreファイルの書き方

(#から始まる行はコメント扱い)

#指定したファイルを除外

index.html

#ルートディレクトリを指定

/root.html

ディレクトリ以下を除外

dir/

#/以外の文字列にマッチ「*」

/*/*.css

 

 ターミナルでの作業

1.GitBashを開く、「cd ~/documents/udemy_code/git_tutorial」と入力。

2.「git status」と入力。(今の状態を確認)

 

3.「touch secret.txt」と入力。(空のファイルsecret.txtを作成)

gitignoreの動きを見るための作業です。

 

4.「ls」と入力。

secret.txtが追加されています。

 

5.「git status」と入力。

ステージに保存されていないsecret.txtがあると、表示されます。

 

6.VScodeを起動。

7.新しいテキストファイルを開き「secret.txt」と入力。

git_tutorialのディレクトリ下に「.gitignore」という名前で保存して、終了します。

 

8.GitBashへ移動。

9.「git status」と入力。

.gitignoreがステージに保存されていないと表示されます。

注目 secret.txtが表示されていない。

.gitignoreにファイルを指定すると、gitのバージョン管理からファイルが外されます

 

10.「git add .」と入力、「git commit」と入力。

 

11.VScodeが起動後、「.gitignoreファイルを追加」と入力し保存、終了します。

 

Gitを始めよう その4 ファイルの移動を記録しよう

 ファイルの移動を記録しよう

「git mv <旧ファイル名> <新ファイル名>」

ファイル名の変更を記録し、ステージにも変更が保存されます。

 

上記と同じ結果になるコマンド操作

1.「mv <旧ファイル名> <新ファイル名>」(ファイル名の変更)

2.「git rm <旧ファイル名>」(古いファイルを削除)

3.「git add <新ファイル名>」(新しいファイルを追加)

 

 ターミナルでの作業

1.GitBashを開く。

2.「ls」と入力。

index.htmlが有るのを確認します。

 

3.「git status」と入力。

変更が無いことを確認します。

 

4.「git mv index.html index2.html」と入力。

(index.htmlをindex2.htmlというファイル名に変更)

 

5.「ls」と入力。

ファイル名がindex2.htmlに変更されました。

 

6.「git status」と入力。

 

 元の状態に戻します

7.「git mv index2.html index.html」と入力。

 

8.「ls」と入力。

index.htmlに直っている。

 

9.「git status」と入力。

何も変更が無いことを確認して、終了です。

 

 GitHubにプッシュしよう

プッシュとは

GitHub等のリモートリポジトリにローカルの内容をアップすること。

 

コミットしたら、その内容をGitHubにアップする。アップすることによって、メンバーと開発したものを共有したり、GitHubにローカル内容を保存したり出来ます。

 

 リモートリポジトリ(GitHub)を新規追加する

「git remote add origin https://~

(originというショートカット名でURLのリモートリポジトリを登録する。

「git remort add ~」を使わないと、アップする際に毎回URLを入力することになります。

 

 リモートリポジトリへ送信する

「git push <リモート名> <ブランチ名>」

「git push orgin master」今回はこのように入力します。

 

 GitHubサイトでの準備

1.GitHubのマイページを開く。

2.メニューから「Settings」をクリック。

 

3.「Developer settings」をクリック。

 

4.「Personal access tokens」をクリック。

Personal access tokensは、プッシュする際、ユーザーを判別するパスワードの変わりとなります。

 

5.「Genarate new token」をクリック。

 

6.目的欄には「admin」、有効期限は90日間、出来ることは全てにチェックを入れます。

記入し終わったら「Generate token」をクリック。

 

7.出来上がったトークンは、必ずコピーしてメモ帳などに保存します

失くした場合は、「Genarate new token」で新たに作ります。

 

 GitHubリポジトリを作成する

1.メニューから「Your profile」をクリック。

 

2.「Repositories」をクリックし、「New」をクリック。

 

3.「Repository name」の欄に「git_tutorial」。

「Description」は空欄。「Public」を選択。後の選択にはチェック無し。

終わったら「Create repository」をクリック。(リポジトリが出来る)

 

4.出てきたページの赤枠部分をコピーしておく。

 

 ターミナルでの作業

1.GitBashを開く。「cd ~/documents/udemy_code/git_tutorial」と入力。

2.「git remote add origin <リポジトリURL>」と入力。

 

3.「git push -u origin master」と入力。

「-u」 を使うことで、次回以降にorigin masterをプッシュする際に「git push」だけでプッシュが出来ます。

 

4.実行すると、この画面がポップアップ。

「Token」をクリックし、欄にメモ帳にコピーした「Personal access token」を入力して、「Sign in」をクリック。

 

5.tokenが正しく入力されていれば、この画面になります。

 

6.GitHubへ戻り、ページを更新するとindex.htmlが追加されています。

確認できたら、終了です。

Gitを始めよう その3 何を変更したのかを確認しよう

 その2からの続きです。

 

 変更差分を確認する

git addする前の変更分

「git diff <ファイル名>」

 

git addした後の変更分

「git diff --staged」

 

git diffコマンドで起こっていること

 ターミナルでの作業

1.GitBushを開く。

2.「git diff」と入力。

変更が無いので何も表示されません。

 

3.VScodeを開く。

4.index.htmlを開く、3行目に「<p>git diff</p>」と入力。

 

5.保存してGitBushへ。

6.「git diff」と入力。

 

7.「git add index.html」と入力。(ステージに追加する)

8.「git diff」と入力。

ワークツリーとステージの内容が一致しているので、何も表示されません。

 

9.「git diff --stage」と入力。

 

10.「git commit」と入力し、エディタに「git diffを追記」と入力。

保存して終了する。

 

11.「git diff」と入力。

ステージとコミットの間で変更が無いので、何も表示されません。

 

 変更履歴を確認しよう

以前どのような変更があったのか、調べたいとき。

 

 変更履歴を確認する

「git log」コマンド(全ての変更履歴を表示)

 

おまけ

「git log --oneline」(要点を1行で表示)

「git log -p <ファイル名>」(ファイルの変更差分を表示)

「git log -n <コミット数>」最近の変更履歴だけを見たい

 

「git log」コマンドで起こっていること

 ターミナルでの作業

1.GitBashを開く、「cd ~/documents/udemy_code/git_tutorial」と入力し、ディレクトリを移動。

2.「git log」と入力。

最新から1つずつ古い情報へと、表示されます。

 

 ファイルの削除を記録しよう

「git rm <ファイル名>」(ファイルを削除)

「git rm -r <ディレクトリ名>」(ディレクトリを削除)

コミットされた記録もワークツリーの記録も削除されます。

 

「git rm --cached <ファイル名>」

リポジトリからは消すが、ワークツリーにはファイルを残したい場合。

 

 ターミナルでの作業

1.GitBashを開く、「cd ~/documents/udemy_code/git_tutorial」と入力し、ディレクトリを移動。

2.「ls」と入力。

index.htmlがあるのを確認します。

 

3.「git status」と入力。(変更状況を見る)

変更内容が無いので何も表示されません。

 

4.「git rm index.html」と入力。

index.htmlを削除したと表示されます。

 

5.「ls」と入力。

何も表示されない。=ワークツリーからindex.htmlが削除されました。

 

6.「git status」と入力。

リポジトリにあったindex.htmlが削除され、その削除された変更状態が、ステージに記録されています。

 

7.削除する前の状態に戻します。

「git reset HEAD index.html」と入力し、

「git checkout index.html」と入力。

 

8.「ls」と入力。

index.htmlが戻ってきています。

 

9.「git status」と入力。(変更内容が無いのを確認する)

 

10.「git rm --cached index.html」と入力。

 

11.「ls」と入力。

ワークツリーからはindex.htmlは削除されていません。

 

12.「git status」と入力。

リポジトリからindex.htmlが削除され、その変更状態がステージに記録されています。

 

13.「git reset HEAD index.html」と入力。(削除前の状態に戻る)

 

14.「git status」と入力し、変更が無いことを確認して終了です。

Gitを始めよう その2 変更を記録しよう(コミット)

Gitを始めよう その1からの続きになります

 

 変更を記録しよう(コミット)

・「git commit」コマンド

Gitのテキストエディタが立ち上がりメッセージ付きで変更を記録します。

おまけ 

 git commit -m "<メッセージ>"(メッセージ付きで内容の変更を記録)

 git commit -v(変更内容を表示)

 

 分かりやすいコミットメッセージを書こう

・簡単に書く時

 変更内容の要点と理由を一行で簡潔に書きます。

・正式に書く時

 1行目:変更内容の要約

 2行目:空行

 3行目:変更した理由

 

 ターミナルでの追加作業

1.BitBushを開く。

2.「cd ~/documents/udemy_code/git_tutorial」と入力。(ディレクトリを移動)

3.「git commit」と入力。(コミットのためにエディタが起動)

 

4.「initial commit」と入力。保存してエディタを終了する。

5.赤枠にinitial commitと表示されれば完了です。

 

 現在の変更状況を確認しよう

コミットやステージに追加する前に、どのファイルが変更されたかを確認する癖を付けよう

 

・「git status」コマンド

 変更されたファイルを表示します

ワークツリーとステージ、ステージとリポジトリの間で変更されたファイルを表示します。

 

 ターミナルでの確認作業

1.GitBushを開く。

2.「cd ~/documents/udemy_code/git_tutorial」と入力。(ディレクトリを移動)

3.「git status」と入力。

今は、コミットすべき変更は何も無いと表示されます。

 

4.VScodeを開く。

5.git_tutorialフォルダ内のindex.htmlを開く。

6.「<p>git status</p>」と入力して保存、終了する。

 

7.GitBushへ。「git status」と入力。

ステージに追加していない内容が有り、それは赤文字でindex.htmlだと表示されます。

 

8.「git add index.html」と入力。(ステージに変更の追加)

 

9.「git status」で確認。

コミットすべき変更が有り、それは緑文字でindex.htmlだと表示されます。

 

10.「git commit」と入力。(コミットのためにエディタが起動)

11.「git statusコマンドを追記」と入力。保存して終了。

「git statusコマンドを追記」と表示されます。

 

12.「git status」と入力。

何も変更なしと表示されれば完了です。

Gitを始めよう その1 ローカルリポジトリの作成

 第一歩はローカルリポジトリ(Gitリポジトリ)の作成

※準備

 PCにてC:ドライブ/ユーザー/ユーザー名/Documentsフォルダに「udemy_code」フォルダを新規作成しておきます。

 

1.ターミナル(筆者の場合はGitBush)を起動。

2.「cd ~/documents/udemy_code」と入力。(udemy_codeフォルダへ移動)

 

準備の段階でudemy_codeが作成していないと下記のようにエラーが出る。

 

3.「mkdir git_tutorial」と入力。(git_tutorialディレクトリが作成)

  「cd git_tutorial」と入力して移動する。

 

4.「git init」コマンド入力する。(空のGitリポジトリを作成するよう命令)

  「.git」ディレクトリが作成される。

 

5.「ls -a」を入力。(ディレクトリの中身を表示)

・・/の部分は隠れフォルダ。普段は見えないが存在している。

 

6.「ls .git/」と入力。(.gitの中身を表示)

表示された中で大切なのは2つ。

config(gitの設定ファイル)と objects(リポジトリ本体)

 

 GitHub上にあるプロジェクトから始めよう

1.GitHubを開き、検索バーで「atom」と入力。

 

2.検索結果で「atom/atom」をクリック。

 

3.「Code」ボタンをクリック。

 

4.「https:github~」横にあるコピーマークをクリック。

 

5.GitBushを開き、「cd ~/documents/udemy_code」と入力し、

 次に「git clone ~」を入力。ダウンロードが始まるので終了するまで待つ。

       (~の部分はマウス右クリック→Pasteで貼り付け)

「git clone<リポジトリ名>」(リポジトリ名のコピーを作成する)

 

 変更をステージに追加しよう(上記からの続き)

1.ワードエディタ(筆者の場合はVScode)を開き、

「<h1>Gitチュートリアル</h1>」と入力。

(<p>git status</p>の部分は無視して下さい、次の記事で出ます。)

Ctrl+Sキーで保存する。(場所はDocuments/udemy_code/git_tutorialフォルダに「index.html」という名前を付けて保存。)

 

2.GitBushへ戻る、「ls」と入力。index.htmlが表示される。

 

3.「git add .」と入力。(ステージに変更を追加)

おまけ

git add <ファイル名>   (ファイル名の変更をステージに追加)

git add <ディレクトリ名> (ディレクトリ名の変更をステージに追加)

git add .         (ワークツリー全体の変更をステージに追加)

 

4.「cd ~/documents/udemy_code」と入力し、「cd atom」と入力。

 

10.「ls -a」と入力。赤枠で囲まれた「.git/」が確認できれば完了。

 

Gitの仕組み おまけ:ターミナル頻出コマンド

 Gitがバージョンを、どのように記録するのか

Gitはファイルの塊でスナップショットを記録する。

青で囲んでいるものがバージョン1のスナップショットを記録したもの。

変更があれば、変更箇所だけを変えてバージョン2として、スナップショットを記録します。

 メリット

・コミット(後に説明する)をたどることで以前の状態に戻せる。

・複数人での作業スピードが上がる。

 

 Gitの操作の流れ(自分)

1.ローカルでスナップショットを記録する。

2.Githubへ保存する。

 Gitの操作の流れ(公開されているファイルをコピーする)

 ローカルは3つのエリアに分かれている

ステージは、変更前または変更済みだけの情報を記録しています。

これによって、多くのファイルの中から一部だけ変更したい場合にも対応できます。

 

 Gitコマンドは何をしているのか(イメージです)

 

・コミットする場合=スナップショットを記録する場合

インデックスとツリーが、同じ内容でも別ファイルな理由は、多くのファイルから一部だけコミット出来るようにするためです。(作業スピードを早く)

 

・新しいファイルを追加する 青文字が新しいファイル

コミット2の中にある、親コミット1を利用すれば変更される前の状態に戻れ

ます。

 

・ファイルを更新する

 Gitのデータ構造まとめ

リポジトリに「圧縮ファイル」「ツリー」「コミット」ファイルを作成することでデータを保存しています。

・コミットが親コミットを持つことで変更履歴をたどれます。

・Gitの本質はデータを圧縮して、スナップショットで保存していることです。

・Gitのコマンドは、そのデータに対して色々な操作をしています。

 

 おまけ:ターミナル(筆者の場合はBitBush)頻出コマンド

・cd ~:ディレクトリ(ファイル)を移動する。

・ls ~:ディレクトリの内容を表示する。

・mkdir ~:ディレクトリを新規作成します。

・rm ~:ファイルを削除します。

・cp ~:ファイルをコピーします。

・mv ~:ファイルの移動とファイル名の変更をします。

・cat ~:ファイルの中身を表示します。