Gitを用いてバージョン管理システムを実際に使ってみる

前回の授業で学んだバージョンコントロールシステム（VCS）を各自のパソコンで実際に用いてみましょう。

すでにGitをインストール済みの学生

〈実演〉Gitをインストールしていない・インストールしてあるかわからない学生

Windowsの場合

git for windows をインストールしてください。

この後のパートでは、git for windowsでインストールされる Git Bash をWindowsのスタートメニューから起動して利用してください。

macOSの場合

macOSで ターミナル.app を起動したあと、

git --version

と入力し、インストールされている git のバージョンが表示されることを確認してください。インストールされていなければ、この操作でインストールも勧められます。

インストールがうまくいかない場合は、同じく ターミナル.app で

xcode-select --install

と入力し、インストールしてください。

それぞれのインストール方法の詳細

git for windows や xcode-select それぞれのインストール方法の細かい手順は、解説サイト等を検索し、参考に進めてみてください（その方が速いです）。

Git を使って成果物の管理や公開をするためには、リポジトリホスティングサービスが必要です。今回は GitHub というサービスを利用します。

GitHub アカウントの作成

https://github.co.jp/ の サインアップ からGitHubアカウントを作成してください。メールアドレスは、こだわりがなければ大学のメールアドレスで良いです。(もし、興味がある人は GitHub Education を申請しておくとお得です）

サインアップの方法は以下に解説されていますが、わかりづらい場合は他に検索した記事などを参考にしても構いません。

GitHub へのサインアップ
- 新しい GitHub アカウントへのサインアップ
- メールアドレスを検証する

プランは、Free($0/月)で大丈夫です。

トークンの取得

皆さんのパソコンの Git Bash (Windows) or ターミナル.app (macOS) から GitHub アカウントを利用するには、個人アクセストークン（PAT）が必要です。

PATは一人一人異なるので、アカウントの作成後に以下の手順でトークンを発行してください。

トークンは、一度しか表示されません！忘れない・無くさないように記録・記憶しておいてください。

個人アクセストークンを使用する
- personal access token (classic) の作成
- トークンの期限は期限なし、期限をつけたい方は90日など長いものを選択していただいて大丈夫です。

日本Javaユーザーグループが、初心者向けの映像を用意しています。これを今回のVOD教材としますので、 Git / Github の使い方を学んでください。

（先週、予習として指示をしていた動画ですので、すでに閲覧済みの場合は動画を見ずに進んでいただてもかまいません。）

動画を見て、一緒に操作する（ハンズオン）

Youtubeで一般に公開されているものなので、必要に応じて倍速再生などしてみてください。

プログラミング応用の範囲では、以下のコマンドをよく使います。動画の真似をしながら、まずはこれらのコマンドを練習してください。

git add
git commit
git push
git branch
git switch
git merge

Note That

近年では、コンピューターやプログラミングの入門段階でUNIX/LinuxなどのOSに触れる機会が乏しく、Git Bashの様なコマンドラインインターフェース（CUI）でOSやファイルを操作することに慣れていない学生も多くいるようです。

しかしながら情報系の分野では、プログラミングやソフトウェア開発はもちろん、クラウド等も含めたインフラ構築などにCUIを主として使うことも多く、（現場での開発はもちろん）今後のプログラミング授業等でもCUIを用いた操作が指示されます。

例えば、下記の単語がどんなことを命令・実行するのか・どんなことを表しているかわからない人は、個別にWebやChatGPTなどで調べたり、Git Bash (Windows) or ターミナル.app (macOS) で実際に試して練習してみると良いと思います。

特に ls, cd コマンドはこの課題でもよく使います。

Linuxコマンド

ls, cd, vi, mv, cp, rm
および、これらのコマンドオプション

情報の基礎知識

絶対パスと相対パス
CUIとGUI、およびその違い

みなさんが Git / Github を学んだ成果を提出してください。

まずは、課題の提出場所となる Github Classroom （授業用のGithubリモートリポジトリ）に準備をしてもらいます。

課題提出場所にアクセス

ポータルサイトの添付資料にある「課題提出用のGithub」のURL にアクセスしてください。

Githubのサインイン画面が表示される場合がありますので、その場合はサインインしてください。

サインイン画面

学籍番号の選択

授業の課題名と、学籍番号の一覧が表示されます。

自分の学籍番号を探して、取り違えのないように慎重に選択 してください。

学籍番号選択画面

一度、確認画面が出ますので、 Accept this assignment ボタンを押してください。

確認画面

課題の提出場所の作成

GitHub上にあなたの課題提出場所が作成されます。

下の画面が出てから2〜3分ほど待って から、ブラウザの更新ボタンを押してください。

作成中画面

作成が完了すると、あなたのインターネット上の課題提出場所（リポジトリ）のURLが表示されるので、コピー します。

https://github.com/cist-ise-2024/ppu-git-xxxxxx（xxxxxxの部分は各自異なる）のようなURLになります。

作成完了画面

前のパートで作成した あなたのインターネット上の課題提出場所（リポジトリ）のURL https://github.com/cist-ise-2024/ppu-git-xxxxxx（xxxxxxの部分は各自異なる） を、ブラウザで開きます。

初回画面

git cloneの準備

code ボタンを押し、clone用のURLをコピー します。(URLの横のボタンを押すと簡単にコピーできます)

clone画面

git clone

あなたのPCに、課題提出場所のリポジトリを clone （複製）します。

ホームフォルダ等で Git Bash (Windows) or ターミナル.app (macOS) のコマンドを実行してください。

git clone https://github.com/cist-ise-2024/ppu-git-xxxxxx.git

