🐙

もてるGitHubの使い方(新卒研修資料)

に公開

Gitってなに?

「Git」という名前を聞くと、
プログラマーが黒い画面でカタカタ操作しているイメージを持つ人も多いのではないでしょうか??
確かにGitは多くのソフトウェア開発で使用されていて、Linuxの開発者が開発しているので多くの人が苦手意識をもつあの黒い画面で操作することが多いです。
(SourceTreeなどさまざまなGUIアプリがあるのでコマンドを叩かなくても使用できます)

https://www.shoeisha.co.jp/book/detail/9784798182445
こんな書籍があるぐらいなのでコマンドラインに苦手意識がある人はかなり多いのでしょう。。。

では、なぜGitがそこまでして使われているのか??
それができるようになれば何かいいことがあるのか??

多くの人が苦手意識を持つ黒い画面でスマートにコマンド入力して
かっこよくenter keyを押下して
ドキュメント管理をしていれば・・・・
間違いなくモテるでしょう!!!!(知らんけど😇)

※この記事はとる企業のEMと話していた時に、『最近事業部長(非エンジニア)と飲んでる時にGitの話になって5分ぐらいで解説したら、事業部長がGitの素晴らしさに感動してくれて・・・ 多分これから営業とかもGitでソース管理するようになるかも!!』
と話していたので確かに、エンジニア以外もGit使えたほうが幸せなのでは??
と思いこの記事を作成しました!!

ではまずGitとは??から順番に解説していきましょう!!

Git = タイムマシン??

①ドキュメント整理していた時に、「あれ、数日前の表現のほうがよかったかも」とか思ったことありませんか??
 ローカル管理のExcelとかテキストファイルやともう戻れませんよね??

②時空を旅するドキュメント

ファイル名 保存日
企画書1.docx 2025年1月23日
企画書2修正版.docx 2025年1月15日
企画書3最終版.docx 2025年1月22日
企画書3最終版(ほんとに最終).docx 2025年1月9日

どうですが・・・??
タイトルと保存日が合っていません・・・
この保存日は意図した保存日なのか??誰かがミス編集をしたのか??
犯人を探したところで、みなさんの記憶が正常に保管されていればいいのですが・・・😅
その変更を保存したタイミングに遡れるタイムマシンがあればいいですよね🤖

無限に巻き戻せるCtrl+Z

Gitをひとことで説明すると、ファイルを時間ごとにスナップショットで残しておける仕組み です。

•誰がいつ変更したかが残る
•どこが変更されたのかが一目でわかる
•過去の状態にすぐ戻せる

つまり、あなたのパソコンの中に「無限に巻き戻せるCtrl+Z」が入るようなものです!!

人間では気づけない無限の可能性

2025年はAIエージェント元年と呼ばれています。
さまざまなAIエージェントが登場してきて、カンファレンスに参加したらずっとAIの話でもちっきりです。
そんな時にGitです!!
多くの人はGitHub経由でGitを使用すると思うのですが、GitHubにはGitHub Copilotがあります。
なので、GitHubで管理しているドキュメントを指定してCopilot Chatに要約させたり、分析させたりすることも容易にできます。

必要な準備(5分でできる)

ではGitとGitHubの準備を爆速ですすめましょう!!

Gitのインストール

Gitのインストールは以下の動画を参照して実施してみてください
https://youtu.be/5qm9Zy4K134?si=E-6xMb4_z0IH-b_Y

ターミナル(Mac)またはコマンドプロンプト(Windows)で以下のコマンドを入力してバージョンが表示されればインストール完了です!!

※ターミナル(Mac)またはコマンドプロンプト(Windows)のことを以降はターミナルと呼びます

git --version

GitHubのアカウント作成

以下のリンクでGitHubのアカウント作成ができます!!
https://github.com/

登録方法がわからない場合は以下の動画を参考にトライしてみてください!!
https://youtu.be/wrbxbOuLHOU?si=zwatui2Rb-aYbvWs

初回設定

ターミナルで以下のコマンドを実行してください(※""内の内容はご自身の内容に置換してください)

git config --global user.name "GitHubのプロフィールに表示したい名前"
git config --global user.email "GitHubに登録済みのメールアドレス"

設定できたかを以下のコマンドで確認します。

git config -l

以下の内容が表示されていたらOKです!!(すでに何かしらの設定をしていたら他の情報も表示されます)

user.name=xxxxxx(GitHubのプロフィールに表示したい名前)
user.email=xxxxxxxx@gmail.com(GitHubに登録済みのメールアドレス)

ここまできたらもう勝ったようなもんです!!👍

まずはやってみよう

では、ブラウザでGitHubのログインページを開いてください
①画像のNewボタンを押下してください

もしなければ、右上の自身のアイコンを押下するとプルダウンメニューが出てきますのでそこでrepositoriesを選択してください。

②Repository nameとDescriptionを入力

Repository nameは共有する人全員に伝わる内容で記載をするのがベストです
ex)週次定例MTGの議事録を管理する場合:weeklyMtg
など
(システム的には日本語も入力できますが、URLからなんのブランチは判断できなくなったりするのでおすすめはしません)

