文系卒のWebエンジニアの成長と備忘録
エンジニア経験を生かして発信するメディアサイト

【プログラミング初心者向け】GitHubで行うチーム制作やコードレビュー

github

こんにちはYsです。皆さんプログラミングを頑張っていますでしょうか。

プログラミングって個人作業、共同作業(チーム作業)も可能なので会社に勤めている方ではない限り、基本的には個人作業で孤独に行なっていると思います。

特に、スクールに通っているわけではない独学でプログラミングを学習している方からするとかなり孤独だと思います。

その孤独さも問題なのですが、独学にはもう1つ問題があります。
それは…コードの改善点を指摘してくれる人が誰もいない!!

そうなんです。独学で勉強していると基本的には以下の流れが一般的かなと思います。
自分で考える→自分で書く、作る→終わり

ここで問題なのは全て自分だけで完結しているので、視野が狭くなりコードの設計は適当になりがちになったり、グチャっとしたコードになったりなど負の状況になります。

それが習慣化されると、実際に働き始めた時に苦労してしまうこともあります。

なので、解決策を打開するべく策があります。
それは…『GitHubなどを使用して人にソースをレビューしてもらう』です。以下のようなメリットがあります。

  • 自分では気付けないバグに気付ける
  • より良いコードの書き方などの改善的を貰える
  • 他人にを読んでもらうことを意識するので綺麗になる…etc

また、下記のやり方はチームで何かを作るときにも役立つやり方なのでご紹介します。

【初心者向け】GitHubの使い方

自分だけの開発ではGitを使用していない人もちらほらいると思いますが、サーバーに自分の作ったものをアップロードする際に、Gitを使えば一瞬で出来るで勉強しておいて一切損がありません。

むしろ会社の業務では使用していない会社はありません。それくらい重要です。

GitHubの会員登録

Githubを使用するためには会員登録が必要なので会員登録を行います。
公式サイト≫≫ Github 公式サイト

『Sign up』で登録画面に遷移します。そうすると以下のような必須項目を入力する欄があるので入力を行います。入力が終わったら『Create an account』をクリック。

Github 会員登録

プランの選択がありますが。『Free』で問題ありません。以前のGitHubは有料ではないとプライベートリポジトリという第三者からソースコードを閲覧させないための設定が使用できませんしたが、現在は使用できます。

Github Free Plan

Gitの設定を行う

会員登録が出来たら、あとは実際にターミナルからGitを操作できるように設定が必要です。Macの方はGitがデフォルトで入っているので何も気にすることはありませんが、Windowの方はGitのインストールと、Gitが使用しやすいターミナルを用意します。

Windowsの方

WIndowsの方は以下のサイトからGitと、使いやすいターミナルが入手できるのでダウンロードしてください。
≫ Git for Windows

Git Configを修正してGitを使用出来るようにしよう

Githubに何かしらの制作物をアップロードする時に、何も登録していないと毎度毎度メールアドレスの入力とパスワードを求められます。それでは面倒なので予め設定してしまいます。

以下のコマンドがGitのアカウントを識別するものですが、ここに先ほど登録したアカウント情報の値を入れていきます。
git config user.name
git config user.email

$ git config user.name = hogehoge

$ git config user.email = hoge@email.com

これで毎回会員登録情報を入力しなくても良いようになりました。

GitHubでリポジトリを作成する

今回は1番簡単なやり方でリポジトリを作成します。GitHubの自分のアカウントページに『Repositoies』というタブがあるのでクリックします。

そのページにいくと、『New』というボタンがあるのでそれをクリックします。

Your_Repositories

Create a new repositoryという画面に出たら以下の部分を入力します。

  • 【Repository name】

    そのファイルの名前を入力(例:Sample)
  • 【Description (optional)】

    作成するファイルの説明を入力
  • 【Public / Private】

    リポジトリを外部から閲覧可能(public)か、閲覧不可(private)を選びます。今回はPublicを選択
  • 【Initialize this repository with a README】

    ファイルの詳細を書いたりするファイルです。今回は入れます。

入力後に作成されると以下のような画面に遷移します。ここまできたら、実際にGiuHub上にあるリポジトリを自分のPCにダウンロード(クローンしていきます)

以下の画像の赤枠(clone or download)をクリックするとHTTPSで、あなたのリポジトリのURLが出てきます。これをコピーします。

