shiisuke’s blog

文系卒。社会人5年目くらい。ITやプログラミングの勉強で学んだことを書きます。

湊川あい氏【初心者向け】「たのしいGit入門講座」参加レポート

Ⅰ.きっかけ

以前、Webアプリケーションを公開するためにHerokuを使おうとしたのですが、その前提として必要となるGitが分からず挫折してしまいました。。。

そんな中、"わかばちゃんと学ぶ"シリーズで有名な湊川あい(@llminatoll)さんによるGitの使い方講座がサポーターズCoLabで開催されると知り、Gitの勉強の入口になればと思い参加してきました。

結論から言うと、湊川さんの説明はとても分かりやすくて、Gitへの理解がグッと進みました!以下では復習もかねて講座の内容をまとめました。

f:id:shiisuke1229:20191222191644j:plain:w400
わかばちゃんと学ぶ Git使い方入門』の本を買って予習していきました👍

<目次>

Ⅱ.今回使った環境

Ⅲ.講座の内容

1.基礎知識

Gitとは?

  • ファイルを編集して「修正しない方が良かった…」「前の方が良かった…」と思ったときに、ファイルの状態を過去の時点に戻せるタイムマシン。
  • “ある時点” から ”ある時点” までに何が変わったのか(差分)が分かる。
  • 仕事ではみんなGitを通じてプログラムを送ってくるので、社会人になったら必須。

Gitのメリット(ない場合vsある場合)

Gitがない場合 Gitがある場合
ファイルのバージョンが複数あって、どれを使えば良いのか分からない。
例)〇〇_完成版
  〇〇_修正版
  〇〇_田中レビュー済み
ファイルが1つで良いのでスッキリする。
例)〇〇
思いついた時にバックアップを作成して、戻そうと思った時には結構前のバージョンだったりする。 バックアップを都度作成して、好きな時点に状態を戻せる。
同じファイルを数人で別々に編集し、それを1つにまとめる場合、みんなに修正点を聞いて回って差分を手動でコピペしないといけない。 編集された箇所が一目瞭然、楽チン&ミスなしでまとめられる。

GitHubとは?

  • 同じファイルを3~4人で共同編集する場合、リポジトリ※のコピーを各人が持つことになる。
  • 誰かが自分のリポジトリで追加・修正したときに、GitHubを更新し、他のメンバーがそれをコピーすることで変更の差分を埋めることができる。

リポジトリとは、過去のファイルやディレクトリの状態を圧縮して記録する貯蔵庫のこと。必要になったら過去の状態をはき出してくれる。

GitHubのメリット

  • データ置き場としてだけでなく、コミュニケーションの場としても機能する。
  • 例)掲示板みたいに議論する、「こっちの方がいいんじゃない?」とレビューする

2.Gitを使ってみる~料理レシピを管理~

(1)リポジトリを作る

  • SourceTreeで「ファイル > 新規/クローンを作成する」を選択し、「Create」をクリックする。
  • 「保存先のパス」で任意の場所(「PC > ドキュメント」など)を指定し、パスの最後に任意のフォルダ名(「sample」など)を追加して「作成」をクリックする。(※フォルダを先に作ってそのフォルダを指定する、という方法でも可。)
  • 「クローン作製先のパス〇〇は既に存在しています」というメッセージは「はい」を選択する。
  • 指定した場所にフォルダができて、フォルダ内に「.git」というファイル(リポジトリ)があることを確認する。

f:id:shiisuke1229:20191222194016p:plain:w450
.gitファイルは「隠しファイル」にチェックを入れると表示されます。

(2)フォルダにテキストファイルを置く

  • メモ帳を開いて下記1を入力し、先ほど作成したフォルダに「okonomiyaki」という名前で保存する。
1.お好み焼き粉・水・卵を入れる

(3)リポジトリに変更を反映する

  • SourceTreeの「WORKSPACE > ファイルステータス > 作業ツリーのファイル」のリストに表示される「okonomiyaki.text」を選択して、「選択をインデックスに追加」をクリックする。【ステージ】
  • 「Indexにステージしたファイル」のリストに表示された「okonomiyaki.text」を選択し、変更に関するコメント「お好み焼きのタネを追加」を一番下のテキストボックスに記載して、「コミット」をクリックする。【コミット】
  • 「WORKSPACE > History」で先ほどのコメントが記録されていることを確認する。

f:id:shiisuke1229:20191222194651p:plain

※ファイルを一旦ステージに移すのは、コミットするファイルをステージ上で選別して、要らないファイルをコミットしないようにするため。

(4)ファイルを編集する

  • 「okonomiyaki.text」を開き、下記2を記述して保存した後、SourceTreeの「WORKSPACE > ファイルステータス」でステージ→コミットを行う。コミット時のコメントは「具材を追加」とする。
2.キャベツを入れる
  • 「okonomiyaki.text」に下記3を記述して保存した後、ステージ→コミットを行う。コミット時のコメントは「隠し味を追加」とする。
3.コーラを入れる
  • 「WORKSPACE > History」で、すべての変更が記録されていることを確認する。

f:id:shiisuke1229:20191222195533p:plain

