[GitHub勉強会資料 CLI版]How To Use GitHub In CLI

[初めに]
プログラマーなら誰しも使うアプリGit・Githubを簡単に一時間程度で学ぶことができるHowToものを作成しました。
ぜひこのスライド用いてGitの基本の機能を使って、学んでもらえると嬉しいです。

[ターゲット]
・GitやGithubを知らないプログラマ初学者。
・ターミナル操作はある程度慣れていると良いが、特にその技能がなくても使えるように作成しました。
・Gitを使う流れやなぜ使うかを知りたいかた。

[内容]
1. バージョン管理ツールとはなにか？
2. Gitのインストール
3. GitHubアカウントを作成しよう
4. Gitの初期設定を行う
5. VSCodeの初期設定
6. Gitの基本的な流れ
7. 実際にcommitまでやってみる
8. ファイルの変更を行ってみる
9. ブランチを切ってみる
10. チェックアウトをしてみる
11. プルリクをしてみる

Transcript

1. “ How To Use GitHub In CLI 同人誌として配布する用 はるちろ＠harutiro Luciano研究室
2. これはスライドではなく本？ 本（ほん）は、書籍（しょせき）または書物（しょもつ）とも呼ばれ、紙・木・竹・絹布 などの軟質な素材に、文字・記号・図画などを筆写、印刷し、糸・糊などで装丁・製本し たもの。 内容（コンテンツ）的にはほぼ従来の書籍のようなものでも、紙などに文字を書いたり印 刷するのではなく、電磁的または光学的に記録・再生されるものやネットワークで流通さ せるものは、電子書籍という。 引用元: Wikipedia https://ja.wikipedia.org/wiki/%E6%9C%AC 文字・記号・図画などで情報が まとまっていれば良いと判断 2
3. なんでこんな形式に？ • 筆者がたくさんの文字を使うのが苦手 • 図形と組み合わせると理解しやすい • スライド制作は慣れている スライドで作ればいいのでは？？？ 3
4. とりあえずやってみよう 本の界隈からは、こんな形式の本ありえない。16:9の本なんておかしいと思われるかもしれませ んが、同人誌という中では、このような特出したものがあってもいいのかなと思い作成しまし た。 図が多く文字が少ないこの形式で一度やってみて、どのような感触になるのか試してみたという のもあります。 また、今まで、サークルや研究室、LT会などで様々なスライドを作成してきました。 その中には、人に共有して有益な情報を与えれるようなものも何個か 作成できました。 ですが、Speaker DeckやX(旧Twitter)などで共有をしても自分の拡散力では 色々な人に知ってもらえないと考えました。 そこで、直接同人誌即売会に持っていけば、感想などももらえながら 見てもらえると感じました。 ぜひ、一度みなさんのご感想を 聞けたらと思っています 4
5. このスライドの見方(CLI) 5 $ brew -v > Homebrew 3.5.4 $が書いてある場合は入力して欲しいコマンドです > が書いてある場合は出力される結果です $ git config .-global user.name "ユーザー名" “〜〜〜”と書いてある時は〜〜〜だけ入力してください
6. このスライドの見方 6 右上に、Appleマークか、Windowsのマークがあると思います • AppleマークはMacユーザー対象 • WindowsマークはWindowsユーザー対象 インストールや、環境構築で多少変化すると思います うまく読み飛ばしてもらえると助かります
7. お品書き 1. バージョン管理ツールとはなにか？ 2. Gitのインストール 3. GitHubアカウントを作成しよう 4. Gitの初期設定を行う 5. Gitの基本的な流れ 6. 実際にcommitまでやってみる 7. ファイルの変更を行ってみる 8. ブランチを切ってみる 9. チェックアウトをしてみる 10. プルリクをしてみる 7
8. Chap.1 バージョン管理ツール とは何か？ 8
9. Git とは何か？ • バージョン管理システムの1つ ◦ ファイルの変更履歴を管理してくれる ◦ チーム開発のコード管理をしてくれる 9
10. Git どういうときに使うのか • データを戻したいとき • データを混ぜ合わせるとき • コードのバックアップをとるとき 10
11. 例1: データをバックアップから戻したい時 11 課題などで、途中まで出来て一応バックアップを取りたい時、 とりあえず、フォルダごとコピーを取る 「欠点」 ・どれが最新かわからないときも ・戻す時に、コピペで戻すため 事故るときがある （バックアップを消すなど）
12. 例1: データをバックアップから戻したい時 12 Gitを用いると、ブランチを分けて簡単に戻せる 「利点」 ・グラフで簡単に最新のコードが 何かわかる ・ブランチを変えることでコードを 戻すこともできる ・GitHubに上げることで、リモート でバックアップもできる
13. 例2: データを混ぜる時 13 みんなで開発をしている時に、コードを一つにまとめたい時がある。 その時に、どこが変わっているのか差分を自分で見て直す必要がある。 「欠点」 ・どこが変更されたか手動でみる ・どのファイルがマージ対象か 自分で見極めないといけない ・複数ファイルあると地獄をみる 乱数のコード 出力のコード
14. 例2: データを混ぜる時 14 Gitを用いると、コマンド一つでまとめたり、 差分を簡単に表示をしてくれる 「利点」 ・グラフで簡単にどのような 混ざり方をしているか見れる ・マージを間違えた時に簡単に 戻せる ・差分を表示したり、混ぜたりする ツールが揃っている グラフでの表示 マージの差分
15. 例3: チームで共同開発をするとき 15 変更点だったり、コードの状態をクラウドストレージで管理をする 「欠点」 ・ファイルが乱立してどれかわからん ・プロジェクト全体でコードを最新に 保てない ・勝手にコードを混ぜられる危険がある 最新のコードを探せ！
16. 例3: チームで共同開発をするとき 16 Git・GitHubを用いると、コードの管理を Web上でまとめることができる 「利点」 ・Git Cloneでプロジェクトを簡単 に持ってこれる ・Git pullで簡単に最新にできる ・GitHubの便利なWebツールで コードを管理できる GitHubを用いて マージを管理
17. [コラム] チーム開発をする時に大事なこと 17 • 些細な問題でも、違和感を感じたら、すぐに連絡をする ◦ コミュニケーションが大事 • マージをする時は、勝手にマージをしない ◦ プロジェクト全体で連絡をする • こまめにバックアップ、コミット、プルリクを出す ◦ 大きすぎる変更点は事故の元 ◦ ビックバン変更点は出さないように
18. Chap.2 Gitのインストール 18
19. ターミナルを起動しよう（Mac） ⌘Command Space ＋ ターミナルと入力 Enterを押す 19
20. コマンドプロンプトを起動させよう （Windows） Windowsキー R ＋ cmdと入力 OKを押す 20
21. コマンドプロンプトを起動させよう （Windows） コマンドプロンプトが 立ち上がるはずです。 21
22. Gitが入っているか確認してみよう $ git version > git version 2.33.0.windows.2　＜ー　人によってかわってる Git のバージョンが帰ってこない場合、イ ンストールが出来ていません。 インストールから始めましょう！！ 22
23. Gitをインストールしてみる（Mac） $ brew install git $ git -v > git version 2.37.0 バージョンが帰ってきたらインストール 完了です。 23
24. Topic！　Brewが入っていない方へ。 $ /bin/bash -c "$(curl -fsSL https:./raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" $ echo 'eval $(/opt/homebrew/bin/brew shellenv)' .> ~/.zprofile $ eval $(/opt/homebrew/bin/brew shellenv) $ brew -v > Homebrew 3.5.4 > Homebrew/homebrew-core (git revision 7d69acd3065; last commit 2022-07-13) > Homebrew/homebrew-cask (git revision ce084d024b; last commit 2022-07-13) Brewが入っていない方は上の3行を貼り付けてみましょう！！ 24
25. インストール手順　（Windows） 以下URL参照 https://prog-8.com/docs/git-env-win チャプター1　[Gitのインストール]まで行う 時間があるときにまた書きます 今はこれで許して(人д｀o) 25
26. Chap.3 GitHubアカウントを 作成しよう 26
27. GItHubとは？ GitHub上にコードをあげてネットに公開したり、 チーム開発でコードを集結させるのに用いる 27
28. GItHubとGitの違いは？ 28 Gitは「プロジェクトやソースコードのバージョン管理を行うツール」 過去に書いたコードの内容を復元したり、複数人での同時作業を効率的に進められる。 一方で、GitHubはGitを利用した開発者向けのウェブサービス GitHubには開発者にとって便利な機能が多く提供されている。 Gitを使った他のウェブサービスも存在しますが、世界的に最も広く使われているのはGitHubである。 バージョン管理をする システムの名前 オンラインでソースコードを 保存してくれるサービスの名前 GitHub Git
29. プログラミングを行うに当たって便利なもので す アカウントを持っていない方は 作っていきましょう 29
30. GItHubアカウントを作成する。 https://github.com　にアクセスする 30
31. GItHubアカウントを作成する。 サインアップを押そう 31
32. GItHubアカウントを作成する。 メールアドレスを入力する 大学のメールにすると自動でPro版になります 32
33. GItHubアカウントを作成する。 パスワード 大文字、小文字、数字、記号を入れる メールアドレス 大学のメールにすると自動で Pro版になります ユーザー名 後で使うので控えておいてください キャンペーンメールの許可 基本はnで大丈夫 33
34. GItHubアカウントを作成する。 認証をクリアして、 人間だと証明しましょう 34
35. GItHubアカウントを作成する。 最後にクリエイトアカウントで アカウント作成する 35
36. GItHubアカウントを作成する。 メールアドレスに届いたコードを入力する 36
37. GItHubアカウントを作成する。 三つのアンケートに答えましょう チーム開発はどれくらい の人数で行うのか？ 学生か先生か？ 37
38. GItHubアカウントを作成する。 三つのアンケートに答えましょう GitHubで気になるサービスを 選択しましょう。 よくわからない方は、画面のチェックに 合わせてもらえれば大丈夫です。 38
39. GItHubアカウントを作成する。 三つのアンケートに答えましょう プランを選択します。 Freeプランを選択しましょう 39
40. GItHubアカウントを作成する。 アカウントを作成することができました！！ 40
41. Chap.4 Gitの初期設定を行う 41
42. ローカルとリモートについて 42 リモート ローカル 作業環境にはそれぞれ名前がついていて、自分のPCの環境には「ローカル」 GitHubなどのウェブ上の作業環境には 「リモート」と呼ばれる GitHub Git
43. ローカルとリモートの紐付けする設定 43 リモート ローカル • SSHキー • ユーザー名 • メールアドレス ローカル側とリモート側を紐づけるためにSSHキー、 ユーザー名、メールアドレスを用いる この内容を用いて、ソースコードに自分が書いた 情報を付け加える GitHub Git
44. コマンドコンソールを開く（Windows） インストールした時に 一緒にダウンロードされた GitBashを開く 44
45. コマンドコンソールを開く（Windows） こういったものが開かれたはずです。 45
46. ターミナルを起動しよう（Mac） ⌘Command Space ＋ ターミナルと入力 Enterを押す 46
47. ユーザー名とアドレスを登録する $ git config .-global user.name "ユーザー名" $ git config .-global user.email "メールアドレス" $ git config user.name > “ユーザー名” $ git config user.email > “メールアドレス” 47 ※ユーザー名はGitHubで登録したユーザー名を使用してください
48. SSHを用いてログインをする理由 2021年8月13日まではユーザー名とパスワードを用いてログインを行っていました。 しかし、ユーザー名とパスワードでは、漏れてしまった時に乗っ取られる危険があっ たため、よりセキュアである、公開鍵認証を用いた。 48 ユーザー名 パスワード ＋ 公開鍵
49. SSHを用いるメリット • 認証に必要な秘密情報そのものはネットワーク上に送出されない • 認証に使われる署名は一時的なもので再利用はできない • 秘密鍵を推測して偽造することは非常に困難 • パスフレーズを設定して鍵そのものをロックすることができる 49 引用元：https://qiita.com/toshio_nakayama/items/719559ab94cc86541176 なんかめっちゃ強い
50. SSHキーを作成する ./ ホームディレクトリに移動するため $ cd $ ls -al | grep .ssh > -rw------- 1 k22120kk staff 20 7 13 18:48 .lesshst > drwx------ 18 k22120kk staff 576 7 12 03:34 .ssh ./.sshが表示されない時は mkdirで作成しましょう $ mkdir .ssh $ cd .ssh 50
51. SSHキーを作成する $ ssh-keygen -t ed25519 引用元：（【Windows】Gitの環境構築をしよう！） https://prog-8.com/docs/git-env-win ⏎ Enter ⏎ Enter ⏎ Enter ファイル名の指定 今回はデフォルトなので そのままエンター パスワードの設定 今回はそのままエンター パスワードの確認 今回はそのままエンター 51
52. SSHキーを作成する $ ls ~/.ssh > id_ed25519 id_ed25519.pub SSHキーが作成できたかどうか 確認しましょう 52
53. SSHキーを作成する $ cat ~/.ssh/id_ed25519.pub > ssh-ed25519 AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA SSHキーの公開鍵が表示されるので、 出力された内容を全てコピーをします。 53
54. SSHキーをGitHubに登録する https://github.comにアクセスする 54
55. SSHキーをGit Hubに登録する アイコンをクリックして、 Settingsを押す 55
56. SSHキーをGit Hubに登録する SSH and GPG keysを押す 56
57. SSHキーをGit Hubに登録する New SSH key を押す 57
58. SSHキーをGit Hubに登録する わかりやすい名前をつける コピーしたキーを 貼り付ける Mac:Command + V Win:ctrl + V Add SSH keyを押す 58 Key type は　 Authentication Key
59. SSHキーをGit Hubに登録する 登録した名前が表示されれば成功です 59
60. SSH接続を確認する $ ssh -T git@github.com > This key is not known by any other names Are you sure you want to continue connecting (yes/no/ [fingerprint])? yes Hi <ユーザー名> ! You’ve successfully authenticated, but GithHub does not provide shell access. 実行して、yesかnoかを聞かれたら、yesと答えましょう。 Hi の後にユーザー名が出力されれば成功です。 60
61. Chap.5 Gitの基本的な流れ 61
62. Gitの大きな流れ • Add コミットするファイルを追加する • Commit 追加・変更点をGitに追加する • Push リモート(ネット)に打ち上げる • Pull リモート(ネット)から変更点をもらう 62 引用元：（Progate-Git） https://prog-8.com/slides?displayed_id=2642&lesson=66
63. 前提条件 63 ローカル側に、HTML,CSS,JS ファイルがあり、 Gitで管理を行うとする
64. Gitの状態とは？ 64 ワークツリー ステージ リポジトリ ローカルの環境は3つのエリアに分かれている 変更履歴の記録 履歴を新しく保存する 一覧を用意する場所 作業をする場所
65. Gitの状態とは？ 65 ワークツリー ステージ リポジトリ ローカルの環境は3つのエリアに分かれている 変更履歴の記録 履歴を新しく保存する 一覧を用意する場所 作業をする場所 ファイルの編集 コーディング 追加 git add コミット git commit
66. ファイルの編集をしているとき 66 ワークツリー ローカル ステージ リポジトリ ワークツリーのファイルを 編集する
67. addをすると 67 ワークツリー ローカル ステージ リポジトリ ワークツリーから ステージにファイルを 上げる イメージとしては、コミッ トしたいファイルを 選択しているだけ
68. commitをすると 68 ワークツリー ローカル ステージ リポジトリ ステージに上がっている ファイルを一塊にして、 履歴として残す イメージとしては、 残したいタイミングで ファイルをコピーして 残している感じ id: 1
69. ファイルを少し変更する 69 ワークツリー ローカル ステージ リポジトリ id: 1 新しく、HTMLファイルに Buttonのタグを追加したと する
70. 変更点をaddする 70 ワークツリー ローカル ステージ リポジトリ id: 1 変更したファイルだけ ステージに上げる それ以外のファイルは あげない Gitは差分だけを保存する
71. 変更点をcommitする 71 ワークツリー ローカル ステージ リポジトリ id: 1 ステージに上がっている ファイルの変更内容を、 変更履歴に残す id: 2
72. pushとは？ 72 ワークツリー ステージ リポジトリ ローカルの状態をリモートにアップロードする 変更履歴の記録 履歴を新しく保存する 一覧を用意する場所 作業をする場所 GitHub オンライン上のファイルを 管理するサービス push プッシュ　(アップロード) ローカル リモート
73. pullとは？ 73 ワークツリー ステージ リポジトリ リモートの状態をローカルにダウンロードする 変更履歴の記録 履歴を新しく保存する 一覧を用意する場所 作業をする場所 GitHub オンライン上のファイルを 管理するサービス pull プル　(ダウンロード) ローカル リモート
74. pushすると 74 ローカル リポジトリ id: 1 id: 2 GitHub リモート GitHub側で、リポジトリは 作って、ローカルと 紐付けは終わっている状態
75. ローカルのリポジトリと GitHub側のリポジトリを 同じ状態にする （アップロードする） pushすると 75 ローカル リポジトリ id: 1 id: 2 GitHub リモート push プッシュ　(アップロード) id: 2 id: 1
76. Chap.6 実際にcommitまで やってみる 76
77. Gitの大きな流れ • Add コミットするファイルを追加する • Commit 追加・変更点をGitに追加する • Push リモート(ネット)に打ち上げる • Pull リモート(ネット)から変更点をもらう 77 引用元：（Progate-Git） https://prog-8.com/slides?displayed_id=2642&lesson=66
78. GItHubでリポジトリを作成する https://github.com　にアクセスする 78
79. GItHubでリポジトリを作成する クリックしてプロフィール をみてみましょう 79
80. GItHubでリポジトリを作成する • Repository をクリックする。 80
81. GItHubでリポジトリを作成する • Newをクリックする。 81
82. GItHubでリポジトリを作成する • リポジトリの名前 • リポジトリの説明 • リポジトリの公開 パブリックでお願いします • リポジトリの作成 • あとはそのまま 82
83. GItHubでリポジトリを作成する • SSHの方が選択されていることを確認し て、コピーをする SSHを確認 コピーをする 83
84. ターミナルを起動しよう（Mac） ⌘Command Space ＋ ターミナルと入力 Enterを押す 84
85. コマンドプロンプトを起動させよう （Windows） Windowsキー R ＋ cmdと入力 OKを押す 85
86. コマンドプロンプトを起動させよう （Windows） コマンドプロンプトが 立ち上がるはずです。 86
87. 簡単なコンソールのおさらい　for Mac $ mkdir gitTest //ディレクトリの作成 $ cd gitTest //ディレクトリの移動 $ ls　//今いるフォルダーに何があるか確認 $ touch index.html //からのファイルの作成 $ cat ファイル名　//ファイルの中身を表示 $ echo "追加で書くもの" >> ファイル名　//ファイルに追加書き込み 87
88. 簡単なコンソールのおさらい　for Windows $ mkdir gitTest //ディレクトリの作成 $ cd gitTest //ディレクトリの移動 $ dir　//今いるフォルダーに何があるか確認 $ type nul > index.html //からのファイルの作成 $ type ファイル名 //ファイルの中身を表示 $ echo "追加で書くもの" >> index.html //ファイルに追加書き込み 88
89. プロジェクトを立ててみる $ mkdir src //srcファイルがある時はやらなくて大丈夫です $ cd src $ mkdir gitTest $ cd gitTest $ git init > Initialized empty Git repository in <それぞれのパス>/.git/ GitTest “Git init”でバージョン管理を 行う設定をした 89
90. プロジェクトを立ててみる $ git remote add origin <さっきコピーしたデータ> 実際打ってみたコードを貼り付けておく Git Test やり取りできるように設定 90
91. ファイルを作成する Macの場合 $ touch index.html windowsの場合 $ type nul > index.html 91 ワークツリー ステージ リポジトリ ワークツリーのファイルを 編集する
92. Addをしてみる $ git add index.html $ git add -A //Aは大文字 Topic！今のプロジェクトのデータをすべて選択 したい場合 92 ワークツリー ステージ リポジトリ ターミナルの内容
93. ステータスを見てみる $ git status > On branch master Changes to be committed: (use "git restore --staged <file>..." to unstage) modified: index.html 今のファイルの状態を見ることが出来ます。 今は、コミットされるファイルが表示されています。 93
94. コミットをしてみる $ git commit -m “初めてのコミット” 94 ワークツリー ステージ リポジトリ id: 1 ターミナルの内容
95. コミットした履歴を見てみる $ git log > commit 0cd513265131d7f2d915e9965d5b10ba94e80a44 (HEAD -> master ) 　Author: harutiro <harutiro2027@outlook.jp> 　Date: Wed Jul 13 10:48:44 2022 +0900 初めてのコミット コミットをした履歴をみることが出来ます。 95
96. プッシュをしてみる $ git push origin main 96 ワークツリー ステージ リポジトリ id: 1 GitHub id: 1 ターミナルの内容 ローカル側の変更点を リモートにアップロードする
97. 変更点をPushすることができました 実際にGitHubで確認をしてみましょう 97
98. GItHubでリポジトリを作成する • コピーをしたページを開いて Webを更新をします。 98
99. GItHubでリポジトリを作成する • 作成されているファイルが表示されてい たら成功です。 99
100. プルをしてみる $ git pull origin main GitTest index.html 初めてのコミット GitHub上のリポジトリの 変更点をダウンロードしてくれる pull 100
101. お疲れ様です 　🍵 101
102. まとめ $ git init //gitを使えるようにする $ git remote add origin <URL> //リモートの追加 $ git add <ファイル名> //コミットするファイルの追加 -Aですべて選択 $ git commit -m “コミットメッセージ”//コミットをする $ git push origin main //リモートに打ち上げる $ git pull origin main //リモートからデータを貰う 基本使うのはこの６つのコマンド Gitを使いこなして、Gitマスターになろう！！ 102
103. おまけ $ git status $ git log $ git diff Git状態を知る様々なコマンド、 どういった動きをするか、実行をしてみよう。 103
104. Chap.7 ファイルの変更を 行ってみる 104
105. ファイルの変更を行う（Windowsの人） $ notepad index.html GitTest index.html エディターを使って ファイルを編集して みましょう 105
106. ファイルの保存をしよう（Windowsの 人） ⌃ Control S + 普通にメニューバー から保存も できるよ！！ 106
107. ファイルの変更を行う（Macの人） $ nano index.html GitTest index.html UW PICO 5.09 File: index.html Modified　　　　 　 こんにちは世界 ^G Get Help ^O WriteOut ^R Read File ^Y Prev Pg ^K Cut Text ^C Cur Pos ^X Exit ^J Justify ^W Where is ^V Next Pg ^U UnCut Text ^T To Spell エディターを使って ファイルを編集して みましょう 107
108. ファイルの保存をしよう(Macの人) ⌃ Control X Y ⏎ return + 108
109. add・commit・pushをしてみる $ git add -A $ git commit -m “indexに文を追加した” $ git push origin main これで新しい変更を保存することが出来ました。 109
110. ギットログをグラフ形式で見てみる(短い版) $ git log --graph --all > * harutiro 9471325 (HEAD -> master) indexに文を追加した * harutiro 0cd5132 初めてのコミット 今はただの点に見えますが、今後Gitをたくさん 使っていくとどんどんカラフルになります。 110
111. ギットログをグラフ形式で見てみる $ git log --graph --all --format="%x09%C(cyan bold)%an%Creset%x09%C(yellow)%h%Creset %C(magenta reverse)%d%Creset %s" > * harutiro 9471325 (HEAD -> master) indexに文を追加した * harutiro 0cd5132 初めてのコミット 今はただの点に見えますが、今後Gitをたくさん 使っていくとどんどんカラフルになります。 111
112. 草を増やそう この流れでどんどんコミットを増やして 草を生やしていきましょう 112 引用元：（Progate-Git） https://prog-8.com/slides?displayed_id=2642&lesson=66
113. ここから余裕があれば 113 赤ｱｹﾞﾃ ◆＼(´-`) 　白ｱｹﾞﾃ ◆＼(´-`)／◇
114. Chap.8 ブランチを切ってみる 114
115. ブランチを切る利点 • コードを書くときにMainブランチは、エラーが絶対出ない、 安全地帯にする必要がある。 • どんなにメチャクチャにしてもいい場所をつくって開発する。 ハイパーつよつよ、 すごい大規模な変更 115
116. ブランチを切る利点 • ブランチを切ることによって、 どんなにヘンテコなものを書いても許される。（実際には書かないでね！！） めっちゃいい感じの 新規機能を作成しました！ 超特大 バグ・エラー 116
117. コンフリクトとは • Mainブランチはみんなで開発をすると コンフリクト（コードの衝突）が起きることもある。 Aさん 1行目はアラート の表示を書く Bさん 1行目は、ボタン の処理を書く 1行目が、ボタンの処理か、 アラートの処理かわからん 117
118. mainブランチから切り離してみましょう 118
119. ブランチの一覧を表示してみる $ git branch > * master masterブランチ 今あるブランチの一覧を表示します ＊がついているところが今いるブランチです。 119 注意！　 ブランチ名がmasterの場合とmainの場合があるので、確認をお願いします。 そしてmainだった場合はうまく読み替えてください。
120. ブランチを作ってみる $ git branch newBranch $ git branch > * master newBranch masterブランチ newBranchが 出来た 120
121. チェックアウト • ブランチを切った後に、その場所にずれる • HEADは今いるブランチの最新の変更点 Origin / HEAD Origin / HEAD 今いる場所からずれる Headとは何か説明をする記事 https://qiita.com/takeokunn/items/5bc499121a21f8c5b990 121
122. ブランチを移動してみる $ git checkout newBranch $ git branch > master * newBranch masterブランチ Origin / HEAD Origin / HEAD 今いる場所からずれる 122
123. それでは、ファイルを変更して コミットをしてみましょう 123
124. 新しいコミットをつくってみよう $ echo 追加で書くもの >> index.html $ git add -A $ git commit -m “indexに文を追加した2” $ git push origin newBranch masterブランチ newBranch 124
125. ログを確認してみよう $ git log --graph --all --format="%x09%C(cyan bold)%an%Creset%x09%C(yellow)%h%Creset %C(magenta reverse)%d%Creset %s" > * harutiro d4f1cc9 (HEAD -> newBranch) indexに文を追加した2 * harutiro 9471325 (master) indexに文を追加した * harutiro 0cd5132 初めてのコミット masterブランチ Origin / HEAD 125
126. ブランチを切った後の流れ • あとはこの流れに沿って、Gitを使って いきましょう 126 引用元：（Progate-Git） https://prog-8.com/slides?displayed_id=2642&lesson=66
127. Chap.9 チェックアウトをして みる 127
128. チェックアウト • ブランチを切った時に、Mainに戻りたい時があります。 その時にチェックアウトをして戻りましょう • HEADは今いるブランチの最新の変更点 Origin / HEAD Origin / HEAD 今いる場所からずれる Headとは何か説明をする記事 https://qiita.com/takeokunn/items/5bc499121a21f8c5b990 128
129. チェックアウトをして、Mainブランチに 戻ってみましょう 129
130. ファイルの中身を確認する（Windows） Windowsの方 $ type index.html > 追加で書くもの Indexに文を追加した //書いた内容によって表示はまちまちになります masterブランチ Origin / HEAD 130
131. ファイルの中身を確認する（Mac） Macの方 $ cat index.html > 追加で書くもの Indexに文を追加した //書いた内容によって表示はまちまちになります masterブランチ Origin / HEAD 131
132. ブランチを移動してみる $ git checkout main $ git branch > * master newBranch masterブランチ Origin / HEAD Origin / HEAD 今いる場所からずれる 132
133. これでMainブランチに戻ることが できました。 133
134. 変更されているファイルが戻っているか 確認をしてみましょう。 134
135. ファイルの中身を確認する（Windows） Windowsの方 $ type index.html > 追加で書くもの //書いた内容によって表示はまちまちになります masterブランチ Origin / HEAD 135
136. ファイルの中身を確認する（Mac） Macの方 $ cat index.html > 追加で書くもの //書いた内容によって表示はまちまちになります masterブランチ Origin / HEAD 136
137. ログを確認してみよう $ git log --graph --all --format="%x09%C(cyan bold)%an%Creset%x09%C(yellow)%h%Creset %C(magenta reverse)%d%Creset %s" > * harutiro d4f1cc9 (newBranch) indexに文を追加した2 * harutiro 9471325 (HEAD -> master)indexに文を追加した * harutiro 0cd5132 初めてのコミット masterブランチ Origin / HEAD 137
138. Chap.11 プルリクをしてみる 138
139. Pull Requestとは？ マージを誰かにお願いする機能 139
140. マージの問題点 140
141. プルリクエストのいい点 141
142. ツリーをみながら考えてみる • 最後Mainにマージをする時にエラーやバグ、Typoミスなどを 確認（レビュー）してマージをする。 このタイミングでおかしいところがあれば、もう一度やり直してもらう ここエラー出るやん、 修正お願いします。 142 超特大 バグ・エラー
143. Gitのリポジトリにアクセスする https://github.com/<ユーザー名>/<リポジトリ名> 143
144. ブランチのプルリクを送る Pull Requestsを選択しよう 144
145. ブランチのプルリクを送る New Pull Requestを選択しよう 145
146. ブランチのプルリクを送る どのブランチからどこにマージをしたいのか 選択しよう 146
147. ブランチのプルリクを送る 選択ができたらView pull requestを選択しよう 147
148. ブランチのプルリクを送る マージしたい内容に ついてコメントを書こう 編集したら Create pull requestを 押そう 148
149. ブランチのプルリクを送る レビューをする人は 内容を確認したら Merge pull requestを 押す 今回は自分でマージを しよう 149
150. マージしたコードを ダウンロード する $ git pull origin main これで、マージした情報をGitHub側から ダウンロードができます 150
151. まとめ branch //作業領域を切り分けるコマンド checkout //ブランチを移動するコマンド チーム開発で使うのはこの2つのコマンド Gitを使いこなして、Gitマスターになろう！！ 151 Pull request //マージを他の人にお願いするgithubの機能
152. Chap.12 gitignoreを設定する 152
153. gitignoreとは？ Gitでバージョン管理を無視したいファイルや ディレクトリを記述するファイルのこと Library フォルダー node_mudule フォルダー .env ファイル .env 開発環境で自動で用意されるファイルや 秘密鍵などをリモートにあげないようにする
154. gitignoreを使う利点 1. 不要なファイルを除外できる ビルド成果物やログなどをGit管理から外し、リポジトリを軽量化。 2. 環境依存ファイルを避けられる 各開発者の設定ファイル（例：.vscode/）を共有せず、環境の衝突を防 ぐ。 3. リポジトリの容量を減らす GitHubの容量制限である100MBを超えるファイルを隠すためなど 　 4. セキュリティの向上 .env など機密情報を含むファイルを誤って公開しないように防ぐ。
155. gitignoreファイルを作ってみよう Macの場合 $ touch .gitignore windowsの場合 $ type nul > .gitignore .env .gitignroeファイルが作成されま す
156. テンプレートからコピペをしてみる GitHubには有名な.gitignoreの テンプレートがあります この中に使う言語やフレームワークに あったファイルを用意してくれます https://github.com/github/gitignore 一度ここにアクセスしてみましょう • Swift → Swift.gitignore • Node.js → Node.gitignore • Unity → Unity.gitignore
157. nodeのテンプレートを使ってみる 検索ボックスで「node」と検索してみましょう Node.gitignoreを選択します
158. テンプレートをコピーする コピーができそうなアイコンを押して、 テンプレートをコピーしてください
159. テンプレートを貼り付けてみよう Macの場合 $ pbpaste > .gitignore windowsの場合 $ Get-Clipboard > .gitignore .giti gnore クリップボードから .gitignoreにコピーをし た内容を流し込みます
160. テンプレートが書き込めたか確認する Macの場合 $ cat .gitignore windowsの場合 $ type .gitignore > # Logs logs *.log ~~~この先もめちゃめちゃ続く... catかtype コマンドを用いて、 ファイルの中身を出力させられます。 かなり長い文章なので、 みきれてしまうかもしれないです。 うまくいかない場合は、もう一度 テンプレートをコピーするのを おすすめします。
161. .envファイルを作ってみよう Macの場合 $ touch .env windowsの場合 $ type nul > .env .env .envファイルが作成されます 環境設定としてよく.envファイルを作成します。 これを再現するため、.envを作成して、 パスワードっぽいものを入力してみます。
162. .envファイルの中身を作ってみる $ echo password=pass > .gitignore Macの場合の.envの確認方法 $ cat .gitignore windowsの場合の.envの確認方法 $ type .gitignore >password=pass .env 「password=pass」という 文字列を.envファイルに 書き込みます password=pass
163. git statusで状態を確認する $ git status On branch feature Your branch is up to date with 'origin/feature'. Untracked files: (use "git add <file>..." to include in what will be committed) .gitignore nothing added to commit but untracked files present (use "git add" to track) statusコマンドを用いて、現在ファイルがどのような状態になっているか確認します。 .envが写っていないので、git からは管理されていないのが確認できました！ .envファイルがないのを確認
164. .gitignoreのまとめ 1. .gitignore ファイルを作成 2. 無視したいファイル・フォルダを記述 3. 必要ならテンプレートを利用
165. 参考文献・引用文献 165 [【Windows】Gitの環境構築をしよう！]　https://prog-8.com/docs/git-env-win [【Mac】Gitの環境構築をしよう！] https://prog-8.com/docs/git-env [フリーアイコンの数千人]　https://icon-icons.com/ja/ [【MacOS】Homebrew経由でGitをインストールする方法] https://blog.cloud-acct.com/posts/u-homebrew-git-install/ [コマンドプロンプトを起動する] https://www.javadrive.jp/command/ini/index1.html [【Linux】ファイル検索のあれこれ【ls/find/grep/xargs】] https://kojimanotech.com/2018/12/28/113/#outline__3 [サル先生のGitHub入門　プルリクエストとは？]https://backlog.com/ja/git-tutorial/pull-request/01/ [git log を見やすくする]https://qiita.com/takasianpride/items/842a785af610025a2030
166. バージョン情報 2022/07 ver1.0 初期リリース 2023/02 ver1.1 PRの記述の追記 2024/10 ver2.0 ステージ、リポジトリの説明、SSHの説明などの追記 2025/03 ver3.0 Gitをどういうときに使うのかを追記 2025/05 ver3.1 フィードバックのQRの追加 2025/05 ver3.2 GitとGitHubの違いを説明するスライドの微調整 2025/08 ver3.3 CLI版とVSCode版で差異があった部分を修正 2025/10 ver3.4 gitignoreを追記 166
167. アンケートのお知らせ 167 ご購入していただきありがとうございました。 お手すきの際に、よろしければアンケートのご回答をよろしくお願いいたします https://forms.gle/N44dRcrvUVH5gEkj6
168. 奥付 発行日 初版: 2024年11月03日(日) 技術書典17 サークル Luciano研究室 X (Twitter) ID @stluciano ̲ labo Webサイト https://www.stluciano‒server.net/ 著者 牧野遥斗 メールアドレス makino@harutiro.net Qiita URL https://qiita.com/harutiro Webサイト https://www.harutiro.net X (Twitter) ID @harutiro2727 印刷所 なし 168