How To GitHub In CLI

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

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

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

Transcript

1. “ How To GitHub In CLI writer by harutiro Team : システム工学研究会
2. お品書き 1. バージョン管理ツールとはなにか？ 2. Gitのインストール 3. Githubアカウントを作成しよう 4. Gitの初期設定を行う 5. GitHubの基本的な流れ 6. ファイルの変更を行ってみる 7. ブランチを切ってみる 8. チェックアウトをしてみる 9. プルリクをしてみる 2
3. Chap.1 バージョン管理ツール とは何か？ 3
4. Git とは何か？ • バージョン管理システムの1つ ◦ ファイルの変更履歴を管理してくれる ◦ チーム開発のコード管理をしてくれる 4
5. Git どういうときに使うのか • データを戻したいとき • データを混ぜ合わせるとき • コードのバックアップをとるとき 5
6. Chap.2 Gitのインストール 6
7. ターミナルを起動しよう（Mac） ⌘Command Space ＋ ターミナルと入力 Enterを押す 7
8. コマンドプロンプトを起動させよう（Windows） Windowsキー R ＋ cmdと入力 OKを押す 引用元：（コマンドプロンプトを起動する ） https://www.javadrive.jp/command/ini/index1.html 8
9. コマンドプロンプトを起動させよう（Windows） 引用元：（コマンドプロンプトを起動する） https://www.javadrive.jp/command/ini/index1.html コマンドプロンプトが 立ち上がるはずです。 9
10. Gitが入っているか確認してみよう $ git version > git version 2.33.0.windows.2　＜ー　人によってかわってる Git のバージョンが帰ってこない場合、イ ンストールが出来ていません。 インストールから始めましょう！！ 10
11. Gitをインストールしてみる（Mac） $ brew install git $ git -v > git version 2.37.0 バージョンが帰ってきたらインストール 完了です。 11
12. Topic！　Brewが入っていない方へ。 $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" $ echo 'eval $(/opt/homebrew/bin/brew shellenv)' >> /Users/hoge/.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行を 貼り付けてみましょう！！ 12
13. インストール手順　（Windows） 以下URL参照 https://prog-8.com/docs/git-env-win チャプター1　[Gitのインストール]まで行う 時間があるときにまた書きます 今はこれで許して(人д｀o) 13
14. Chap.3 Githubアカウントを 作成しよう 14
15. GItHubとは？ Github上にコードをあげてネットに公開したり、 チーム開発でコードを集結させるのに用いる 15
16. プログラミングを行うに当たって便利なものです アカウントを持っていない方は 作っていきましょう 16
17. GItHubアカウントを作成する。 https://github.com　にアクセスする 17
18. GItHubアカウントを作成する。 サインアップを押そう 18
19. GItHubアカウントを作成する。 メールアドレスを入力する 大学のメールにすると自動でPro版になります 19
20. GItHubアカウントを作成する。 パスワード 大文字、小文字、数字、記号を入れる メールアドレス 大学のメールにすると自動で Pro版になります ユーザー名 後で使うので控えておいてください キャンペーンメールの許可 基本はnで大丈夫 20
21. GItHubアカウントを作成する。 認証をクリアして、 人間だと証明しましょう 21
22. GItHubアカウントを作成する。 最後にクリエイトアカウントで アカウント作成する 22
23. GItHubアカウントを作成する。 メールアドレスに届いたコードを入力する 23
24. GItHubアカウントを作成する。 三つのアンケートに答えましょう チーム開発はどれくらい の人数で行うのか？ 学生か先生か？ 24
25. GItHubアカウントを作成する。 三つのアンケートに答えましょう Githubで気になるサービスを 選択しましょう。 よくわからない方は、画面のチェックに 合わせてもらえれば大丈夫です。 25
26. GItHubアカウントを作成する。 三つのアンケートに答えましょう プランを選択します。 Freeプランを選択しましょう 26
27. GItHubアカウントを作成する。 アカウントを作成することができました！！ 27
28. Chap.4 Gitの初期設定を行う 28
29. コマンドコンソールを開く（Windows） インストールした時に 一緒にダウンロードされた GitBashを開く 引用元：（【Windows】Gitの環境構築をしよう！） https://prog-8.com/docs/git-env-win 29
30. コマンドコンソールを開く（Windows） こういったものが開かれたはずです。 引用元：（【Windows】Gitの環境構築をしよう！） https://prog-8.com/docs/git-env-win 30
31. ターミナルを起動しよう（Mac） ⌘Command Space ＋ ターミナルと入力 Enterを押す 31
32. ユーザー名とアドレスを登録する $ git config --global user.name "ユーザー名" $ git config --global user.email "メールアドレス" $ git config user.name > “ユーザー名” $ git config user.email > “メールアドレス” 32
33. SSHキーを作成する $ 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 33
34. SSHキーを作成する $ ssh-keygen -t ed25519 -C "GitHubに登録したメールアドレス" 引用元：（【Windows】Gitの環境構築をしよう！） https://prog-8.com/docs/git-env-win ⏎ Enter ⏎ Enter ⏎ Enter ファイル名の指定 今回はデフォルトなので そのままエンター パスワードの設定 今回はそのままエンター パスワードの確認 今回はそのままエンター 34
35. SSHキーを作成する $ ls ~/.ssh > id_ed25519 id_ed25519.pub SSHキーが作成できたかどうか 確認しましょう 35
36. SSHキーを作成する Windowsの方 $ clip < ~/.ssh/id_ed25519.pub Macの方 $ pbcopy < ~/.ssh/id_ed25519.pub SSHキーをコピーしましょう クリップボードに保存されます。 36
37. SSHキーをGithubに登録する https://github.comにアクセスする 37
38. SSHキーをGithubに登録する アイコンをクリックして、 Settingsを押す 38
39. SSHキーをGithubに登録する SSH and GPG keysを押す 39
40. SSHキーをGithubに登録する New SSH key を押す 40
41. SSHキーをGithubに登録する わかりやすい 名前をつける コピーしたキーを 貼り付ける Mac:Command + V Win:ctrl + V Add　SSH　keyを押す 41
42. SSHキーをGithubに登録する 登録した名前が表示されれば成功です 42
43. 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 の後にユーザー名が出力されれば成功です。 43
44. Chap.5 Gitの基本的な流れ 44
45. Gitの大きな流れ • Add コミットするファイルを追加する • Commit 追加・変更点をGitに追加する • Puth リモート(ネット)に打ち上げる • Pull リモート(ネット)から変更点をもらう 45 引用元：（Progate-Git） https://prog-8.com/slides?displayed_id=2642&lesson=66
46. GItHubでリポジトリを作成する https://github.com　にアクセスする 46
47. GItHubでリポジトリを作成する クリックしてプロフィール をみてみましょう 47
48. GItHubでリポジトリを作成する • Repository をクリックする。 48
49. GItHubでリポジトリを作成する • Newをクリックする。 49
50. GItHubでリポジトリを作成する • リポジトリの名前 • リポジトリの説明 • リポジトリの公開 パブリックでお願いします • リポジトリの作成 • あとはそのまま 50
51. GItHubでリポジトリを作成する • SSHの方が選択されていることを確認し て、コピーをする SSHを確認 コピーをする 51
52. ターミナルを起動しよう（Mac） ⌘Command Space ＋ ターミナルと入力 Enterを押す 52
53. コマンドプロンプトを起動させよう（Windows） Windowsキー R ＋ cmdと入力 OKを押す 引用元：（コマンドプロンプトを起動する ） https://www.javadrive.jp/command/ini/index1.html 53
54. コマンドプロンプトを起動させよう（Windows） 引用元：（コマンドプロンプトを起動する） https://www.javadrive.jp/command/ini/index1.html コマンドプロンプトが 立ち上がるはずです。 54
55. 簡単なコンソールのおさらい　for Mac $ mkdir gitTest //ディレクトリの作成 $ cd gitTest //ディレクトリの移動 $ ls　//今いるフォルダーに何があるか確認 $ touch index.html //からのファイルの作成 $ cat ファイル名　//ファイルの中身を表示 $ echo "追加で書くもの" >> ファイル名　//ファイルに追加書き込み 55
56. 簡単なコンソールのおさらい　for Windows $ mkdir gitTest //ディレクトリの作成 $ cd gitTest //ディレクトリの移動 $ dir　//今いるフォルダーに何があるか確認 $ type nul > index.html //からのファイルの作成 $ type ファイル名 //ファイルの中身を表示 $ echo "追加で書くもの" >> index.html //ファイルに追加書き込み 56
57. プロジェクトを立ててみる $ mkdir src //srcファイルがある時はやらなくて大丈夫です $ cd src $ mkdir gitTest $ cd gitTest $ git init > Initialized empty Git repository in <それぞれのパス>/.git/ GitTest “Git init”でバージョン管理を 行う設定をした 57
58. プロジェクトを立ててみる $ git remote add origin <さっきコピーしたデータ> 実際打ってみたコードを貼り付けておく Git Test やり取りできるように設定 58
59. ファイルを作成する Macの場合 $ touch index.html windowsの場合 $ type nul > index.html GitTest index.html 59
60. Addをしてみる $ git add index.html GitTest index.html addコマンドでコミットする ファイルを選択する $ git add -A //Aは大文字 Topic！今のプロジェクトのデータをすべて選択したい場合 60
61. ステータスを見てみる $ git status > On branch master Changes to be committed: (use "git restore --staged <file>..." to unstage) modified: index.html 今のファイルの状態を見ることが出来ます。 今は、コミットされるファイルが表示されています。 61
62. コミットをしてみる $ git commit -m “初めてのコミット” GitTest index.html 初めてのコミット コミットをして、 現状の状態を 保存してくれる ワークツリー ファイル構造 62
63. コミットした履歴を見てみる $ git log > commit 0cd513265131d7f2d915e9965d5b10ba94e80a44 (HEAD -> master) 　Author: harutiro <harutiro2027@outlook.jp> 　Date: Wed Jul 13 10:48:44 2022 +0900 初めてのコミット コミットをした履歴をみることが出来ます。 63
64. プッシュをしてみる $ git push origin master GitTest index.html 初めてのコミット コミットした今の状態を GitHubに打ち上げてくれる push 64
65. 変更点をPushすることができました 実際にgithubで確認をしてみましょう 65
66. GItHubでリポジトリを作成する • コピーをしたページを開いて Webを更新をします。 66
67. GItHubでリポジトリを作成する • 作成されているファイルが表示されてい たら成功です。 67
68. プルをしてみる $ git pull origin master GitTest index.html 初めてのコミット Github上のリポジトリの 変更点をダウンロードしてくれる pull 68
69. お疲れ様です　🍵 69
70. まとめ $ git init //gitを使えるようにする $ git remote add origin <URL> //リモートの追加 $ git add <ファイル名> //コミットするファイルの追加 -Aですべて選択 $ git commit -m “コミットメッセージ”//コミットをする $ git push origin master //リモートに打ち上げる $ git pull origin master //リモートからデータを貰う 基本使うのはこの６つのコマンド Gitを使いこなして、Gitマスターになろう！！ 70
71. おまけ $ git state $ git log $ git diff Git状態を知る様々なコマンド、 どういった動きをするか、実行をしてみよう。 71
72. Chap.6 ファイルの変更を 行ってみる 72
73. ファイルの変更を行う（Windowsの人） $ notepad index.html GitTest index.html エディターを使って ファイルを編集して みましょう 73
74. ファイルの保存をしよう（Windowsの人） ⌃ Control S + 普通にメニューバー から保存も できるよ！！ 74
75. ファイルの変更を行う（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 エディターを使って ファイルを編集して みましょう 75
76. ファイルの保存をしよう(Macの人) ⌃ Control X Y ⏎ return + 76
77. add・commit・pushをしてみる $ git add -A $ git commit -m “indexに文を追加した” $ git push origin master これで新しい変更を保存することが出来ました。 77
78. ギットログをグラフ形式で見てみる(短い版) $ git log --graph --all > * harutiro 9471325 (HEAD -> master) indexに文を追加した * harutiro 0cd5132 初めてのコミット 今はただの点に見えますが、今後Gitをたくさん 使っていくとどんどんカラフルになります。 78
79. ギットログをグラフ形式で見てみる $ 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をたくさん 使っていくとどんどんカラフルになります。 79
80. 草を増やそう この流れでどんどんコミットを増やして 草を生やしていきましょう 80 引用元：（Progate-Git） https://prog-8.com/slides?displayed_id=2642&lesson=66
81. ここから余裕があれば 81 赤ｱｹﾞﾃ ◆＼(´-`) 　白ｱｹﾞﾃ ◆＼(´-`)／◇
82. Chap.7 ブランチを切ってみる 82
83. ブランチを切る利点 • コードを書くときにMainブランチは、エラーが絶対出ない、 安全地帯にする必要がある。 • どんなにメチャクチャにしてもいい場所をつくって開発する。 一週間分のご飯の献立を かんがえちゃうぞ！！ 83
84. ブランチを切る利点 • ブランチを切ることによって、どんなにヘンテコなものをかいても許さ れる。（実際には書かないでね！！） 一週間分の献立を考えた！！ プルリクエストを送って、マージをして もらおう。 晩御飯 シュール ストレミング 84
85. コンフリクトとは • Mainブランチはみんなで開発をすると コンフリクト（コードの衝突）が起きることもある。 Aさん 明日のご飯は ラーメンと記載 Bさん 明日のご飯は 回転寿司と記載 明日のご飯は、 ラーメンなのか、寿司なのかわ からん。 85
86. mainブランチから切り離してみましょう 86
87. ブランチの一覧を表示してみる $ git branch > * master masterブランチ 今あるブランチの一覧を表示します ＊がついているところが今いるブランチです。 87
88. ブランチを作ってみる $ git branch newBranch $ git branch > * master newBranch masterブランチ newBranchが 出来た 88
89. チェックアウト • ブランチを切った後に、その場所にずれる • HEADは今いるブランチの最新の変更点 Origing / HEAD Origing / HEAD 今いる場所からずれる Headとは何か説明をする記事 https://qiita.com/takeokunn/items/5bc499121a21f8c5b990 89
90. ブランチを移動してみる $ git checkout newBranch $ git branch > master * newBranch masterブランチ Origing / HEAD Origing / HEAD 今いる場所からずれる 90
91. それでは、ファイルを変更して コミットをしてみましょう 91
92. 新しいコミットをつくってみよう $ echo 追加で書くもの >> index.html $ git add -A $ git commit -m “indexに文を追加した2” $ git push origin newBranch masterブランチ newBranch 92
93. ログを確認してみよう $ 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ブランチ Origing / HEAD 93
94. ブランチを切った後の流れ • あとはこの流れに沿って、Gitを使って いきましょう 94 引用元：（Progate-Git） https://prog-8.com/slides?displayed_id=2642&lesson=66
95. Chap.8 チェックアウトをして みる 95
96. チェックアウト • ブランチを切った時に、Mainに戻りたい時があります。 その時にチェックアウトをして戻りましょう • HEADは今いるブランチの最新の変更点 Origing / HEAD Origing / HEAD 今いる場所からずれる Headとは何か説明をする記事 https://qiita.com/takeokunn/items/5bc499121a21f8c5b990 96
97. チェックアウトをして、Mainブランチに 戻ってみましょう 97
98. ファイルの中身を確認する（Windows） Windowsの方 $ type index.html > 追加で書くもの Indexに文を追加した //書いた内容によって表示はまちまちになります masterブランチ Origing / HEAD 98
99. ファイルの中身を確認する（Mac） Macの方 $ cat index.html > 追加で書くもの Indexに文を追加した //書いた内容によって表示はまちまちになります masterブランチ Origing / HEAD 99
100. ブランチを移動してみる $ git checkout master $ git branch > * master newBranch masterブランチ Origing / HEAD Origing / HEAD 今いる場所からずれる 100
101. これでMainブランチに戻ることが できました。 101
102. 変更されているファイルが戻っているか 確認をしてみましょう。 102
103. ファイルの中身を確認する（Windows） Windowsの方 $ type index.html > 追加で書くもの //書いた内容によって表示はまちまちになります masterブランチ Origing / HEAD 103
104. ファイルの中身を確認する（Mac） Macの方 $ cat index.html > 追加で書くもの //書いた内容によって表示はまちまちになります masterブランチ Origing / HEAD 104
105. ログを確認してみよう $ 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ブランチ Origing / HEAD 105
106. Chap.9 プルリクをしてみる 106
107. Pull Requestとは？ マージを誰かにお願いする機能 107
108. マージの問題点 108
109. プルリクエストのいい点 109
110. ツリーをみながら考えてみる • 最後Mainにマージをする時にエラーやバグ、 Typoミスなどを 確認（レビュー）してマージをする。 このタイミングでおかしいところがあれば、もう一度やり直してもらう シュールストレミングはまずくね？ 修正お願い！！ 晩御飯 シュール ストレミング 110
111. Gitのリポジトリにアクセスする https://github.com/<ユーザー名>/<リポジトリ名> 111
112. ブランチのプルリクを送る Pull Requestsを選択しよう 112
113. ブランチのプルリクを送る New Pull Requestを選択しよう 113
114. ブランチのプルリクを送る どのブランチからどこにマージをしたいのか 選択しよう 114
115. ブランチのプルリクを送る 選択ができたらView pull requestを選択しよう 115
116. ブランチのプルリクを送る マージしたい内容に ついてコメントを書こう 編集したら Create pull requestを 押そう 116
117. ブランチのプルリクを送る レビューをする人は 内容を確認したら Merge pull requestを 押す 今回は自分でマージを しよう 117
118. マージしたコードをダンロードする $ git pull origin master これで、マージした情報をGithub側から ダウンロードができます 118
119. まとめ $ git branch //作業領域を切り分けるコマンド $ git checkout //ブランチを移動するコマンド チーム開発で使うのはこの2つのコマンド Gitを使いこなして、Gitマスターになろう！！ 119 Pull request //マージを他の人にお願いするgithubの機能
120. 参考文献・引用文献 120 [【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