演習：GitHubの操作(基本編) / GitHub Practice Github Basic

Slide 1

Slide 1 text

1 53 演習：GitHubの操作(基本編) 慶應義塾大学理工学部物理情報工学科渡辺物理情報工学ソフトウェア開発演習

Slide 2

Slide 2 text

2 53 • GitHubのアカウントを作成する • リモートリポジトリの作成と、ローカルリポジトリとの同期について学ぶ • issueの使い方の基本を覚える • Projectの使い方を覚える • (発展課題)プルリクを体験する

Slide 3

Slide 3 text

3 53 ターミナルからGitHubにアクセスしたいが他の人に勝手にアクセスされては困る正当な権利を持つ人だけがアクセスできるようにしたい →SSH公開鍵認証

Slide 4

Slide 4 text

4 53 公開鍵暗号とは普通の鍵：「鍵をかける」鍵と「鍵を開ける」鍵が同じかける開ける公開鍵：「鍵をかける」鍵と「鍵を開ける」鍵が異なるかける開けるペア

Slide 5

Slide 5 text

5 53 1. 事前に鍵のペアを作成する秘密鍵公開鍵 2. 公開鍵をサーバに登録しておく公開鍵秘密鍵

Slide 6

Slide 6 text

6 53 3. 秘密鍵で鍵をかけた署名をサーバへ送る秘密鍵で鍵をかけるサーバに送る公開鍵で開く事前に登録してあった公開鍵で開けることができた →データを送ってきた人は秘密鍵を持っている人だ →アクセスする権利がある人である(認証)

Slide 7

Slide 7 text

7 53 GitHubにアクセスして「Sign up」を選ぶ

Slide 8

Slide 8 text

8 53 • メールアドレス • パスワード • アカウント名等を聞かれるので、順番に答える「製品のアップデート情報をメールで受け取るか」については「n」でＯＫロボットでないことの認証(例えば渦巻銀河をクリックするタスク)を実行ブラウザをまだ閉じない事最後に登録のためのコードがメールで送られるので、それを入力すれば登録完了

Slide 9

Slide 9 text

