GitHubでチーム開発してみよう

公益財団法⼈⽶⽇カウンシルージャパンが主催し、一般社団法人コード・フォー・ジャパンが運営するTOMODACHI Boeing Entrepreneurship Seminar 2025に参加している方に向けた内容となっていますが、外部の方もご覧いただけます

こんにちは。そうまめです。 これからみんながオンラインで２ヶ月かけてプロダクトを作るわけですが、その際に使えそうなものを皆さんに共有したく、ノートを書いています。今回はGitHubについて説明します。名前は聞いたことあっても、触ったことない方や、そもそも初めての方向けに説明していきます。

ちなみにですがこのノートもGitHubで管理しています。

チームで開発する時、ファイルとかどうしよう？

アプリとかを作るとき、そのデータのことをソースコードと呼んだりします。で、チームで文書を作成したりするとき、よくあるGoogle Driveみたいなクラウドストレージでこれらを共有したりしますよね。でも、Google Driveは、ファイルの履歴などを詳しく追跡することができなかったり、もし複数人が同じファイルの内容(Google Docsで開けるものは例外なので、PDFみたいなものを想像してください)をそれぞれのパソコンで同時に編集を始めて、それぞれクラウドに上書きアップロードしたとします。

Aさんははじめの１段落を編集して、はじめにアップロードしました Bさんは２段落目を編集して、３番目にアップロードしました Cさんは３段落目を編集して、２番目にアップロードしました

で、この場合、最終的なファイルはBさんの２段落目だけが編集された状態が最後の結果になります。なぜならBさんが編集しているパソコンにはAさんとCさんのアップロード内容は反映されておらず、ファイルは全て上書きされてしまうからです。もちろんなんのエラーも出ないので、普通にアップロードできちゃいます。 一人ずつ順番に編集すればこのような事態は避けられますが、それだと面倒ですよね。毎回AさんとCさんに連絡を取ってアップロードするタイミングを合わせないとファイルの内容が消し飛ぶなんて危険すぎます。

Gitとは

