はじめてのGit・GitHub

GitHub Desktopを利用

1 / 15
はじめに

Gitは手元で記録し、GitHubはその記録を共有する。

Git｜ローカル

ローカル：手元のPCのこと

  • ファイルの変更を記録する道具
  • インターネットにつながっていなくても記録できる
  • 記録（履歴）は、手元のPCの中に残る
  • 変更の区切りごとに記録する

GitHub｜リモート

リモート：ネット上の共有先のこと

  • ファイルと履歴を置いて共有するWebサービス
  • 他のPCや、一緒に作る人と共有できる
  • 送った記録が、ネット上にも残る
  • 必要なときに送って共有する

2つは別のもので、手元で記録しただけではGitHubに届きません。

GitHub Desktopは、この2つをボタンで操作するPCアプリ

2 / 15
01 手元で作る

GitHub Desktopで、リポジトリを新しく作る。

GitHub Desktop 3.x・macOS／Windows共通

GitHub Desktop

GitHub DesktopのCurrent Repositoryの一覧。Filterの右のAddを開くと、Clone Repository…、Create New Repository…、Add Existing Repository…の3つが並び、Create New Repository…を選んでいる
  1. Current Repositoryの一覧で、Add ▾を開く
  2. Create New Repository…を選ぶ
Create New Repository…

設定画面が開く

新しいリポジトリの名前と保存先を決める。 まだGitHubへは送らない。

社内のお知らせアプリを作るために、まず手元のPCにリポジトリを用意します。

リポジトリが1つも無い初回は、Let's get started!の画面から作る

3 / 15
01 手元で作る

名前を付けて、保存する場所を選ぶ。

Name（名前）

myproject 任意のプロジェクト名でOK。

Local Path（保存先）

Choose…で、好きな親フォルダを選ぶ。

READMEを作る

Initialize this repository with a READMEをオンにする。 最後にCreate Repositoryを押す。

同期されるフォルダは選ばない

OneDrive・iCloud Drive・Dropboxなどを避け、同期されない場所を選びます。

Local Pathは親フォルダで、その中にmyprojectフォルダが作られます。

4 / 15
01 手元で作る

README付きで作ると、最初の記録は自動でできる。

Create Repositoryを押した直後の状態

作成されたフォルダ

主な項目を表示

この図をテキストで読む

フォルダ構成。フォルダ 2・ファイル 1。 myproject/ ├─ README.md …… 説明書 └─ .git/ …… 履歴と設定の場所

自動commit

.git の中

同じPC内・履歴のイメージ

1　Initial commit

READMEを含む最初の記録 GitHub Desktopが自動で作成

commit（コミット）は、その時点の内容を履歴に残すことです。

最初の記録まで自動なので、ここで操作は要りません。

.gitは通常は見えない。削除すると履歴も消える

5 / 15
02 共有する

Publishで、手元の記録をGitHubへ送る。

手元のPC

commitしたREADMEと履歴

この図をテキストで読む

フォルダ構成。フォルダ 2・ファイル 1。 myproject/ ├─ README.md …… 説明書 └─ .git/ …… Gitの管理情報

Publish repositoryを選ぶ Keep this code private（非公開）のまま実行

Publish

GitHub

送り先の名前：origin

この図をテキストで読む

フォルダ構成。フォルダ 1・ファイル 1。 myproject/ └─ README.md …… 説明書

例：github.com/your-name/myproject

あとはGitHub Desktopにおまかせで、ファイルと履歴がGitHubにも置かれます。

ファイルと履歴の共有で、アプリの公開とは別の操作

6 / 15
03 修正を送る

最初の修正として、mypage.htmlを追加する。

変更前

READMEから始めたフォルダ

この図をテキストで読む

フォルダ構成。フォルダ 2・ファイル 1。 myproject/ ├─ README.md …… 説明書 └─ .git/ …… Gitの管理情報

追加

変更後

「お知らせ」と表示するmypage.htmlを作って保存

この図をテキストで読む

フォルダ構成。フォルダ 2・ファイル 2。 myproject/ ├─ README.md …… 説明書 ├─ mypage.html［追加］ └─ .git/ …… Gitの管理情報

ファイルを1つ足すことも、Gitが記録する「変更」のひとつです。

READMEは消さずに残したまま

7 / 15
03 修正を送る

次のcommitも、同じ.gitに記録する。

編集するファイル

