チーム開発（Githubの場合）

Owned by Kohei Nishikawa
Last updated: Jul 16, 2023
8 min read

なんとなく上から下に実施せずに、何を自分がやっているか理解しながら進めましょう。

概要

ここでは、ソースコード管理プラットフォームのGithubと、Gitリポジトリ向けのクライアントアプリケーションの「Github Desktop」を用いて、チーム開発で必須となるGithub操作について説明します。GithubとGithub Desktopを使うことは、インフラ構築からアプリケーション開発まで、ITエンジニアに限らず、営業職や執筆が多い小説家や出版社の編集者まで幅広く使われる汎用的なスキルを身に付けることにつながります。どんな仕事も、ドキュメントを書かなければ仕事を行ったことにはならない。

Github Desktopは、Github向けのアプリで、インフラ構築からアプリケーション開発まで幅広く使われます。インフラ構築は、TerraformやAnsible で、インフラ構築の作業をコードとして表現することができます。
また、ここで学ぶGithubの基本操作や考え方、用語は、Github以外のGitlabやBitbucket Server、Giteaなどのソースコード管理プラットフォームに応用できます。

また、GithubやGitlab等に備わっているプロジェクト管理機能、あるいはTrelloやMicosoft Planner、OpenProject、Jira Softwareなどのプロジェクト管理ツールを使っても良いでしょう。カンバンボードで、さまざな作業や営業活動を共有するようにしましょう。開発系の作業と、営業活動やカスタマーサポートなどの各種作業を一覧で共有できることが、非常に重要です。ほとんどのプロジェクト管理ツールでは、Githubで連携することができます。

<カンバンボードの例>

カンバンボード機能があるプロジェクト管理ツールの例

SaaS型

Self host 型（サーバー用意して自分で運用）

  • << ホームページは英語だけど、実際の画面は日本語対応。無料版あり。

  • << ホームページは英語だけど、実際の画面は日本語対応。無料版あり。

補足資料

  • コマンドを使った操作については、Paizaラーニングの「Git入門編１」をご覧ください。>> https://paiza.jp/works/git/primer/beginner-git1

  • Git関係の用語は、ここみておきましょう！ 【イラストで覚える】初心者のためのGitとGitHub用語集。>> https://zukulog098r.com/git/

  • カンバンボードのカンバンについて

    • << 世界中で使われるカンバンボードの元ネタは、トヨタ生産方式。製造業のノウハウをしっていることは、IT技術者であっても役立つ。

    • << カンバンボードについての解説

リポジトリ (レポジトリ) 作成

ログイン

Githubアカウントを持っている場合は、https://github.com/ にアクセスし、画面上の「Sign in」をクリックしてログインします。 Github アカウントを持っていない場合は、画面右上の「Sign up」から利用登録を行います。

リポジトリの作成

ログイン後、画面左上の「New」をクリックします。既に作成済みのリポジトリを使う場合は、この作業は飛ばしましょう。

