「神戸電子専門学校 ゲーム技研部 Advent Calendar 2023」3日目の記事です。
(今週は自分の枠になります。遅れないようにがんばります、、、)
はじめに
みなさんはGit、GitHubでのソースコード管理はしているでしょうか？
専門学生をしていると周りで「PC壊れて修理出したらデータ消えました」とか「昨日までは動いてたんですけど今日になって動かなくなりました」とか(残念なことに)よく聞きます。
私は実験でもなんでもプロジェクトがあるたびにGitHubでリポジトリを作って、新規機能や修正したものをコミットするようにしています。
(その習慣をつけることによって、草(その日のコミット数を色付けしたもの)も生えてきています。↓これ)
Gitと聞くと、git clone git@github.com:xxx/xxx.gitとかgit fetchとかgit marge origin/masterとかGit Commandを覚えないと使えない、、、と思うかもしれませんが、実はGUI上で操作できるGitClientも存在しています。
- SourceTree
- Fork
- GitKraken
等々...
これらはすべてアプリケーションとしてインストールするものです。ただ自分みたいに、
「一人で開発するのにここまでの機能はいらないし、何かClientに問題あったとき[1]自分で調べたり、他のClientに切り替えるのも面倒くさいし、なによりインストールとか設定とか使い方とか覚えるのめんどくさいな、、、」
といったぼっち系面倒くさがり開発者(自分)がいるかもしれません。そんな中でおすすめしたいのがVisual Studio Code(以下VSCode)とその拡張です。その理由として
- タダ！&広告ナシ！(開発者に感謝)
- VSCode自体でも開発ができるので、アプリケーションを切り替えなくても済む
- その場でソースコード編集ができる(SyntaxHighlight付で)
- 拡張機能でより使いやすくすることも可能(GitHubCopilotとも連携可能)
といった使いやすさや機能が充実している点が挙げられます。なので、初めてGitを触るならこれで十分だと思います。というわけで、この記事ではGitHubとVSCode上でのGit操作について説明していきたいと思います。
環境
- Windows 10 64bit
(この説明ではWindows Sandboxを使っている部分があります)
GitHub account registration
GitHubとは簡単に言うとプロジェクトのクラウドストレージみたいなものです。プロジェクト1つ単位の区切りをリモートリポジトリといいます。(GitHub Projectsとは別物です。(ここまで適当に言ってると怒られそうですが、、、イメージなので許して))
ここにソースコードをアップロードすることによって、ローカル(PC)に何か障害があってアクセスできなくなっても、クラウド上にあるので再取得することができます。
右上のSign upからGitHubのアカウントを作成します。ここからの説明は割愛しますが、メールアドレスとパスワードを設定するだけなので、全て英語ですがブラウザの翻訳機能を使えば登録できると思います。
VSCode Install
VSCodeのインストールです。今回はWindows想定で進めていきます。
こちらの右上にあるDownloadをクリックします。
左のWindowsの項目からSystem Installerを選択します。(これはそれぞれの環境で合わせてください。)
これでダウンロードが始まります。
インストールの説明は割愛しますが、特に難しい項目もないはずなのでNextを押していけばインストールできると思います。
この画面になっていればインストール完了です。言語変更や拡張機能のインストールについては、Gitを導入した後に説明します。
Git Install
Gitを操作するためのアプリケーションをインストールします。GitHubとは別物で、ローカル環境でのバージョン管理ソフトです。このアプリケーションを経由して、GitHubにアップロードするというわけです。
これもWindows想定で説明してきます。
こちらのトップページにあるDownloadsをクリックします。
そして、Windowsを選択します。
64-bit Git for Windows Setup.を選択します。これでダウンロードが始まります。Gitのインストールについては、設定項目がいくつかあるので、画像で説明していきます。
インストーラーを起動した画面です。ライセンスのことが書いてあるので、同意される場合のみNextを押しましょう。
インストールする場所を指定します。デフォルトで問題ないと思います。
インストールするコンポーネントを選択します。これもデフォルトで選択されているコンポーネントで問題ないと思います。
スタートメニューフォルダに登録する名前を決定します。これもデフォルトで問題ないです。
ここが変更するポイントです。今回、VSCodeをインストールしているので、Use Visual Studio Code as Git's defafult editorを選択します。これはGitでソースファイルを開く際にどのエディターを開くかを指定します。
これは変更しなくてもいいです。私は、GitHubのデフォルトのメインブランチ名がmainになったので変更しています。変更しなくても何も問題ないです。
これもデフォルトで問題ないです。推奨されている設定(Recommendedと書かれている項目)にしておくと、GitのコマンドをWindows command promptやWindows Powershellから実行できるようになります。(環境変数のPATHにgit.exeへのパスが追加されます。)
この二つの項目に関してもデフォルトにします。
これも変更しなくてもいいですが、私は改行コードをLFで統一しているので、Checkout as-is, commit Unix-style line endingsにしています。
ここまでの項目もデフォルトで問題ないと思います。
これでインストールが完了します。
導入できているかどうか確認します。検索欄でcmdでコマンドプロンプトを開きます。(Windows 11ならWindows Terminalが開くはずです)
git --versionを実行して確認します。現在のバージョンが表示されていれば導入OKです。
前準備
まず、GitにGitHubで登録したユーザー名とメールアドレスを登録します。
バージョンを確認したのと同じ画面で、
git config --global user.name 名前
git config --global user.email メールアドレス
と入力して登録します。
個人番号が書いてある為、一部加工してます。
エラーなく登録が完了すると、%userprofile%\.gitconfigというファイルが生成され、そこにデータが保存されます。(なので消さないでください。)
SSH接続
https接続でも(多分)大丈夫ですが、後々問題が起こる可能性があるのでSSH接続用のセットアップをしておきます。
コマンドプロンプトで
ssh-keygen -t rsa
と入力します。色々聞かれますが、とりあえずEnterを三回押せば鍵が生成されます。次に公開鍵をコピーします。
clip < .ssh/id_rsa.pub
これでクリップボードにコピーされます。
この鍵情報は、%userprofile%\.sshに保存されます。
次にこの公開鍵をGitHubに登録します。GitHubのSettingsからSSH and GPG keysの項目をクリックします。
そしてNew SSH keysを選択します。
TitleはなんでもOKです。Keyに先ほどコピーした公開鍵を登録します。特徴として、ssh-rsaからはじまり、PCのアカウント名で終わっています。Add SSH keyを押して登録は完了です。
SSH通信ができるかどうか(登録が正しくできているか)確認してみます。コマンドプロンプトで
ssh -T git@github.com
を実行してみてください。
初めて実行する場合は、GitHubのFingerPrintを登録しますか？と聞かれるのでyesと入力します。その後、Hi ユーザー名! You've successfully authenticated, but GitHub does not provice shell access.と表示されればOKです。
VSCode拡張機能の導入
まず日本語化です。
左のバーにあるExtensionsを押し、検索欄にjapaneseと打ち一番上に出てきたJapanese Language Pack for Visual Studio Codeという拡張機能をインストールします。
インストールが終わると言語の変更と再起動を求められるので、右下の青いボタンをクリック。これでVSCodeが日本語になりました。
次にGit関連の拡張を導入します。
拡張機能の検索でgitと検索してTop3に出てくる拡張機能を導入します。私が導入したのは
Git Graph Git History GitLens - Git superchargedです。とりあえずこの3つを入れておけば問題ないと思います。
使い方
まずGitHubでリポジトリを作成します。
Repositoriesをクリックし、右上のNewをクリックします。
ここではリポジトリの初期設定を変更できます。名前は適当にRepositoryForVSCodeとしておきました。また、外部に公開したくない場合は、PublicからPrivateに変更することで非公開リポジトリになります。その他の設定はとりあえずしなくてもOKです。
これで空の非公開リポジトリを作成できました。次にVSCodeと紐づけ(クローン)をします。Quick setupのところにあるSSHを選択し、その右の欄にあるURLみたいなものをコピーします。
git@github.com:ユーザー名/RepositoryForVSCode.git
VSCodeの画面で、ソース管理を選択します。左のリポジトリのクローンをクリックします。
画面上部にURLを貼り付ける枠が出てくるので、先ほどコピーしたものを貼り付けて、EnterもしくはリポジトリのURL git@github.com:ユーザー名/RepositoryForVSCode.gitをクリックします。
ローカルではどこに保存するかを選択します。とりあえずVSCodeFolderというフォルダを作り、そこを選択しました。
紐づけが成功すると、クローンしたリポジトリを開きますか?という確認ダイアログが表示されるので、開くをクリックします。
このフォルダー内のファイルの作成者を信頼しますか?という確認ダイアログがでるので、はい、作成者を信頼しますをクリックします。信頼をしておかないと、拡張機能が制限される制限モードで開かれるので注意してください。
これで紐づけまでできました。
ファイルを追加したい/変更を保存したい。
エクスプローラーで新しいファイルを選択します。
今回はtestfile.txtとしておきます。中身は適当に書いています。
編集が終わったら、ソース管理の項目に通知アイコンみたいなものが表示されています。これは変更があった場合のファイルの数を表しています。
変更の下にあるファイルをクリックすると、前回との差分が表示されます。今回は新しく追加したので、赤い部分(前回の部分)には何も表示されていません。またファイルをマウスオーバーすると横に出てくるアイコンは、それぞれファイルを開く 変更を破棄 変更をステージとなっています。
ファイルをアップロードするためには、変更をステージをクリックします。そして、コメントを書き、コミットをクリックします。このコミットは、ローカルに保存しただけなので、最後にGitHubにアップロードする作業が必要です。
ソース管理の右にある三点リーダーをクリックし、プッシュを選択することでアップロードが完了となります。
GitHubの方でも確認してみると、アップロードされているのが確認できると思います。
過去の変更履歴を確認したい。
ソース管理にあるグラフみたいなマークView Git Graph (git log)をクリックします。
するとGit Graphというタブが現れ、今までのコミット履歴が見れるようになります。対象のコミットを選択すると、そのコミットで変更したファイルやユーザー名が表示されます。
調べたいファイルを選択すると、新しいタブが開き、そのコミット時での変更が表示されます。
いつの間にかバグがあった。デバッグしたい。
過去のコミットを遡って一時的にそのコミットに戻すことができます。
戻したいコミットを右クリック→Checkout...をクリックします。
確認画面です。Yes, checkoutを選択します。
コミットのコメントの横の青い点が移動していると思います。これは現在のコミットの場所を表しています。グラフを見たらわかる通り、最新のコミットも残っているのでまた戻すこともできます。最新のコミットに戻りたい場合は、Checkout...ではなく、mainと書かれている部分をダブルクリックすると最新のコミットに戻せます。
テキストを確認してみると、前のバージョンに戻っていることが確認できます。
バグを特定できた。このコミットまで戻したい。
特定のコミットまでもとに戻すこともできます。これはCheckoutのような一時的なものではなく、元に戻すことを決定することです。戻したいコミットを右クリック→Revert...を選択します。(ちなみにRevertのRevertもできます。)
確認画面です。Yes, revertをクリックします。
すると新しい変更が追加されました。Revertはそれまでのコミットをなかったことにするのではなく、元に戻すという新しいコミットを作成します。
コメントもすでに書かれているので、そのままコミットできます。コミットすると元に戻す変更が適用されました。
その他便利な機能
gitignore
Pythonなら*.pyc、C++なら*.obj pbd等々、中間ファイルやビルドデータなど不要なファイルもあります。ファイル単位でコミットするかどうか決められますが、ソース管理の変更一覧にずっと残り続けるのは邪魔です。そこでGitには特定のファイルを除外してくれる機能があります。
自分のVSCodeの環境でプロジェクトを開いているので、エディター画面の見た目が大きく変わっている部分があります。ご了承ください。
このように、私が作成しているPythonのプロジェクトではソース管理の変更に大量のファイルが列挙されていますが、これは本来アップロードしないファイルです。
プロジェクトのルートディレクトリに.gitignoreというファイルを作成し、そこにパスを指定するだけで、このように変更には何も表示されなくなりました。これで「間違えてアップロードしてしまった」といったことをなくせます。
また、プログラミング言語毎のtemplateはここにあります。
editorconfig
これはGitの機能ではないですが、ソースコードのスタイルを統一するという機能を紹介しておきます。改行コードや文字コード、インデントスタイルのタブorスペース等々ソースコードを書くだけでもいろいろなスタイルがありますが、editorconfigを利用することで統一することができます。
スタイルを統一する理由として、個人開発ではあまり関係ないかもしれませんがチームでの開発になるとそれぞれの改行コードやインデントが違うだけで変更した扱いになり、変更を圧迫します。なので統一しておいたほうがいいです。
エディターによってはデフォルトで認識してくれるものもありますが、VSCodeは拡張機能を導入する必要があります。EditorConfig for VS Codeをインストールします。
設定ファイルは.gitignoreと同じ階層に.editorconfigという名前で作成します。
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.{c,h,cc,hh,cpp,hpp}]
indent_size = 4
charset = utf-8-bom
[*.cs]
indent_size = 4
[*.{hlsl,hlsli}]
indent_size = 4
[*.py]
indent_size = 4
これは私が実際に設定している設定ファイルの一部です。それぞれの詳細は省きますが、基本的にはインデントスタイルは2スペース、改行コードはLF、文字コードはUTF-8にしておき、プログラミング言語毎にインデントを変更したりしています。
おわりに
かなり画像を多めにして説明しました。この記事でGit(Hub)導入の敷居が下がってプロジェクトが開けない、データが消滅した等の事故が減らせるようになればな、、、と思います。
Discussion