はじめに
みなさんはバージョン管理、どうやっていますか？ 私は断然Git派です。
下記のように旧バージョンのファイルの別名保存でバージョン管理している方は大変だと思います。
- ファイル名_yyyymmdd.js
- ファイル名_var1.1.js
etc...
この方法はハードディスクの容量を圧迫したり、履歴を追いにくかったり、間違えて削除してしまう等の問題がたくさんあります。
このアナログなバージョン管理の問題と縁がないツールがGitなのです。
当記事では実際にじゃんけんゲームの開発をしながらGitについて学びます。
ついでにJavaScriptについてもちょっとだけ学ぶことができます。
GitHubは興味あるが使ったことない、プログラミングを学びたいが何をしたらいいかわからない方などにオススメです。
JavaScriptを書いてみたいという方にも少しはオススメできます。
今回は数あるGitのツールの１つ、GitHubを使用します。
なぜGitを学ぶのか
私がGitを学んだ1番の理由は「モダンなプロジェクトはだいたい導入している」からです。
Gitが扱えないとモダンなプロジェクトに参画しにくいです。
参画の選択肢がレガシーなプロジェクトに絞られてしまうことは自身にとって大きな損失です。
エンジニアとしての価値を高めたいと思っている方はGitを学んでおくべきだと思います。
もちろんGitには採用するに値するメリットがあります。
それはローカルリポジトリの存在です。
通常のチームの開発では1つのファイルのコミットに対して全員が影響を受けますが、Gitのローカルリポジトリでは個人PCにのみにコミットされるので
他の開発者への直接的な影響がありません。これにより下記のメリットが生まれます。
- 個人単位でレビューがしやすくなる。
- コードの間違いをコミット履歴を追いながら探しやすい。
- 過去のソースコードに簡単に戻すことができる。
- サービスがダウンしてもローカルで開発を継続できる。
まだまだメリットはあると思いますがキリがないのでこれくらいにしておきます。
Git環境構築
Gitのインストール、GitHubの設定は下記の記事が参考になります。
Windows
Windows10にGitをインストールして初期設定する
[Windows 10] Git BashでGitHubにSSH接続
macOS
じゃんけんゲームについて
機能
- 1人のプレイヤーがCOMとじゃんけんで対戦可能
- 勝敗の結果は画面に表示
サーバー環境
| 名前 | 役割 |
|---|---|
| HTML | ページ構成 |
| CSS | デザイン全般 |
| JavaScript | ゲームロジック |
概要
あなたは今日からじゃんけんゲームの開発プロジェクトに携わることとなりました。
しかし、そのじゃんけんゲームには前任者が残したバグがあり、まともに遊べません。
Gitに触れながら4つの課題をクリアし、じゃんけんゲームを遊べるようにしましょう。
GitHubへのリンク
Gitの構成について学ぶ
実際に手を動かす前にGitがどのようにプロジェクトを管理しているか学びましょう。
図に表すと下記のような形になります。
では一つ一つ説明していきます。
リモートリポジトリとは
サーバー上に配置されているファイルやディレクトリの状態を記録する場所です。
このリモートリポジトリは他の人と共有することができます。
ローカルリポジトリとは
PC上に配置されているファイルやディレクトリの状態を記録する場所です。
皆さんがPCで作業する際はこのローカルリポジトリを使います。
リモートリポジトリから他の人が作業した内容をローカルリポジトリに反映させることもできます。
インデックスとは
ローカルリポジトリにコミットするファイルを登録する場所です。
ここに登録されたファイルのみローカルリポジトリにコミットされるので、コミットが不要なファイルがある際は個別に登録するといいでしょう。
ワークツリーとは
実際に作成、修正をしたファイルがあるディレクトリのことです。
じゃんけんゲームのリポジトリを複製する
教材となるリポジトリは別の方も使うのでご自身のGitHubアカウントで、教材用のリモートリポジトリを作成しそこに複製をしてください。
下記の図のようなイメージです。
実際にやってみる
GitHubで複製先リモートリポジトリを作成します。
ここではtestという名前の複製先リモートリポジトリを作成しました。
複製元のリポジトリをクローンします。
通常git cloneコマンドではリモートリポジトリの名前のディレクトリが作成されます。
今回は複製をするのでディレクトリ名を変更してcloneしましょう。
git cloneコマンドではURLの後に変更後のディレクトリ名を指定できます。
先程作成した複製先リモートリポジトリのtestをディレクトリ名としました。
※GitHubがパスワード認証を廃止したため下記のコマンドではcloneできない可能性があります。
エラーが出て先に進めない方は下記記事を参考にしてください。
GitHubでパスワード認証廃止による認証エラーが出た件
$ git clone https://github.com/okioka/GitTrainingRPS test
cloneしたローカルリポジトリへ移動します。
$ cd test
現在のremote urlを確認します。
$ git remote -v
origin https://github.com/okioka/GitTrainingRPS (fetch)
origin https://github.com/okioka/GitTrainingRPS (push)
remote urlを複製先リモートリポジトリに変更します。
$ git remote set-url origin https://github.com/okioka/test
remote urlが変更されたことを確認します。
$ git remote -v
origin https://github.com/okioka/test (fetch)
origin https://github.com/okioka/test (push)
複製先リモートリポジトリにpushしてください。
$ git push
これでリポジトリの複製が完了しました。
課題をissueで管理する
issueとは
こちらはGitではなくGitHubに備わっている機能の1つです。
名前の通りリポジトリの課題や問題を管理するための機能です。
開発チームによって様々な運用方法がありますが、私は課題解決のタスク管理ツールとしてissueを使っています。
せっかくある便利な機能なので4つの課題をissueで管理してみましょう。
実際にやってみる
issueの一覧はリポジトリ内のissueディレクトリに入っています。
ここではissue#1.mdを基にissueを作成します。
まずは、GitHubの画面からissueを開きNew issueボタンをクリックします。
issue#1.mdの内容を転記しSubmit new issueボタンをクリックします。
残りの３つのissueも同じ手順で作成してください。
次からいよいよ開発です。
issue#１を例に進めていきます。
issueごとにブランチを切る
ブランチとは
ブランチは履歴を分岐して記録するためのものです。
ブランチの切り方も開発チームによって運用方法がありますが、私はissueごとにブランチを作成しています。
Gitが自動で作成するmasterブランチというものがあります。
基本的にmasterブランチにはリリース可能な状態にしておき、直接作業したりコミットすることはありません。
分岐したブランチが結合したものがmasterブランチです。
イメージとしては下記の図のような感じでしょうか。
ブランチ名の重複はNGなので命名規則を作ってそれに倣った命名をするとよいと思います。
私はブランチ名に「issue番号_ 何をするか_機能」と命名しています。
ここでは「1_feature_update_draw_text」と命名することにします。
実際にやってみる
ブランチを作成します。
$ git branch 1_feature_update_draw_text
ブランチを切り替えます。
$ git checkout 1_feature_update_draw_text
これでブランチの切り替えが完了しました。
現在のブランチを知りたい場合は下記コマンドで確認できます。
$ git branch
* 1_feature_update_draw_text
master
ブランチの一覧が出力されました。
*がついているブランチが現在のブランチです。
開発
では実際に開発してみましょう。
リポジトリ内のindex.jsが対象のコードです。
変更をインデックスに追加する
開発が完了したら変更したファイルをインデックスに追加します。
$ git add index.js
git statusコマンドでaddが正常に動作したか確認することができます。
これはブランチの状態を確認する事ができるコマンドです。
様々な場面で使うことがあるので覚えておきましょう。
$ git status
On branch 1_feature_update_draw_text
Changes to be committed:
(use "git restore --staged <file>..." to unstage)
modified: index.js
※余談ですが、ワークツリーの変更されたファイル、削除されたファイル、新しく作られたファイル全てをインデックスに追加することもできます。
$ git add -A
変更をローカルリポジトリにコミットする
インデックスに存在する変更をローカルリポジトリにコミットします。
git commitコマンドはオプションにmを設定することでコメントを指定することができます。
変更履歴がわかりやすくなるメリットがあるので簡単なコメントを指定しておくとよいでしょう。
$ git commit -m 'あいこのテキスト修正'
コミットのログを確認することもできます。
$ git log
commit 76d21345a1fd12e61b4477b7b40da41208d6778e (HEAD -> 1_feature_update_draw_text)
Author: 木岡おき <okioka@Oki-Special.local>
Date: Sun May 16 04:10:51 2021 +0900
あいこのテキスト修正
ログは:qで閉じることができます。
変更をリモートリポジトリへプッシュする
ローカルリポジトリの内容をリモートリポジトリへプッシュし反映させます。
初回のプッシュ
$ git push --set-upstream origin 1_feature_update_draw_text
２回目以降のプッシュ
$ git push
プルリクエストを承認・マージする
プッシュすることでGitHub上のリモートリポジトリにプルリクエストが発生します。
プルリクエストとは
ローカルリポジトリの変更内容を開発チームのメンバーに通知する機能です。
本来であればコードレビューの担当者が確認をし承認するのですが、今回は一人で開発することを想定しているので手順のみを記載します。
※ちなみにこんな感じで開発者とレビュー担当者がやり取りすることができます。
マージとは
分岐したブランチをmasterブランチに統合することをマージと言います。
実際にやってみる
GitHubの画面に現れたCompare & requestボタンをクリックしましょう。
作業したissue番号を入力しCreate pull requestボタンをクリックします。
Marge pull requestボタンをクリックします。
Confirm margeボタンをクリックします。
ブランチの修正内容がリモートリポジトリに反映されました。
これでプルリクエストの承認・マージは完了です。
issueをCloseする
タスクが完了したのでissueをCloseしましょう。
対象のissueを開き、下の方までスクロールするとあるClose issueボタンをクリックします。
ここまでの作業で課題の１つが完了しました。
残りの３つの課題も同じ手順で進めましょう！
おわりに
最後まで読んでいただきありがとうございました。
この記事が皆さんの学習の役に立てば嬉しいです！