Summaryの「mypage.htmlを追加」が記録の名前になる

この図をテキストで読む

フォルダ構成。フォルダ 2・ファイル 2。 myproject/ ├─ README.md …… 説明書 ├─ mypage.html …… 画面 └─ .git/［記録先］

Changesでmypage.htmlにチェック

commit

.git の中

同じPC内・履歴のイメージ

2　mypage.htmlを追加

新しい記録が加わる 1　Initial commit（以前の記録）

commitすると、.gitに2つ目の記録が残り、最初の記録もそのまま残ります。

押すボタンは「Commit 1 file to main」（選んだ数が付く）

8 / 15
03 修正を送る

Push originで、最初の修正を送る。

手元のPC

2つ目のcommitまで記録済み

この図をテキストで読む

フォルダ構成。フォルダ 2・ファイル 2。 myproject/ ├─ README.md …… 説明書 ├─ mypage.html …… 画面 └─ .git/ …… Gitの管理情報

Push origin

GitHub

送り先origin・送信後の状態

この図をテキストで読む

フォルダ構成。フォルダ 1・ファイル 2。 myproject/ ├─ README.md …… 説明書 └─ mypage.html …… 画面

Push originは「originへ送る」ボタンで、押すと2つ目の記録もGitHubに届きます。

共有先はもうあるので、Publishは不要

9 / 15
04 確かめる

GitHubで、2つの記録を確認する。

手元のPC

Gitが履歴などを保管する

この図をテキストで読む

フォルダ構成。フォルダ 2・ファイル 2。 myproject/ ├─ README.md …… 説明書 ├─ mypage.html …… 画面 └─ .git/［履歴・設定］

GitHub

共有した履歴をブラウザで開く

変更履歴（Commits）

2　mypage.htmlを追加 1　Initial commit

表示例：新しい記録が上に並ぶ

履歴は手元とGitHubの両方に残り、Commitsでは誰が・いつ・何を変えたかまで見られます。

GitHubのファイル一覧には.gitが出ないため、履歴はCommitsで確認

10 / 15
まとめ

これからも、編集・記録・送信の順で進める。

  1. 編集する

    エディタでファイルを直し、保存する。保存だけでは、まだ記録にならない。

  2. commitする

    GitHub DesktopのChangesで選び、Summaryを書いてcommitする。手元の.gitに記録が残る。

  3. pushする

    Push originを押す。GitHubにも同じ記録が届く。次の変更も1から繰り返す。

接続後も、自動同期ではありません。変更したら、commitしてpushします。

11 / 15
付録

用語集｜登場するもの

Git（ギット）

手元のPCで、ファイルの変更履歴を記録・管理する道具。

GitHub（ギットハブ）

ファイルと履歴を置いて共有できるWebサービス。

GitHub Desktop

GitやGitHubの操作を、ボタンで行うPCアプリ。

リポジトリ

ファイルと変更履歴を管理するまとまり。この例ではmyproject。

12 / 15
付録

用語集｜記録する操作

init（イニット）

Gitの管理を始める処理。GitHub Desktopで新規作成すると自動で行われる。

add（アド）

次のcommitに入れる内容を選ぶこと。GitHub DesktopではChangesのチェックで選ぶ。

commit（コミット）

選んだ内容を、説明付きの履歴として手元に確定する。

.git（ドットギット）

Gitが履歴や設定を保存する場所。myprojectの中にある、普段は見えない隠しフォルダ。

この手順では作成時のinitと最初のcommitは自動です。以後の変更はChangesで選び、commitします。

13 / 15
付録

用語集｜共有する操作

Publish repository

GitHub Desktopで初めて共有するときの操作。準備から送信までまとめて任せられる。

push（プッシュ）

手元でcommitした記録を共有先へ送る。commitだけでは送られない。

origin（オリジン）

送り先に付ける名前。この資料ではGitHubの共有先を指す。

URL（ユーアールエル）

共有先などの住所。originは名前、URLは実際の接続先。

14 / 15
付録

用語集｜ファイルと画面の言葉

README.md（リードミー）

何を作るか、どう使うかなどを書く説明書。

mypage.html

Webページの内容を書くファイル。この例では「お知らせ」の画面。

Commits（コミッツ）

commitが並ぶ履歴の一覧。記録を開くと変更内容を確認できる。

Private（プライベート）

非公開の設定。リポジトリは、閲覧権限のある人だけが見られる。

15 / 15