LoginSignup
1
0

More than 3 years have passed since last update.

@ko_5(ko)

NITICNoobsによるGit/GitHub講座 第6回 GitHub入門編

Last updated at Posted at 2020-06-07

どうも

ko と申します。
春からぷよぐやみんぐを始めた身ながら未だなんもできません。
限界開発鯖の底辺でクソBotを作ったりしています。

今回はGitHubの解説を担当させていただきたいと思います。対戦よろしくお願い致します。

※この記事は茨城高専生2I向けに書かれたものです。

　実際に手を動かしながら読み進めてくれると嬉しいです。

お説明

※前回までの説明を理解していること前提で説明をしていきます

今回の記事では、

  • GitHubについて
  • リモートリポジトリとは
    • ローカルリポジトリと何が違うの？
  • pushについて
  • GitHubにリモートリポジトリを作成し、pushするまでの流れ
    • cloneとは
    • push コマンドの詳細
    • .gitignoreについて

主に以上の点について説明していきます。

※以下でGit Bashと出てきますが、コマンドプロンプトでも同様の操作ができます。

GitHubとは

GitHubとは、Gitリポジトリをインターネット上に共有し、
様々な利点とともに開発を行えるリポジトリホスティングサービスとなっています。
類似のサービスとしてはGitLabなどが挙げられます。
image.png

GitHubを使用する利点

  • ローカル(自分のパソコンにある)リポジトリを何らかの理由で破壊してしまった場合、
    GitHub下で管理されているリモートリポジトリの内容を持ってくることで修復することができる
  • 共同開発者と簡単にコードを共有できる
  • 他の開発者にソースコードのレビュー(精査)をしてもらえる
  • 機能追加のリクエスト(issue)を受けられる

無条件でこれらの徳を得られるので、Gitを使えてGitHubを使わない理由はないと思います。
というかプログラマ業界において、基本的にGitHubは人権です。

GitHubの基本的な要素

repo.png
GitHubでは、Commit履歴やBranchなどの情報を視覚的に扱うことができます。
ファイル名やディレクトリ名をクリックすることでソースコードの内容を見たりできます。
Commit履歴では、diff(変更内容)を見やすく表示してくれたりします。

※ここの情報は誰でも見れるので、くれぐれも個人情報を載せることのないようにしてください。

リモートリポジトリについて

リモートリポジトリとは、GitHubなどのホスティングサービス側で管理されるリポジトリのことです。
ローカルのリポジトリをGitHubにアップロードし、それを共同開発者や協力者と共有することができます。

image.png

通常、リモートリポジトリ内のファイルを直接書き変えたりすることはありません。
ではどうするかというと、まずローカルリポジトリの内容を変更し、変更後のファイルの状況を
リモートリポジトリに渡してあげる必要があります。
GitHubにリポジトリをアップロードするには「push」というコマンドを使用します。

ローカルリポジトリとの違い

ローカルリポジトリは自分しか見えませんが、リモートリポジトリは「インターネット上にいる誰でも」見ることができます。
つまり、パスワードやtoken(識別情報)、API Key、本名などの重要な個人情報を載せてしまうと
悪質なハッキングに遭ってしまう危険性があります。くれぐれも気を付けてください。
その他にも共有したくないファイルがある場合があります。
(例： プロジェクトで使用しているパッケージをまとめたディレクトリなど)

Gitでは、そんなファイルをpushコマンドから無視(ignore)するように設定することができます。
　　詳細は下記(.gitignoreについて)で説明しています

もしもリモートリポジトリに上げたくないファイルがある場合、.gitignoreファイルを記述するといいでしょう。

また、リモートリポジトリ内のファイル状態がおかしくなってしまうと共同開発者に迷惑なので取り扱いには少し注意が必要となってきます。

pushとは

pushとは、ローカルの変更内容をリモートリポジトリに報告するコマンドです。
コミットなどの作業をローカルで行うだけでは、その変更内容はリモートに反映されません。
image.png
(上の丸一つ一つがコミットを表しています)
Aさんがpushをすることによって初めて、Bさんは変更を取り寄せることができますし、コードレビュアーはソースコードを読むことができます。
変更を取り寄せる方法は次回で出てきます。

リモートリポジトリ作成からpushするまでの流れ

事前準備
自分のパソコンの任意の場所にリポジトリを作成しておいて、任意のファイルを追加しておいてください
image.png
↑ .gitというディレクトリはgit initをすると自動的に作成されるので後から作成する必要はありません。
(.gitは隠しファイルになっているので利用している環境によっては見えない場合がありますが問題ありません。)

ローカルリポジトリ内でGit Bashを起動しておいてください
(またはコマンドプロンプトを起動しリポジトリのディレクトリまで移動しておいてください。)

