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」でOK ロボットでないことの認証(例えば渦巻銀河をクリックするタスク)を実行 ブラウザをまだ閉じない事 最後に登録のためのコードがメールで送られるので、それを入力すれば登録完了

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 [email protected] 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 [email protected]:アカウント名/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 [email protected]:アカウント名/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 このボタンを押してフォークする あとは課題の指示に従ってプルリクエストを作ること