で、ここで、Gitという仕組みが出てきます。 Gitは、ファイルの変更履歴を記録、追跡し、簡単にバージョン管理することができます。誰が、どのファイルに対してどんな変更をし、前の内容と何が変わったかを履歴として残しておくことができます (詳しくは 【初心者向け】GITとは何か？GITの概念を解説 #Git - Qiitaとかを参照するとわかりやすいと思います) この仕組みでは、リポジトリ（プロジェクトのファイル置き場）を分散させ、編集する人は、ローカルのリポジトリ（自分のパソコンにあるファイル）を直接編集し、編集が終わったら、リモートリポジトリにアップロードします。これを、プッシュと呼びます。 そして、そのリモートリポジトリに上げられた内容をプル（引っ張ってくる）することで、自分たちのローカルリポジトリに反映させます。

勝手にプルしてきちゃうと作業中に内容が突然変わってしまったりするので、ユーザーがプル操作をする必要があります。いつその内容を引っ張ってくるかということに関しては、【Github】pullのタイミングについてとかを確認してもらえると良いかなと思います。

編集内容が被っていた場合は、コンフリクト（衝突）と言って、勝手に上書きされないようになっています。これで、みんなの書いた大切な内容が勝手に消えてしまうことを避けられます。

ブランチとか、マージとか、もっと説明したいことはあるんですけど、奥が深すぎて説明すると無限に時間が溶けるので、とりあえずその辺は必要なタイミングで調べていただけると。

GitHubとは？

んで、このリモートリポジトリをどこにおくかという問題が発生するわけですが、大体の場合、みんなGitHubというものを使います。名前聞いたことある人もいるのではないでしょうか。 Gitの仕組みだけでなく、ドキュメントやプロジェクトの管理、課題管理とかの機能もくっついていて、とても便利なものになります。アメリカのGitHub社によって開発され、2018年以降はMicrosoft傘下になっています。

コードを書いてみよう

いきなりコードを書くって何言ってんだ！？プログラミングやったことないぞ！ってなりそうですが、大丈夫です。やり方さえ覚えれば全てAIにプログラムを書かせることだってできます。もちろんAIが何をやっているか、いずれは理解する必要がある時がきますが、何も知らないところからこの２ヶ月のハッカソンの間にそれを全て理解しようとするのはだいぶ無理があるので、手をとりあえず動かしましょう。

アカウント作成

まずはGitHubのアカウントを作成します。作り方に関しては公式サイトで説明されているのでそれを参考にしてください。 GitHub でのアカウントの作成 - GitHub Docs

わからないよ〜って方はこれを参考にしてもらえると。 GitHubアカウントの作り方

Student Packについて

余談ですが、学生の場合、Student Packと言っていろんな開発ツールのサブスクとかがタダで使えちゃうありがたいサービスがあります。ぜひ申請してみてください。

学生として GitHub Education に応募する - GitHub Docs

Student Packで使えるもので一番皆さんにとって激アツだと思われるものがGitHub Copilotです。GitHub Copilotは、IDE(後述)でコードを書いているときにアシストしてくれたり、質問すると色々答えてくれる便利なAIアシスタントです。

コードを書くエディタを入れる

では、コードを置く場所を作る準備ができたら、次はコードを書く場所を作ります。基本的にIDE（統合開発環境）と呼ばれるものを使うのが一般的で、コードを書くだけに留まらないさまざまな機能を提供してくれています。最近のコードエディタは優秀で、AIが搭載されてやって欲しいことを書くだけで全部やってくれるものとかもあります。

以下は今回のハッカソンで使われそうなIDEのリストです：

• VS Code
  • Webアプリを作る人の第一選択肢。Microsoftが開発するエディタで、Windows, MacOS, Linuxといった大体のOSで動作します。厳密にはIDEではないんですけど、拡張機能を追加することで実質IDEのような使い方ができます。
  • Android/iOSに対応した、クロスプラットフォームアプリを作る場合にも使用できます
  • Typescript, Javascript, Pythonといった言語でよく使われます
• Cursor
  • VS Codeをベースにしたエディタですが、AI機能がめちゃくちゃ強いです。勝手にコード書いてくれます。ただそういった機能は有料です($20/月)
• Xcode
  • iOSアプリを作る人が使うエディタです。Appleが開発した言語、Swiftでアプリを作る場合、必ず必要です。MacOSのみでしか動作しません。
• Android Studio
  • Androidアプリを作る人が使うエディタです。Androidアプリを作るのに必要な道具が全て揃っています。

多分既にコード書いている人じゃない限り、VSCodeなのかなと思いますので、これ以降はVSCodeを使った場合を想定して説明します。

リモートでリポジトリを作ってみる

まずは、ソースコードを保管しておくための「リモートリポジトリ」をGitHub上に作ってみましょう。これは、チームみんながアクセスできる、プロジェクトのファイル置き場のようなものです。🗂️

1. GitHubにログインして、画面右上の「+」アイコンをクリックし、「New repository」を選択します。
2. リポジトリ名 (Repository name) を決めます。プロジェクト名など、分かりやすい名前を英語で入力しましょう。（例: tomodachi-product-2025）
3. 説明 (Description) に、どんなプロジェクトなのか簡単な説明を書いておくと親切です（任意）。
4. 公開設定 を選びます。「Public」は誰でも見れる状態、「Private」は招待した人しか見れない状態です。チーム開発なら、最初は「Private」で良いでしょう。
5. 「Add a README file」にチェックを入れましょう。これはプロジェクトの説明書のようなもので、最初に一つファイルがあると後々の操作が楽になります。
6. 最後に「Create repository」ボタンをクリックすれば、リモートリポジトリの完成です！🎉

ローカルリポジトリを作成（クローン）する

次に、GitHub上に作ったリモートリポジトリを、自分のパソコンにコピーしてきましょう。この操作をクローン (Clone) と呼びます。

1. 先ほど作成したリポジトリのページを開きます。
2. 緑色の「<> Code」ボタンをクリックし、表示されたURLの右側にあるコピーアイコンをクリックして、URLをコピーします。
3. VS Codeを開きます。
4. 上部のメニューから「表示 (View)」→「コマンドパレット (Command Palette)」を開き、「Git: Clone」と入力して選択します。
5. 先ほどコピーしたURLを貼り付けて、Enterキーを押します。
6. パソコンのどこにプロジェクトを保存するか聞かれるので、分かりやすい場所（デスクトップやドキュメントフォルダなど）を選びます。
7. クローンが完了すると、右下に「リポジトリを開きますか？」と表示されるので、「開く (Open)」をクリックします。

これで、あなたのパソコンにプロジェクトのファイル（今はREADME.mdだけですが）が準備できました！

編集してみる

では、さっそくファイルを編集してみましょう。試しに自己紹介を書いてみます。

1. VS Codeの左側にあるエクスプローラーから、「README.md」ファイルをクリックして開きます。
2. ファイルに何かテキストを書き加えてみましょう。例えば、こんな感じです。

.mdファイルは、普通の.txtファイルなどとは違って、Markdown記法という書き方で、 #や*などの記号を使って、文字の大きさや強調する箇所とかを設定することができます。詳しくは Markdown記法で書いてみよう の記事を参照してください

# TOMODACHI プロダクト

これは私たちのプロダクトです。

## メンバー
- そうまめ

3. ファイルを編集して保存 (Ctrl+S または Cmd+S) すると、VS Codeの左側にある木の枝が分かれたようなアイコン（ソース管理）に、①のようなバッジが表示されます。これは「変更されたファイルがありますよ」という印です。

プッシュする

編集した内容を、今度はリモートリポジトリ（GitHub上）にアップロードして、チームメンバーに共有しましょう。この操作をプッシュ (Push) と呼びます。プッシュは、いくつかのステップに分かれています。

1. ステージング: どの変更を記録に残すか選びます。これは、自分のパソコンの中で行うので、この段階でGitHub側には何も反映されません。

   • ソース管理パネルを開くと、「変更 (Changes)」のリストに編集したファイル（README.md）が表示されています。
   • ファイル名の右側にある「+」アイコン（変更をステージ）をクリックします。
   • すると、ファイルが「ステージされている変更 (Staged Changes)」のリストに移動します。

2. コミット: 変更内容にメッセージを付けて、自分のパソコン（ローカルリポジトリ）に記録します。この段階でもまだGitHub側には反映されません。

   • ステージされている変更の上にあるメッセージボックスに、「何を変更したか」が分かる短いメッセージを入力します。（例: メンバーに自分の名前を追加）
   • 入力したら、「コミット (Commit)」ボタンをクリックします。これで、あなたのパソコンに変更履歴が記録されました。

3. プッシュ: ローカルリポジトリにコミットした変更を、リモートリポジトリに送信します。

   • 「コミット」ボタンが「変更の同期 (Synchronize Changes)」に変わるので、これをクリックします。
   • これで、あなたの変更がGitHubにアップロードされました！実際にGitHubのリポジトリページをブラウザでリロードして、内容が変わっているか確認してみてください。

例：このブログサイトの場合

今この記事をアップロードする瞬間にも、Gitを使用しています。VS Codeにはこんな感じでGitでステージした内容とかが視覚的に表示されます。 ステージされている変更の部分を見てみましょう。赤いDと書いてある内容は、削除した内容(Deleted)で、Rは名称変更(Rename)です。

プルする (リモートに変更があった場合)

チームの他の誰かがプッシュすると、今度はリモートリポジトリの内容があなたのパソコンにあるものより新しくなります。その最新の内容を手元に持ってくる操作がプル (Pull) です。

作業を始める前や、キリの良いタイミングでプルする癖をつけておくと、他の人の変更内容と自分の作業がぶつかってしまう「コンフリクト」を減らすことができます。

操作は簡単で、VS Codeのソース管理パネルにある「変更の同期 (Synchronize Changes)」ボタンを押すか、コマンドパレットから「Git: Pull」を実行するだけです。新しい変更があれば、自動的にあなたのパソコンのファイルが更新されます。🔄