cloneすると、ppu-git-xxxxxx （xxxxxxの部分は各自異なる）というフォルダが作成されます。

エクスプローラー(Windows) or Finder(macOS) から、 前パートでcloneしたあなたのPCの ppu-git-xxxxxx フォルダを表示 します。

フォルダの中にある README.md を、手元のPCの メモ帳やテキストエディタ で開いてください。（以前の課題で指示した Visual Studio Code がおすすめです。スマホアプリのメモ帳やWordなどのワープロソフトは結果が変わってしまうことが多い ので、オススメしません）

README.mdを開くと、以下のようなコードが表示されます。（※細かい数字や改行の位置は、人によって異なります）

初期README

元から書かれている

# 学籍番号氏名

の表記を、あなたの実際の学籍番号氏名に上書きしてください。 下の画像は例ですので、自分自身の学籍番号と氏名にしてください。

書き換えREADME

Git Bash (Windows) or ターミナル.app (macOS) で ppu-git-xxxxxx フォルダに移動し、コミットを行います。

フォルダを移動

cd ppu-git-xxxxxx

うまく移動できない場合は、フォルダのパスを調べて指定してください。

ファイルがあるかを確認

ls

README.md　のファイルの名前が表示されるはずです。

commit コマンド

git add README.md
git commit -m "課題の準備をおこなった"

push コマンド

あなたのPCの ppu-git-xxxxxx フォルダのバージョンコントロール情報を、インターネット上の課題提出場所（リポジトリ）に反映します。

git push origin master

課題が、あなたの課題提出場所（リポジトリ）のURL https://github.com/cist-ise-2024/ppu-git-xxxxxx に提出されます。

あなたの課題提出場所（リポジトリ）のURL https://github.com/cist-ise-2024/ppu-git-xxxxxx をもう一度ブラウザで開き、書き換えたファイル（README.md）が表示されていることを確認してください。

課題提出の確認

ブランチを作成

master ブランチから、課題を続けるためのブランチを作成します。

git branch kadai1

注目するブランチを kadai1 ブランチに変更します。

git switch kadai1

ブランチを切り替えた状態で、あなたのPCの ppu-git-xxxxxx フォルダの中に、あなたが第7回分（IoTプログラミング課題1）で作成したHTMLファイルをコピー&ペーストしてください。

（ここでは、ファイル名を JSTraining.html であるとして進めます）

commit コマンド

コピー&ペーストしたファイルをコミットします。

git add JSTraining.html

（ファイル名が異なる場合は適宜調整してください）

git commit -m "課題1のファイルを追加した"

push コマンド

あなたのPCの ppu-git-xxxxxx フォルダのバージョンコントロール情報を、GitHub上にあなたの課題提出場所(リポジトリ)に反映します。

git push origin kadai1

提出されているかの確認

あなたの課題提出場所（リポジトリ）のURL https://github.com/cist-ise-2024/ppu-git-xxxxxx をもう一度ブラウザで開き、下記の画像の①・②の順でクリックした上で、kadai1 ブランチでのみ追加したファイルが管理されていることを確認してください。

（この操作は switch と同様に、ブラウザ上で着目するリポジトリを変更しています）。

ブランチの切り替え

表示結果

課題提出の確認

同様にブラウザ上で master に着目するブランチを変更すると、master ブランチではJSTraining.htmlが管理されていないことを確認してください。

準備

あなたのPCで、注目するブランチを master ブランチに変更します。

git switch master

挑戦

以降の指示は、ここまでの実演に体験したことに基づいて、自分なりにコマンドを入力して挑戦をしてください。

master ブランチから、kadai2 ブランチを作成する
注目するブランチを kadai2 ブランチに切り替える
ブランチを切り替えた状態で、あなたが第8・9回分（IoTプログラミング課題2）で作成したファイル（ファイル名を HeartRate.html とする）をコピー&ペーストする
コミットする
pushする（ git push origin kadai2 ）
https://github.com/cist-ise-2024/ppu-git-xxxxxx をもう一度ブラウザで開く
ブラウザ上でも kadai2 ブランチに切り替え、master, kadai1, kadai2 ブランチで別々の状態でバージョンコントロールをしていること確認する。

準備

あなたのPCで、注目するブランチを master ブランチに変更します。

git switch master

merge コマンド

mergeコマンドを使い、kadai1 ブランチでの変更結果を master ブランチに取り込みます。

git merge kadai1

この際、もし確認を促すような文章がでた場合は、 :wq などを入力して保存・終了してください。

push コマンド

あなたのPCの ppu-git-xxxxxx フォルダのバージョンコントロール情報を、GitHub上にあなたの課題提出場所(リポジトリ)に反映します。

git push origin master

提出されているかの確認

https://github.com/cist-ise-2024/ppu-git-xxxxxx をもう一度ブラウザで開き、ブラウザ上の master にも、kadai1 でコミットした JSTraining.html が管理されていることを確認してください。

課題提出の確認

あなたのPCで、注目するブランチを master ブランチに変更します。

git switch master

挑戦

以降の指示は、ここまでの実演に体験したことに基づいて、自分なりにコマンドを入力して挑戦をしてください。

なお、kadai2 ブランチの失敗などでブランチ名を変更した場合は、その変更に合わせて実施してください。

master ブランチに、kadai2 ブランチをマージする
- この際、もし確認を促すような文章がでた場合は、 :wq などを入力して保存・終了してください。
pushする（ git push origin master ）
https://github.com/cist-ise-2024/ppu-git-xxxxxx をもう一度ブラウザで開く

提出されているかの確認

ブラウザ上の master にも、kadai1 でコミットした JSTraining.html と kadai2 でコミットした HeartRate.html が管理されていることを確認してください。

課題提出の確認