💻

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

GitHub、アカウント登録はしたけど開発者じゃないから使わないというそこのあなたのために、さっと使い方を説明した記事を書きました。

2025/10/6

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

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

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

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

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

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

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

Git とは

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

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

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

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

GitHub とは?

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

コードを書いてみよう

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

アカウント作成

まずは 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 をコピーします。 Image from Gyazo
  3. VS Code を開きます。
  4. 上部のメニューから「表示 (View)」→「コマンドパレット (Command Palette)」を開き、「Git: Clone」と入力して選択します。 Image from Gyazo
  5. 先ほどコピーした URL を貼り付けて、Enter キーを押します。 Image from Gyazo
  6. パソコンのどこにプロジェクトを保存するか聞かれるので、分かりやすい場所(デスクトップやドキュメントフォルダなど)を選びます。
  7. クローンが完了すると、右下に「リポジトリを開きますか?」と表示されるので、「開く (Open)」をクリックします。

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

編集してみる

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

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

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

# TOMODACHI プロダクト

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

## メンバー
- そうまめ

Image from Gyazo

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

プッシュする

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

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

    • ソース管理パネルを開くと、「変更 (Changes)」のリストに編集したファイル(README.md)が表示されています。
    • ファイル名の右側にある「+」アイコン(変更をステージ)をクリックします。
    • すると、ファイルが「ステージされている変更 (Staged Changes)」のリストに移動します。
  2. コミット: 変更内容にメッセージを付けて、自分のパソコン(ローカルリポジトリ)に記録します。この段階でもまだ GitHub 側には反映されません。

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

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

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

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

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

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

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

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

0人が0回拍手しました

関連記事

🤖

HTMLさえわかればできる!Astroでブログサイトを作ってみよう!

2024/5/12

HTML さえわかればできる!Astro でブログサイトを作ってみよう!

なんかブログサイト作りたい、っていうときありますよね。

ある程度の規模のサイトなら、わざわざ Wordpress...

0回拍手されました

🤖

GoogleスプレッドシートをAPI経由で読み込もう!

2024/6/22

Google スプレッドシートを API 経由で読み込もう!

去年別のサイトで書いた記事を再公開したものです。

超簡単です。Google スプレッドシートに書いた情報を API...

0回拍手されました

🗓️

ライフログのシステムについて思うこと

2025/11/18

LLMの進歩によって人の行動やを言語化したり他者との会話を分析したりすることが簡単になった。でも、イマイチどれもしっくりこない気がしたので、技術的な面と、使いやすさの面から色々考えてみる。

0回拍手されました

✒️

Markdown記法チートシート(すごい簡単)

2025/10/5

Google DocsやWordとかを使ったことあると、 こんな感じで、太字とか、斜体とか、見出しとかを選択することができますよね。

でも、コードを書くエディタとかを使う時などでは、こういったボタン...

0回拍手されました