「Create a New Repository」の画面で、最低限、次の項目を入力します。その後、「Create repository」をクリックします。

  • Repository name

  • Description

  • 「Public」もしくは「Private」のどちらかを選択

    • オープンソースソフトウェア開発であれば、原則 Publicを選ぶこと。企業であれば、Github Enterprise ( https://github.co.jp/pricing ) を使うことがある。

    • 後から、「Private」を「Public」に変更することができます。>> リポジトリ作成後、「Settings」>>「Danger Zone」>>「Change repository visibility」で変更。

  • 「Add a README file」にチェックを入れる。

リポジトリを作成することができました。

リポジトリの共有

作成済みのリポジトリで、画面右上の「Settings」タブをクリックします。

リポジトリの設定画面が表示されます。画面左側の「Collaborators」をクリックします。

「Manage access」で、「Add people」をクリックします。

Githubの既存ユーザーを招待することができます。collaboratorとして招待することで、リポジトリ上で一緒に作業できる人を増やすことができます。

一緒に作業する人のGithubユーザー名やGithubに登録されているメールアドレスを入力します。例えば、次のようになります。

「Add Githubユーザー名 to this repository」をクリックすることで、7日間有効な招待メールが相手に届きます。相手が同意すれば、リポジトリを共有できるようになり、一緒に作業ができます。

Gitのインストール

まだGitをインストールしていない場合は、WindowsもしくはMac、Linux向けのGitをインストールします。

Windowsの場合

にアクセスし、Windows向けのGitをダウンロードしてインストールします。

Macの場合

ターミナルアプリで次のコマンドを実行して、gitのバージョン名が表示された場合は、gitはインストール済みです。

git version

gitのバージョンが表示されない場合は、homebrew を使って、git をインストールします。homebrewをインストールしていない場合は、 を参考に、homebrewをインストールしましょう。

brew install git

Linuxの場合

ターミナルアプリで次のコマンドを実行して、gitのバージョン名が表示された場合は、gitはインストール済みです。

git version

UbuntuおよびUbuntu派生の場合

gitのバージョンが表示されない場合は、gitをインストールします。

Red Hat Enterprise Linux および CentOS、Fedora、それらの派生の場合

gitのバージョンが表示されない場合は、gitをインストールします。

yum を使っている場合

dnf を使っている場合

Github Desktop によるGithub接続とコミット、ブランチ作成、プルリクエスト、マージ

Github Desktopのインストール

Macの場合

にアクセスし、「Download」をクリックします。Macの場合は、「Download for Mac」と表示されます。M1/M2系の場合は、「Apple Silicon Mac」をクリックすることで、M1/M2向けをダウンロードすることができます。

Intel Mac 向け：GitHubDesktop-x64.zip

Apple Silicon Mac 向け：GitHubDesktop-arm64.zip

どちらかをダブルクリックして解凍し、「Github Desktop」アプリを「アプリケーション」フォルダに移動します。

Windowsの場合

にアクセスし、「Download」をクリックします。Windowsの場合は、「Download for Windows」と表示されます。GitHubDesktopSetup-x64.exe というファイルです。GitHubDesktopSetup-x64.exe をダブルクリックすることで、インストールが完了します。

Linuxの場合

Github Desktop公式ではWindowsとMacに対応していますが、Linux版を作っている人（Githubでエンジニアとして働く、Brendan Forster氏）がいますので、それを利用することで、Linuxにインストールすることができます。

UbuntuおよびUbuntu派生を使っている場合

GUI（）がインストールされている必要があります。

パッケージフィードの取得（apt install でインストールできるようにする）
インストール

RedHat Enterprise Linux およびCentOS、Fedora、それらの派生を使っている場合

GUIがインストールされている必要があります。

パッケージフィードの取得（yun または dnf install でインストールできるようにする）
インストール
yum を使っている場合
dnf を使っている場合

Github Desktop の起動

Github Desktopのアイコンをクリックします。下図はUbuntおよびUbuntu派生の場合です。RedHat Enterprise LinuxやCentOS、Fedoraの場合でも、Github Desktopのアイコンをクリックして起動することは同じです。

起動した様子

GIthub.comアカウントに接続

Github上のリモートリポジトリに接続し、ローカルリポジトリとして複製します。

Mac / Windows / Linux 共通

Github Desktop アプリをダブルクリックして起動します。

「Sign in to GitHub.com」をクリックします。Githubにログイン後、「Authorize Desktop」をクリックします。

「開く」をクリックします。

「Configure Git」の画面で、Githubアカウントが自動割り当てされているので、「Finish」をクリックします。

GIthub上のリモートリポジトリに接続

リモートリポジトリの選択 ( Mac & Windows )

作業したいリポジトリをクリックして選び、「Clone あなたのユーザー名 / 選択したリポジトリ名」をクリックします。

ローカルパスの指定

Macの場合

下図の確認が表示されるので、「OK」をクリックします。

「Clone a Repository」が表示されます。「Clone」をクリックします。

Windowsの場合

「Clone a Repository」が表示されます。「Clone」をクリックします。

リモートリポジトリの選択 ( Linux )

「Clone a Repository from the internet」をクリックします。

「Github.com」タブで、作業したいリポジトリをクリックして選びます。「Clone」をクリックします。ローカルパスは、Linuxにログインしているユーザーのドキュメントディレクトリ下にGithubというディレクトリが作成され、その中にリポジトリ名と同名のディレクトリが作成されることが表示されています。

クローンの実行結果

Macの場合

Github Desktopで、リポジトリをクローンすることができました。これで、ブランチ作成やコミットができます。（画面ショットはMacですが、Windowsでもほぼ同じです。）

「Show in Finder」をクリックすると、Macの「Finder」でクローンしたローカルリポジトリを表示することができます。事前に「Visual Studio Code」がインストールされているのであれば、「Open in Visual Studio Code」は、Visual Studio Codeを使って作業する人には最適です。

Windowsの場合

Github Desktopで、リポジトリをクローンすることができました。これで、ブランチ作成やコミットができます。

「Show in Explorer」をクリックすると、Windowsの「Explorer」でクローンしたローカルリポジトリを表示することができます。事前に「Visual Studio Code」がインストールされているのであれば、「Open in Visual Studio Code」は、Visual Studio Codeを使って作業する人には最適です。

Linuxの場合

Github Desktopで、リポジトリをクローンすることができました。これで、ブランチ作成やコミットができます。見た目はWindowsの場合と似ています。

「Open thre repository in your external editor」の「Options」をクリックすることで、ファイル作成や編集に用いるエディタアプリを設定することができます。たとえば、Visual Studio Code をインストールしてからGithub Desktopを起動すれば、「Open in Visual Studio Code」と表示が変更され、Visual Studio Codeを使って作業する人には最適です。

「Show in your File Manager」をクリックすると、Linuxの「File Manager」でクローンしたローカルリポジトリを表示することができます。

ファイルのコミット

ローカルリポジトリに、ファイルを追加（もしくは編集）

Macの場合

Github Desktop を起動した状態を前提とします。ここでは例として、Macの「Finder」上でDockerfileを作成し、ローカルリポジトリに保存します。

Windowsの場合

Github Desktop を起動した状態を前提とします。ここでは例として、Windowsの「Explorer」上でDockerfileを作成し、ローカルリポジトリに保存します。

Linuxの場合

Github Desktop を起動した状態を前提とします。ここでは例として、Linuxの「File Manager」上でDockerfileを作成し、ローカルリポジトリに保存します。

コミットしてリモートリポジトリにプッシュ

Mac & Windows 共通

Github Desktop に、ローカルリポジトリの変化が表示されます。下図はDockerfileが追加されたことに反応しています。（画面ショットはMacですが、Windowsでもほぼ同じです。）

Dockerfileが選択された状態なので、画面左下の「Description」にDockerfileの概要を書きます。記入後、「Comment to main」をクリックします。

「Push origin」をクリックします。Github側のリポジトリに作成したDockerfileを反映、今回は新規に作成（アップロード）します。

Github Desktopで、「History」タブをクリックし、操作履歴として確認することができます。（画面ショットはMacですが、Windowsでもほぼ同じです。）

Webブラウザで、Github上のリポジトリにアクセスし、Github Desktopからプッシュ（反映）させたDockerfileが存在するか確認します。確認できた場合は、実際にファイル名をクリックし、中身が正しいか確認します。

ブランチ作成

Github Desktopでブランチを作成するには、Github Desktopで、「Current Branch」と表示されているタブをクリックし、「New Branch」をクリックします。（画面ショットはMacですが、Windowsでもほぼ同じです。）

「Create a Branch」が表示されるので、「Name」の欄にブランチ名を英数字で入力し、「Create Branch」をクリックします。

「Publish branch」をクリックします。

Webブラウザで、Github上のリポジトリにアクセスし、ブランチを切り替える場所、「main」と表示されている下図の場所をクリックし、GIthub Desktopで作成たブランチが表示されているか確認します。作成したブランチ名（例 dev1）をクリックしてみましょう。

作成したブランチの中身が表示されました。

Webブラウザ操作でGithub上のリポジトリを操作した際に、Github Desktopへの反映方法

Webブラウザを使って、Githubのリポジトリでなんらかの操作を行った場合、GIthub Desktop側では、「Current repository」でリポジトリを選び、次に「Current branch」で対象のブランチを選んだ後、「Fetch origin」をクリックします。

Github Desktop で、プルリクエストとマージを行う手順

対象のGithub上のリポジトリに招待されているユーザーで、Github Desktopを使っているものとします。

プルリクエストの作成

プルリクエストは、ブルリクとも言い、作業用のブランチ内で変更・編集したコードを、ターゲットのブランチ（mainブランチ）のレビュー・マージ担当者に通知するために実施します。ターゲットブランチのレビュー・マージ担当者が承認し、ターゲットブランチにマージすることで、あなたが変更あるいは編集したコードが、たとえば、本体（mainブランチ）に取り込まれます。

下準備としてコミット&プッシュ

下図では、Github Desktopで、dev1 ブランチを選び、「src」ディレクトリと「index.html」というHTMLファイルを作成してあります。もし、main ブランチ以外のブランチで既にコミット&プッシュを実施済みであれば、次の操作に進みましょう。

Github Desktopから、コミットしてプッシュします。「Push origin」をクリックします。

プルリクエストの実施

Github Desktopで、コミットしてプッシュ後、プルリクエストができるようになると、「Preview Pull Request」が表示されるので、クリックします。

Webブラウザが起動し、Githubのプルリクエスト画面が表示されます。今回は、dev1 ブランチ >> main ブランチ にプルリクエストを行うことになります。「base: main」をクリックして、ターゲットになるブランチを変更することも可能です。「Create pull request」をクリックします。

Webブラウザが起動し、プルリクエスト作成画面が表示されます。「Assignees」の歯車のアイコンをクリックし、レビュー・マージ担当者を指定します。自分自身を指定することも可能です。その後、「Create pull request」をクリックします。「Assignees」に指定された人に通知が届くので、プルリクエストは完了です。

マージ

「Assignees」に指定されたユーザーに、プルリクエストが行われた旨のメールが届いています。たとえば、下記のようなものです。

メール内の「You can view, comment on, or merge this pull request online at:」の下に表示されたURLをクリックして、プルリクエストの承認画面を表示します。プルリクエストの内容についてコメントがあれば、「Leave a comment」と書かれている箇所にコメントを入力し、「Comment」をクリックします。プルリクエストの内容に問題がなければ、「Merge pull request」をクリックします。

「Confirm merge」をクリックすることで、dev1ブランチ で作成・変更・編集したファイルが、main ブランチに統合されました。

マージを終えると、マージに用いたブランチを削除するかどうかがメッセージが表示されます。ブランチを削除することができますし、残すこともできます。

main ブランチの確認

マージ結果の確認のため、main ブランチを確認します。Webブラウザ上で、Githubのリポジトリにアクセスし、「Code」タブで、main ブランチを選ぶと、「src」というディレクトリが増えています。

「src」ディレクトリをクリックすると、「index.html」というファイルが増えていることがわかります。

Github Desktop の方でも、main ブランチに切り替え、「Fetch origin」をクリック後、表示される「Pull origin」をクリックすることで、マージされた内容を反映させることができます。

Webブラウザ操作の場合 ( Mac / Windows / Linux / タブレット端末など )

多くのデバイスで共通して操作できるWebブラウザによる操作を説明します。

ブランチ作成

Github内の対象のリポジトリにアクセスします。

ブラントのドロップダウンリストクリックし、検索用の入力欄に、作成したいブランチ名を入力します。

「Create branch: ◯◯◯◯◯◯◯」をクリックします。下図のようにブランチが作成されます。

ファイル作成 ( コミット&プッシュに相当)

作成したブランチ上で、「Add file」をクリックします。

「Create new file」をクリックします。

「Name your file」の欄に、ディレクトリ名とスラッシュを入れます。今回は、ディレクトリ作成とファイル作成を行います。例 src/

次に、index.html を入力し、中身となるソースコードも入力します。

画面下に移動し、ファイルの内容について入力します。「Commit new file」をクリックします。

ブランチ内に、src というディレクトリと、その下に、index.htmlというファイルを作成することができました。

プルリクエスト

プルリクエストは、ブルリクとも言い、作業用のブランチ内で変更・編集したコードを、ターゲットのブランチ（mainブランチ）のレビュー・マージ担当者に通知するために実施します。ターゲットブランチのレビュー・マージ担当者が承認し、ターゲットブランチにマージすることで、あなたが変更あるいは編集したコードが、たとえば、本体（mainブランチ）に取り込まれます。

作成したブランチ上でコミット（例として、Dockerfile）後、Githubに表示されている「Compare & pull request」をクリックすることでプルリクエストを作成することができます。しかし時間が経つと消えてしまいます。

< 表示例 >

Webブラウザ上で、「Compare & pull request」が表示されていない場合など、プルリクエストを実施するには「Pull requests」タブをクリックします。

「New pull request」をクリックします。

プルリクエストを行い、ブランチ「dev001」の「Dockerfile」を、ブランチ「main」に加えたいので、「base」に「main」ブランチ、「compare」に「dev001」ブランチとします。dev001と名称が異なる場合は、読みかえてください。
画面下には、対象のコミット内容が表示されます。「Create pull request」をクリックします。

プルリクエストの件名と、プルリクエストに至った理由を下図のように入力します。また、1人でGithubを使っている場合は不要ですが、2人以上の場合は「Reviewers」の歯車のアイコンをクリックし、レビュー(内容確認)してくれる人を指定しましょう。
またプルリクエストを承認し、マージを行う人を「Assingnees」として指定する必要があります。1人でGithubを使っている場合は、「Assingnees」の歯車のアイコンをクリックし、自分自身を指定します。
「Create pull request」をクリックします。

プルリクエストを作成することで、プルリクエストの一覧に表示されます。「Open」となっているものが、マージの対象となるプルリクエストです。

マージ

プルリクエストが作成された後、レビュー・マージ担当者が承認することで、mainブランチに、プルリクエストの内容が反映されます。プルリクエストとマージがあることで、チーム開発を実現しています。

プルリクエストの一覧から、「Open」となっているプルリクエストのなかから、マージの対象となるプルリクエストを選びます。プルリクエストした時に、「Assingnees」の対象が自分自身(1人でGithubを使っている状態)であれば、既にマージのための画面が表示されているはずです。

画面下のコメント欄にコメントを入力し、「Comment」をクリックします。

マージを行うプルリクエストの画面に、コメントを追加することができました。「Merge pull request」をクリックします。

「Confirm merge」をクリックします。

この表示がでれば、マージは完了です。

プルリクエストの一覧で、「closed」をクリックします。マージが行われたプルリクエストの一覧が表示されます。

main ブランチの確認

Github内の「main」ブランチを表示してみましょう。

マージ前は、README.md のみでした。

マージ後は、Dockerfile が「dev001」ブランチからマージされ、加わりました。

「main」ブランチ以外に、複数の作業用のブランチを切る(作る)ことで、問題のない、エラーのないもののみを「main」ブランチに反映させることができます。

issue を登録 (Github)

issue は、課題と言うことが多いですが、開発の場合は「作業」と言う方が正しいです。動詞としてのissueは、発するという意味ですので、課題も作業も、発行されたものとしては由来は同じです。
日本官公庁や企業で、知らず知らずのうちに大量に使われているオープンソースソフトウェアの多くは、なにかしら障害が起きたり、バグが見つかったり、作って欲しい機能がある場合は、Githubなど公開されているGitリポジトリで、「issue」を登録することが一般的です。メールや電話しても、英語で「issueに登録しておいてください。」と言われるだけなので、技術者以外に、営業やカスタマーサポート、クレーム担当のような業務を行う場合であっても、「issue」に登録することを身に着けておくことがとても重要です。

たまに、日本語の問い合わせを英語などに翻訳してサポートする「ブリッジSE」がいることがあるので、その場合は「ブリッジSE」に依頼することが可能です。( 経験者として申し上げれば、ブリッジSEは日々が海外とのやりとりで、面白い仕事です。)


Webブラウザ上のGithubのリポジトリで「Issues」タブをクリックし、「New issue」をクリックすることで、登録することができます。「issue」には、コード作成のほかに、ドキュメント作成やバグ報告、機能の追加リクエストなど様々なものがあります。後述の「Labes」を使って、どんなことをやっているか可視化しましょう。

件名とコメントを入力するとともに、「Assingnees」に作業担当者を割り当てます。1人でGithubを使っている場合や、複数人が使っているが、作業担当者が自分の場合は、自分自身を割り当てます。
コメント欄には、#1 のようにプルリクエストや他のissue を紐づけることができます。ここでは、プルリクエスト作成時に、#1と表示があったため、#1 とすることで、該当するプルリクエストと紐づけることができます。

「Submit new issue」をクリックします。「issue」に作業内容が登録されました。画面右側の「Labels」の歯車のアイコンをクリックして、バグ報告やドキュメント作成などのラベルを付与します。可能な限りラベルを付与しておきます。

<< ラベルを付与した例 >>

issue の一覧

Webブラウザ上のGithubのリポジトリで「Issues」タブをクリックすることで、作成済みの「issue」が表示されます。ラベルがあると、issue の一覧でも目立って良いですね。

プロジェクト (Github)

Githubのプロジェクト機能を使うことで、「issue」や「プルリクエスト」の進捗管理を行うことができます。

プロジェクトとカンバンボードの作成

この操作は、Gitリポジトリの作成者が実施しなければなりません。Githubのリポジトリ画面で、「Projects」タブをクリックします。次に画面左側の「Link a project」の隣の「▼」をクリックします。次に「New project」をクリックします。

「New project」をクリックします。

「Welcome to projects」が表示されるので、「Jump right in」をクリックします。

「Select a template」が表示されるので、「Board」を選び、「Create」をクリックします。

ボード（カンバンボードとも呼ぶ）ができあがります。「Todo」はやるべきこと、「In Progress」は作業中、「Done」は作業完了を意味します。

「untitled project」と表示されている部分にマウスのカーソルを近づけると表示される、ペン型のアイコンをクリックし、ボード名を変更することができます。

「Settings」画面が表示されるので、「Project name」に新しい名称を入力し、Enterキーを押します。その後、「Project name」の枠の外の余白をクリックします。「Settings」の左隣に表示されている「←」をクリックすることで、画面を戻ります。

< Project name 変更後 > Settings画面で、「Project name」を変更したことで、ボード名が変更されました。

issue の紐づけ

ボードで、「Todo」「In Progress」「Done」と表示されている各列に「+ Add item」のうち、「ToDo」の列に表示されている「+ Add item」をクリックします。

リポジトリ名の選択

「+ Add item」をクリック後、下図のように「#」をクリックすることで、リポジトリ名を選ぶことができます。今回の「issue」が存在するリポジトリ名を選びます（例 containertrain）。

issue の選択

選択したリポジトリ下の「issue」や「プルリクエスト」を選ぶことができます。ここでは、作成済みの「issue」を選びます（例 起動用Docker Composeの作成 #2）。なお、画面からわかるように、「+ Create new issue」をクリックすれば、各列に直接「issue」を作成することができます。

これで、先程作成した issue が、プロジェクトに紐づけられました。

列の変更

作成済みの issue 、アイテムと言います（似たようなツールにおけるカードと同じ意味）。アイテムを「In Progress」の列にドラッグ&ドロップしてみます。

「In Progress」の列にドラッグ&ドロップした結果

ボードからissueの確認

ボード内のアイテム ( issueやプルリクエスト )をクリックすると、画面右側に表示されます。issueを表示した場合は、issue にコメントを加えることができます。「Edit title」の上の「X」をクリックすることで、ボード画面に戻ります。

参考資料

  • << issue や Project（ボードを含む）の扱いについての資料はこちらです。

  • << Project（ボードを含む）を使った、開発の進め方の資料。