Descriptionはそのまんまの説明です!!
なんのためのブランチなのか??などを記載します。
概要ぐらいのざっくりした内容を記載でOKです。

③Choose visibility(公開範囲の選択)
PublicかPrivateを選択できます
ここは何を扱うブランチなのかによって選択する内容が変わります。

設定 説明 利用例
公開 (Public) 誰でもアクセスできるリポジトリ オープンソース、ブログ記事用資料
非公開 (Private) 招待した人だけがアクセス可能 社内資料、プライベートなメモ

④Start with a templateとAdd .gitignoreとAdd license
ここはNo.◯◯となっているのを選択していればOKです。

⑤Add README
ここはONにしておきましょう!!
Descriptionは概要ぐらいであるのに対してREADMEはがっつり詳細を記載するファイルです。
エンジニアも初めて操作するリポジトリの場合はREADMEから読み始めるのが基本です。

実際のREADMEはこんな感じで色々と記載します。
下記リンクから実物を確認できます。(JavaScriptの学習ができる素晴らしいリポジトリです!!)
https://github.com/asciidwango/js-primer

⑥Create repository
①〜⑤まで対応したらCreate repositoryボタンを押下です!!

このような画面に遷移できれば成功です!!

クローンしてみる

上記画像にも表示されている緑色のボタンであるCodeを押下してみましょう!!

画像にあるコピーアイコンを押下して、下記のようなURLをコピーしましょう
(ユーザ名以降はユーザ名やリポジトリ名によって変動します)

https://github.com/あなたのユーザー名/weeklyMtg.git

クローンしたい場所に移動

ターミナルを開いてください
cdコマンドでローカル環境にフォルダを置きたい場所に移動します!!
cdコマンドってなに??って方は以下の動画を参照してください
https://youtu.be/87DN-g2ev8k?si=e7caxmTkaZqsOuRk
もしフォルダ管理をデスクトップでした場合は下記のようにコマンドを打てば移動できます!!

クローンする

この章で最初にGitHubのページでコピーしてきたリンクをやっと使います!!

git clone https://github.com/あなたのユーザー名/weeklyMtg.git
cd weeklyMtg

これでクローンしてきた環境に移動できたはずです!!

ターミナル上でこのような表示になっていればOKです。

ファインダーやエクスプローラーから指定した階層にクローンしたファイルがあるのではないでしょうか??
私の場合デスクトップにクローンさせたので、デスクトップ上に下記画像のフォルダがクローンされていました!!

追加をしてみる

先ほどクローンしたフォルダを開いてみてください。
恐らく"READMEファイル"と人によっては".gitファイル"があるのではないでしょうか??

"."から開始するファイル名は隠しファイルと呼ばれるファイルです。
隠しファイルについては割愛しますが、もし".gitファイル"が表示されていない人がいれば以下のリンクを参照して表示できるように設定しておきましょう。
Windowsはこちら↓
https://helpx.adobe.com/jp/x-productkb/global/show-hidden-files-folders-extensions.html
Macはこちら↓
https://tcd-theme.com/2022/12/mac-secret-file.html

それではこちらに新しいテキストファイルをドラッグ&ドロップで追加してみましょう!!
今回は下記内容のファイルを追加しました。
ファイル名:test01
内容   :最初のコミット用のファイルです。
      最初のコミット用のテキストです。
      最初のコミット用の文字列です。

この新しく追加したファイルをリモートリポジトリに反映させていきましょう!!

git add

①対象のファイルを選択してパスをコピーしてください
Windows:https://faq.nec-lavie.jp/fa/qa/web/knowledge19934.html
Mac :対象のファイルを選択して option + command + C

git add /Users/ユーザ名/Desktop/weeklyMtg/test01(ここがコピーしたパス)

このコマンドを動かしただけではターミナル上では特に変化はありません。

git commit -m

コミットメッセージを入力して以下のコマンドを実行します!!

git commit -m "ここにコミットメッセージを書きます"

git push

addしてcommitした内容をリモートブランチに反映させます!!

git push

git add~git pushまでの一連の流れを実行したターミナルは下記画像のようになっているはずです。

git push -u

こちらは補足程度に覚えておけばOKです。
ローカルでブランチを作成し、そのブランチをリモートブランチに反映させたい時に使うコマンドです!!

git push -u origin feature/"ブランチ名"

上記コマンドを実行すればローカルリポジトリの内容をリモートリポジトリにも新しいブランチを作成して反映されるはずです!!

リモートリポジトリの確認

それではブラウザでGitHubを確認してみましょう。
『クローンする』の項目で操作していた画面をリロードしてみてください!!
このように新しいファイルが追加されていることが確認できるはずです👍

コンフリクトを体験してみよう

codespaces


上記画像のCodeを押下してCodespacesを選択してください!!
そうすると以下のような画面になるはずです。
create codespaces on mainボタンを押下してください

そうすると・・・
ブラウザ上にVScodeが立ち上がります!!
ブラウザ上で簡単にファイルの修正などができます!!

そして、先ほどpushしたtest01のファイルの内容を以下画像のないように変更して、
codespaces上のターミナルで再度git add~pushまでの工程を実施します。