※ディレクトリを移動する方法についてはこるくが第2回で説明しています。

  1. GitHubアカウントページにアクセスします
    　https://github.com
    　ログインしてあればこのような画面が表示されます
    image.png

  2. 左のRepositoriesから、Newを選択します

  3. 新しいリモートリポジトリの情報を入力します
    image.png
    以下はオプションです
    ・ initialize this repository with a README
    　このオプションはREADME(説明書)を生成するので、リモートリポジトリの中身が空ではなくなり、
    　後述するgit cloneの使用を余儀なくされてしまいます。今回は最初にgit remote add URLの方から
    　紹介する予定なのでオフにしておいてください。
    ・ public or private
    　GitHubにはprivate ripositoryという機能があり、機密性を保ちたいコード(会社のプロジェクトや
    　大会などのコード)　を書くときなどにリポジトリをプライベートにして非公開にする
    　機能があります。今回は特に隠す理由が無いと思いますので、オフにしておきましょう。

　上記以外にもadd .gitignoreやらadd a licenseやらオプションがありますが、
　今回はオフにしておいてください。

  1. Create repository をクリックします

  2. リモートリポジトリとローカルリポジトリを紐づけます。ここのやり方は主に二通りあります

一つ目

一つ目は、あなたのパソコンに先にリモートリポジトリの場所を覚えさせておいて、そこにpushできるようにする方法です。
Git Bashで、git remote add origin URL(URLは自分のリモートリポジトリのURLに置き換えてください)と入力します。
image.png

$ git remote add origin <"リモートリポジトリのURL">



これで、ローカルリポジトリのremoteという情報にoriginという名前のリモートリポジトリURLが追加されました。(なぜoriginなのかは後ほど)

この方法では、ローカルリポジトリが既に存在しており、変更を与えてしまっている場合に役立ちます。二つ目の方法ではリモートリポジトリの内容をダウンロードしてくるためローカルのファイルを移動させてpushしないといけないという二度手間になってしまいます。
それに対し、この方法(git remote add origin URL)では、ローカルに与える影響は「リモートリポジトリURLの追加」なので、既にローカルにリポジトリを作ってある場合においても実行できます。
では、コミットして、先ほど行った任意のファイル作成を記録します。

Bash
$ git add --all
$ git commit -m "<コミットメッセージ>"

次にその変更内容をリモートにpushしましょう。

Bash
$ git push origin master

(このコマンド文の詳細については下で説明します。)

二つ目

この方法では、ローカルにファイルを作る前にリモートリポジトリを作成して行うので今回のような事前準備は必要ありません。
二つ目は、先ほど作成したリモートリポジトリをcloneしてくる方法です。
知らないコマンドが出てきました。

cloneとは何か

リモートリポジトリの情報、内容のコピーををあなたのパソコン上にダウンロードしてくるコマンドです。ダウンロードしてきたリモートリポジトリの情報にはURLも含まれているので、cloneするとその後はpushを行うことができます。

先ほどのinitialize this repository with a READMEのオプションをオンにしていた場合や
共同開発を行うとき、最初にリポジトリを初期化した人以外などの場合はこちらの方法を使うことが多いです。

コマンド

リポジトリを保存したいディレクトリに移動して
git clone URL (ここのURLもリモートリポジトリのURLに置き換えてください。) と入力します。

Bash
$ git clone <"リモートリポジトリのURL">

(ここで、warning: You appear to have cloned an empty repositoryと警告が出ることがありますが、
これは「リポジトリをクローンしてきたけどこれ空っぽだよ？間違ってたりしない？」と心配してくれているだけなので問題ありません。)
(ちなみにここのコマンドにはoriginという単語が含まれていませんが、その説明も後ほど行います。)
git cloneでダウンロードしてきたリポジトリは、既にGitリポジトリとして初期化されているのでgit initをする必要はありません。
任意のファイルを追加して一連の流れを執り行いましょう。
image.png

Bash
$ git add --all

$ git commit -m "<任意のメッセージ>"
[master (root-commit) 96f6293] <ここにコミットメッセージが表示されます>
 1 file changed, 1 insertion(+)
 create mode 100644 <追加したファイル>

$ git push origin master                                           
Username for 'https://github.com': <ユーザー名>
Password for 'https://<ユーザー名>@github.com': (パスワードを入力)← 表示はすべて「*」になってしまいますが問題ありません。
Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 392 bytes | 392.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
To <"リモートリポジトリのURL">
 * [new branch]      master -> master

上記の二種類の操作(remote addかclone)のうちどちらかを実行することで紐づけは完了です。
ローカルリポジトリがリモートリポジトリの場所を覚えていてくれるので、次から簡単にpushをすることができるようになります。

リモートリポジトリのURLがoriginとして登録されていることを実際に確認してみましょう。

$ git remote
origin

remoteにoriginが追加されていることがわかります
URLも確認することができます。

$ git remote get-url origin
https://github.com/ユーザー名/リポジトリ名

ちゃんと登録されていることが確認できたでしょうか。

場合によって使い分けることになるので、両方覚えておきましょう。

  • git remote add origin URLで、remoteの情報にoriginという名前でURLを追加
  • git clone URLでリモートリポジトリをコピーしてくる

6. うまくいっていれば、これで先ほど作成したリモートリポジトリにローカルの内容が反映されているはずです。
　リモートリポジトリのURLにアクセスして確認してみましょう。
　https://github.com/ユーザー名/リポジトリ名
image.png

pushの詳細