github clone

GitHubからリポジトリをクローンする

先ほどリポジトリのURLをコピーしたので、これを使用して自分のPCにクローン(ダウンロード)します。

コマンドは以下で行います。
git clone {先ほどコピーしたURL}

$ git clone https://github.com/{user_name}/{repository_name}

【初心者向け】GitHubでのチーム開発

上記で書いていた『自分だけで開発をしない環境を作る』ということですが、要は自分以外の人にソースコードを見てもらい、指摘をもらいながら自分では気付けない部分や、技術の向上を測るのが目的。

なので、他人からソースコードを見てもらい、コメントを貰える設定を行います。

GitHub自分のリポジトリに他の人を招待する

先ほど作成したリポジトリの詳細画面に『Settings』というタブがあります。そこをクリックし設定画面に遷移します。

設定画面に入ったら『Collaborators』という項目があるので、クリックします。画像赤枠部分です。
そしてソースコードを見てもらいたい人のGitHubのアカウント名、もしくはEmailアドレスを入力し『Add Collaborators』ボタンを入力します。これで他の人がコメントを付けられるようになります。

GitHub Collaborators

GitHubでのチーム開発

人にコードを見てもらう準備は出来たので、これから実際に自分のソースコードを他人に見てもらうように自分のリポジトリを更新します。

自分のソースコードを他人に見てもらうために行う事

細かい用語の説明はしませんが、以下の流れで行います。

  1. リポジトリで『新規のブランチ』を作成する
  2. 上記で作成した『ブランチ』の状態で新規ファイルを作成
  3. 新規ファイルをadd、commit、push
  4. プルリクを作成する

GitHubでブランチの確認、作成を行う

基本的にはブランチはデフォルトはmasterで設定されていますが、これではプルリクが作成されません。今あるブランチを確認するにはgit branch -aをターミナルに打ち込みます。おそらくデフォルトのままだと以下のようになります。

$ git branch -a
remotes/origin/HEAD -> origin/master
remotes/origin/master

では、実際にブランチを作成する日付で作成します。作成するにはgit checkout -b {branch_name}というコマンドで作成します。

$ git checkout -b 2019_06_26
Switched to a new branch '2019_06_26'

新規ブランチでファイルの作成を行う

再度、上記のブランチの確認をすると先ほど作成したブランチが確認できると思います。次に適当なテキストファイルを作成します。

$ touch sample.txt // sample.txtファイルを作成
vi sample.txt      // sample.txtファイルを編集

hoge               // hogeと記載

:wq                // 上書き保存

作成したファイルをGitHub上に上げる

上記で作成したファイルを先ほど作成したリポジトリに上げたいと思います。git add sample.txtでファイルを上げます。
以下で使用するコマンドです。

  • git add {file_name}
    ファイルをGit上に追加
  • git commit -m '@create first commit' {file_name}
    ファイルをGit上に上げます。『”』の中は自由にメッセージを決められます
  • git push --set-upstream origin 2019_06_26
    作成したブランチにファイルを反映しつつ、リモートに上げます

GitHub上にプルリクを作成する

pushが完了したら、GitHubのページに戻って作成したリポジトリの詳細画面に行きます。そうすると、リポジトリの詳細画面に『Compare & Create pull request』というボタンを生成されるのでクリック。

以下のような画面に遷移するので画像と同じように入力。

GitHub プルリク

これでプルリクを作成できました。『Pull Requests』というタブをクリックし、『File change』の項目でどの点に変更があったかなどのチェックができます。

また、ここでは作成、変更したファイルにコメントを付けることが出来るので、ここでソースコードのレビューをお願いしましょう!

レビューをお願いする人は、Twitter上や同じ独学で勉強している人でも構わないと思います。なるべく自分と技術力が同じ、もしくはそれ以上の方にしてもらうと指摘が増えてGoodです。

プログラミングの勉強がしたいなら

今回、Gitの細かいところは説明を省きましたがプログラミング以外でもこういった事は重要ですね。

独学でGitの勉強をしたいけど、よくわからんって人は『Progate』というプログラミングオンライン学習サービスのGitコースがオススメです!
ちなみにGitコースは無料で実施可能です。

 

\記事のシェアをお願いします!/