コミットメッセージは”CodeSpaces commit”にしました!!

GitHubに戻ってリロードすると・・・

ちゃんとCodespacesでのコミットが確認できました!!

同じファイルをローカルで修正

【コンフリクトを体験してみよう】でクローンしてきたファイルを修正します。
デフォルトのテキストアプリで開くのでOKです!!

それでは、ローカル環境でもテキストの修正をしていきましょう。
今回は以下の内容に修正しました。

2回目のコミット用のファイルです。
// 以下の一行は消してOKです
2回目のコミット用のテキストです。

// 以下は必ず残して
2回目のコミット用の文字列です。

それでは、ターミナルで再度git add~pushまでの工程を実施します。
・・・するとこんな感じのことをターミナルが言ってくるはずです!!

さあ!!黒い画面に赤い文字で"error"って言ってる・・・・!!
楽しくなってきましたね😊!!

読めなければ、翻訳すればいいだけです!!

Updates were rejected because the tip of your current branch is behind
→現在のブランチの先端が遅れているため更新が拒否されました

この直訳だけでも何が起きているのか想像できるのではないでしょうか??
状況を整理すると、以下の手順で操作しています。
①クローンしてローカルリポジトリを作成する
②codespacesでmainブランチを更新する
③ローカルリポジトリを更新してmainブランチにpushする

②の手順でtest01ファイルを更新したため、③のtest01ファイルの更新を取り込みたいが、
すでにmainブランチはコミットログが先に進んでいるため、その内容を取り込んでよ😡!!
って言ってるわけです!!

なので、次は・・・・

git pull

今回はmainブランチが先に進んでしまっているため以下のコマンドを実行します

git pull --rebase origin main

rebase??って思うかたもいると思うのですが、
めっちゃ重要な概念ですがあまり記事が長くなっても読みにくいと思うので今回は可読性を重視します・・・😭
以下に素晴らしい解説があるので余力がある方はぜひ一読ください!!
https://backlog.com/ja/git-tutorial/stepup/13/

そして、git pull --rebase origin mainを実行すると・・・

コンフリクトが発生しました!!
テキストファイルを確認してみましょう!!

↑こんな感じになっていればOKです!!
もしなっていない時は、以下のコマンドで現在の状況を確認してみましょう。

git status

それではこのテキストの内容を解説していきます・・・・!!
色々と追加されたように感じるかもしれませんが、見覚えのない内容には以下の意味があります。
そして、これらの内容を取り込んだ後には必ず削除してください。

<<<<<<< HEAD … リモート(origin/main)の変更
======= … ここでリモートとローカルの境界
>>>>>>> b6d7418 … あなたのローカルの変更

上記内容とコメントを踏まえて修正すると・・・

こんな感じになります。

ここまで修正が完了したら、git addをして

git rebase --continue

リベースを完了させます。
完了したら、やっとpushができます😭!!!
pushが完了したらGitHubを確認です!!

ブランチを共有してみよう!!

ここまでは個人でブランチを操作してきましたが、やはりGitHubのすごいところはチームメンバーとの共同作業ができる点です!!

ここではブランチを指定のチームメンバーに共有する方法を学びます!!
GitHubに移動してヘッダー部にあるSettingsを押下してください。

① Collaborators を押下
② Add people を押下

③ 共有したい人のメールアドレスを入力してAdd to repositoryを押下

そこまで完了すると・・・

これで指定したチームメンバーにリポジトリが共有できるようになってます!!

最後に

ここまで読んでいただきありがとうございます。
この記事の内容は、私が新卒の内定者研修を担当することになり
Gitってどうやって学習してもらうのがいいのか・・・??
と考えて作成しました。

まだまだターミナル操作に馴染みがない受講生に、モテそうなことない??と話してみたり・・・
他の有名企業ではエンジニア以外でも導入を検討しているらしいよ??
と話してみたりしたのでその内容も盛り込んでみました。

そして、Git操作に注力してもらいたかったのであえてテキストのみでGit操作してもらって可能な限りノイズを減らしたつもりです。

少しでも多くの人にGitを触ってみるきっかけになれば幸いです。

もっとGitについて詳しく知りたくなったかたは以下のURLを参考に学習を継続してもらえますよりGitが好きになるはずです!!

サル先生のGit入門
https://backlog.com/ja/git-tutorial/

Microsoft Learn
https://learn.microsoft.com/ja-jp/training/paths/github-foundations/

Git操作チート表

操作 コマンド例 説明
バージョン確認 git --version Git が入っているか確認
状況確認 git status いまの変更状況を確認
リポジトリをコピー git clone https://github.com/user/repo.git GitHub上のリポジトリを自分のPCにコピー
ファイル追加 git add ファイル名 ファイルを「保存候補」に登録
全部追加 git add . 変更したファイルをまとめて登録
保存(コミット) git commit -m "メッセージ" いまの状態を記録(メッセージは自由)
アップロード(初回) git push -u origin main GitHubにアップロード(初回はこれ)
アップロード(2回目以降) git push 変更をGitHubに反映
更新を取り込む git pull GitHubの最新を自分のPCに反映

Discussion