GitHub上でリポジトリを共有するには、Git Bashかコマンドプロンプトで
git push リモートリポジトリ名 ブランチ名と入力します。

このリモートリポジトリ名というのは、リモートリポジトリ作成時に入力したRepository nameとは異なります。
上の説明で使用されていたoriginというのがここでのリモートリポジトリ名です。(ローカルにおけるリモートのURLの名前と言った方がわかりやすいかもしれません。)
リモートリポジトリ名には自由な名前を付けることもできますが、通常の開発目的で作成した場合、メインのリモートリポジトリにはoriginという名前を付けるのが慣習です。(cloneした場合は、リポジトリをダウンロードしてきた時点で自動でoriginが登録されています。)
次はブランチ名についてです。上の説明でのブランチ名はmasterとなっていましたが、これはpushしたいブランチのブランチ名によって変化します。
例えばadd-featureブランチをpushしたいとなったら、git push origin add-featureとなります。

ということで、git push origin masterというのは
「originという名前が付けられたURLに存在するリモートリポジトリのmasterブランチに
　ローカルリポジトリのmasterブランチの変更内容をpushする。」
とも言い換えることができます。

ちなみに一つのローカルリポジトリに対して、リモートリポジトリを複数関連付けることは可能です。
その場合はメイン以外のリモートリポジトリの名前はoriginとはせず、役割に対応した名前を付けることになります。originというのはあくまでもメインのリモートリポジトリのみに付ける名前というのが慣習です。

.gitignoreとは

Gitリポジトリ内に.gitignoreファイルを作成し、その中で、無視してほしいファイルや拡張子などを
指定することでリモートリポジトリにpushされないようにすることができます。


では実際に.gitignoreを活用してみましょう。
1. リポジトリ直下に.gitignoreファイルを作成します。

image.png

2. では例としてpersonal_info.txtファイルを作ってみます
　(実際には個人情報を載せないでくださいね！執筆者は責任を負いませんからね！)
image.pngimage.png
この状態でgit statusを使用し、personal_info.txtと.gitignore両方の追加が変更内容として表示されるのを確認してください。

$ git status
On branch master
Your branch is up to date with 'origin/master'.

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        .gitignore
        personal_info.txt

nothing added to commit but untracked files present (use "git add" to track)

personal_info.txtの変更が確認されてしまっています
このままadd --allしてpushしてしまうと、personal_info.txtがインターネット上にアップロードされてしまいます。

3. .gitignoreに、追跡しないでほしいファイル名personal_info.txtを記入しましょう
image.png
そうすると、
image.png
personal_info.txtの表示が暗くなっています。これでpersonal_info.txtがignoreされたことになります。
(これはVSCodeでの表示です。お使いの環境によっては変化する可能性があります。)
　VSCodeについてはこちらに説明があります。

git statusでも確認してみましょう

$ git status
On branch master
Your branch is up to date with 'origin/master'.

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        .gitignore  
                        ← さっきはあった「personal_info.txt」が消えている
nothing added to commit but untracked files present (use "git add" to track)

無事、変更が追跡されていないことが確認できます。

4. 練習も兼ねてpushしてみましょう

$ git add --all

$ git commit -m ".gitignoreを追加"
[master ec72b94] gitignoreを追加
 1 file changed, 1 insertion(+)
 create mode 100644 .gitignore
$ git push origin master
Enumerating objects: 4, done.
Counting objects: 100% (4/4), done.
Delta compression using up to 2 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 308 bytes | 154.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/ko50/testrepo.git
   55c6bad..ec72b94  master -> master

5. GitHubを確認してもpersonal_info.txtはアップロードされていないはずです
　これで個人情報をpushの魔の手から守ることができます
image.png

※ちなみに、個人情報を含むファイルを既にリモートリポジトリにpushしてしまった場合、
　後から.gitignoreに追記しても　commit履歴から見れてしまうので、その時はcommit自体を
　なかったことにする必要があります。(その場合の対処法は今回では扱いません。)

まとめ

  • GitHubは人権　使えないとGitを習得した意味がほとんどないまである
  • リモートリポジトリに個人情報は載せないようにする
  • ローカル(自分のパソコン)にリモートリポジトリの情報を登録するには二つの方法がある
    • git remote add origin URLで、remoteの情報にoriginという名前でURLを追加
    • git clone URLでリモートリポジトリをコピーしてくる
  • ローカルの変更内容はpushしないとリモートリポジトリには反映されない
    • git push リモートリポジトリ名 ブランチ名
    • メインのリモートリポジトリ名は特別な理由が無ければoriginにする
  • パスワードなどは.gitignoreを使用して追跡されないようにする
  • コードを外部に漏らしたくないときはリポジトリをprivateにして保護する

他パートへのリンク

次回

NITICNoobsによるGit/GitHub講座 第7回 ～fetch/pull～

第1回 インストール編
第2回 設定編
第3回 実際に使ってみよう-基本技能編
第4回 ブランチ(平行世界)編-1
第5回 ブランチ(平行世界)編-2
第6回 GitHub入門編
第7回 fetch/pull編
第8回 issue/Pull Request編

執筆者

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0