(5)ファイルの状態を過去に戻す

  • 「WORKSPACE > History」で、戻りたい地点のコメント(今回は「具材を追加」)をダブルクリックし、「作業コピー切り替えの確認」ダイアログで「OK」を選択する。【チェックアウト】
  • コメント「具材を追加」の隣に「HEAD」という文字が付き、「okonomiyaki.text」を開くと状態が戻っていることを確認する。

f:id:shiisuke1229:20191222200840p:plain

f:id:shiisuke1229:20191222200856p:plain:w350
「3」の記載が消え、「2」を編集した時点に状態が戻りました。

3.GitHubを使ってみる~真央ゼミWebサイトのソースコードを共同管理~

(1)湊川さんのリポジトリをWeb上から取得する

f:id:shiisuke1229:20191222201408p:plain

f:id:shiisuke1229:20191222201419p:plain

  • 「Clone or download」をクリックし、表示されるURLをコピーする。

f:id:shiisuke1229:20191222201434p:plain

  • SourceTreeの「ファイル > 新規/クローンを作成する」をクリックし(または新しいタブを開き)、「Clone」を選択する。
  • 一番上のテキストボックスに先ほどコピーしたURLを貼り付ける。
  • テキストボックスの外をクリックすると他の情報が自動で入力されるので、その状態で「クローン」をクリックする。
f:id:shiisuke1229:20191222202132p:plain:w350

History」にコミットログが表示され、「ドキュメント > PC > my-seminar」にフォルダがコピーされていることを確認する。

f:id:shiisuke1229:20191222202738p:plain
複数人で編集すると、樹形図の表示がカラフルになります。湊川さんはこれを見ると”Gitだー”という感じがするそうです(^^)

f:id:shiisuke1229:20191222203452p:plain:w450
「my-seminar」のフォルダ内

f:id:shiisuke1229:20191222203329p:plain:w450
「index.html」をブラウザで開くとこんな感じです。

(2)ファイルを編集する

  • 「PC >ドキュメント > my-seminar」にある「index.html」をVisual Studio Codeで開く。
  • 「NEWS」一覧に好きな行事を追加して保存する。(今回は「2019/12/22 有馬記念」を追加)

f:id:shiisuke1229:20191222203751p:plain

  • SourceTreeの「WORKSPACE > ファイルステータス」でステージ→コミットを行う。

※本当は新規ブランチを作成して、そこで編集するのが良いらしいのですが、私は新規ブランチでのプッシュ時にエラーが出たためmasterブランチで作業を進めました。

※ブランチについて知りたい方は、『わかばちゃんと学ぶ Git使い方入門』のp107以降をご参照ください。

(3)編集したファイルをWeb上にアップロードする

  • SourceTreeのメニューで「プッシュ」を選択し、プッシュしたいブランチ(今回は「master」)にチェックを入れて、「プッシュ」をクリックする。【プッシュ】

f:id:shiisuke1229:20191222203809p:plain

  • 自分のGitHubページを開き、変更が反映されていることを確認する。

f:id:shiisuke1229:20191222203822p:plain

(4)自分の変更を湊川さんのリポジトリに反映してもらう

  • 自分のGitHubページで「Pull requests > New pull request」を選択する。

f:id:shiisuke1229:20191222204143p:plain

  • 湊川さん(llminatoll)のGitHubページに遷移するので、そこで「Create pull request」をクリックする。

f:id:shiisuke1229:20191222204242p:plain

  • 変更内容のタイトルとコメントを記入して、「Create pull repuest」をクリックする。【プルリクエスト】

f:id:shiisuke1229:20191222204253p:plain

  • リクエストが承認されると、湊川さん(llminatoll)のGitHubページに変更が反映される。【マージ】

f:id:shiisuke1229:20191222204421p:plain

f:id:shiisuke1229:20191222204503p:plain
GitHubの機能を使って公開されているWebページでも変更が反映されています。

f:id:shiisuke1229:20191222204611p:plain
GitHubの「Pull request」ページでチャットのようなやりとりができるのも良いですね!(ちなみに私は競馬はあんまり見ないです(^_^;) )

4.コマンドでGitを使ってみる

  • 講座ではコマンドを使ったリポジトリの作成もしましたが、ブログの分量が長くなったので記載を省略します。
  • なお、WindowsでGitコマンドを使うにはパスを通す必要があり、SourceTreeと一緒にインストールした場合の「git.exe」の場所は以下です。「C:\Program Files (x86)」ではないのでご注意ください。(参考
C:\Users\username\AppData\Local\Atlassian\SourceTree\git_local\bin\git.exe

Ⅳ.感想

  • 私が以前Gitについて調べた時は、Webサイトを20個近く読んでも「"プッシュ"と"プルリクエスト"と"マージ"が大事らしい…」くらいしか分からなかったのですが、今回の講座を通してGitへの理解度が格段に上がりました!
  • また、湊川さんの説明はとにかく分かりやすくて、自分でやっても上手くできたので、「Gitの勉強って楽しいなー!」と心から思えました(^▽^)
  • これからはGitのコマンド操作も学んで、元々使いたかったHerokuにもチャレンジしていきたいです。