9 53 鍵のペアの作成 cd ssh-keygen 鍵を作るコマンド Generating public/private rsa key pair. Enter file in which to save the key (/z//.ssh/id_rsa): Created directory ‘/z/.ssh'. Enter passphrase (empty for no passphrase): Enter same passphrase again: 実行すると以下のような表示になる(順番に聞かれる) 1 2 3 1. 「/z/.ssh/id_rsa」と入力すること 2. パスフレーズ(パスワード)を入力。必ず入力すること。なお、ここで入力した文字は画面に表示されない。 3. 同じパスフレーズを入力。ここでも文字は表示されない

Slide 10

Slide 10 text

10 53 .ssh id_rsa id_rsa.pub ホームディレクトリ直下に.sshというディレクトリが作られ、その下に秘密鍵(id_rsa)と公開鍵(id_rsa.pub)が作られる秘密鍵公開鍵

Slide 11

Slide 11 text

11 53 これを選ぶ

Slide 12

Slide 12 text

12 53 これを選ぶ

Slide 13

Slide 13 text

13 53 これを選ぶ

Slide 14

Slide 14 text

14 53 なんでもよい(例えば「Git Bash」) cat .ssh/id_rsa.pub の実行結果「ssh-rsa」で始まる文字列を改行が入らないようにコピペする「-----BEGIN OPENSSH PRIVATE KEY-----」で始まるファイルは秘密鍵なので間違えない事最後におす

Slide 15

Slide 15 text

15 53 鍵の確認 ssh -T git@github.com Are you sure you want to continue connecting (yes/no/[fingerprint])? yesと入力 Enter passphrase for key ‘/path/to/.ssh/id_rsa': パスフレーズを入力ここは人によって異なる Hi (GitHubアカウント名)! You've successfully authenticated, but GitHub does not provide shell access. 以下の表示が出れば成功

Slide 16

Slide 16 text

16 53 このボタンを押すとホーム画面に戻る最初は「Create repository」というボタンになっているので、それを押す

Slide 17

Slide 17 text

17 53 最後に押すリポジトリの説明公開/非公開 READMEファイルを作成ライセンスの設定 (MITを選ぶ) リポジトリの名前「test」とする

Slide 18

Slide 18 text

18 53 .git リモートリポジトリリモートリポジトリに(ベア)リポジトリが作成されたこれをローカルにクローンしたい

Slide 19

Slide 19 text

19 53 1. このボタンをクリック 2. 「ssh」を選ぶ 3. このボタンを押すと、リモートリポジトリのURLがコピーされる

Slide 20

Slide 20 text

20 53 cd cd github git clone git@github.com:アカウント名/test.git cd test ここは先ほどコピーしたはずなので、右クリックからPaste github test ここがカレントディレクトリに .git リモートリポジトリ README.md LICENSE .git git cloneが作るもの

Slide 21

Slide 21 text

21 53 ローカルの修正とpush git push ローカルリポジトリリモートリポジトリ git add git commit

Slide 22

Slide 22 text

22 53 GitHub上でファイルが更新されていることがわかるスナップショットを提出

Slide 23

Slide 23 text

23 53 test2 README.md .git ローカルのリポジトリをGitHubに登録 1. ローカルにリポジトリを作成 2. GitHubにベアリポジトリを作成 3. リモートを登録してpush

Slide 24

Slide 24 text

24 53 cd cd github mkdir test2 cd test2 ここがカレントディレクトリに github test2

Slide 25

Slide 25 text

25 53 github test2 VSCodeでこのフォルダを開く新規作成ボタン README.mdを作成

Slide 26

Slide 26 text

26 53 git init git add README.md git commit -m "initial commit" github test2 README.md .git

Slide 27

Slide 27 text

27 53 GitHub上にベアリポジトリを作る説明「2nd repository」 Privateを選ぶチェックは外す残りは「None」最後に押すリポジトリの名前「test2」とする

Slide 28

Slide 28 text

28 53 「…or push an existing repository from the command line」のコピーボタンを押す

Slide 29

Slide 29 text

29 53 git remote add origin git@github.com:アカウント名/test2.git git branch -M main git push -u origin main 先ほどコピーした三行を、そのままGit Bashに貼り付けて実行する test2 README.md .git リモートを登録して git push .git リモートリポジトリ

Slide 30

Slide 30 text

30 53 push後、GitHubのtest2のページをリロードすると、以下のような画面になるはずこのスクリーンショットをレポートとして提出

Slide 31

Slide 31 text

31 53 「いま抱えている仕事」を可視化したいどの仕事がどこまで進んでいるかを把握したい「課題」＝Issue Issue Tracking System (ITS)

Slide 32

Slide 32 text

32 53 feature_A feature_B main feature_A feature_B GitHubにはITSの機能があり、ブランチやコミットと連携できる

Slide 33

Slide 33 text

33 53 1. これから行う作業をissueに登録する(issueを開く)。 2. 登録されたissueのうち、これから手をつけるissue に対応した作業ブランチを作成する 3. 作業ブランチで作業し、修正をコミットする 4. メインブランチにマージする(issueが閉じる) GitHubのIssueを使った開発フロー feature_A main issueを開く issueを閉じる

Slide 34

Slide 34 text

34 53 GitHubでtestリポジトリのページに移動するここを押すとホーム画面へここから目的のリポジトリを選ぶ

Slide 35

Slide 35 text

35 53 Issuesタブを選んでから New Issueボタンを押す

Slide 36

Slide 36 text

36 53 1 2 3 3 4 1. タイトル「READMEを修正」 2. 内容「内容を追加」 3. ラベル「enhancement」を付与 4. 「Submit new issue」でissueを開く

Slide 37

Slide 37 text

37 53 cd cd github cd test git switch -c feat/1/README GitBashで以下を実行 main feat/1/README ブランチの命名規則は人によるが、ここでは「ラベルに対応する接頭辞(feat)/issue番号/内容」とする

Slide 38

Slide 38 text

38 53 main feat/1/README github/test/README.mdを修正してコミットする git add README.md git commit -m "closes #1" コミットメッセージを間違えないこと！ #1の前に空白を入れること。

Slide 39

Slide 39 text

39 53 git switch main git merge feat/1/README 修正をメインブランチに取り込む main feat/1/README

Slide 40

Slide 40 text

40 53 git push プッシュするとIssueが自動で閉じるブラウザでこの画面を表示したまま git pushすると・・・？

Slide 41

Slide 41 text

41 53 pushによりissueが閉じられた画面のスクリーンショットを提出

Slide 42

Slide 42 text

42 53 カンバン方式 ※オリジナルの「カンバン」はかなり違うらしい Todo (やるべきこと) In Progress (作業中) Done (終わったもの) Issueがいまどんな状態にあるかを可視化する

Slide 43

Slide 43 text

43 53 Projectの作成 1 2 3

Slide 44

Slide 44 text

44 53

Slide 45

Slide 45 text

45 53 1 2 必ず「Board」を選ぶこと

Slide 46

Slide 46 text

46 53 ユーザ名’s untitled projectになっているので「Kanban」に書き直す

Slide 47

Slide 47 text

47 53 2 3 1

Slide 48

Slide 48 text

48 53 Issueの作成 1 2 3 4 5 6

Slide 49

Slide 49 text

49 53 git switch -c doc/2/README github/testにて、Git Bashでブランチ作成ブランチを作ったので、対応するカードを In progressへドラッグして移動

Slide 50

Slide 50 text

50 53 git add README.md git commit -m "fixes #2" ファイルを修正してからコミットコミットメッセージを間違えないこと git switch main git merge doc/2/README メインブランチに戻ってマージこの時点ではまだプッシュしないこと

Slide 51

Slide 51 text

51 53 ブラウザでProjectsの「カンバン」を表示させた状態でgit pushする git push

Slide 52

Slide 52 text

52 53 issueに関連づけられたカードが「Done」に移動した画面のスクリーンショットをレポートとして提出

Slide 53

Slide 53 text

53 53 このボタンを押してフォークするあとは課題の指示に従ってプルリクエストを作ること