コンテンツにスキップ
Twin:te 勉強会 2026

5. Git演習 — 公式サイトに自分を載せよう

この章は、1〜4章で学んだ流れを本物のリポジトリで一周する演習です。GitHub アカウントを持っていて、Twin:te の GitHub organization に招待済みで、Git がインストールされていることが前提です(Git 自体が初めての人は、先に1章から順に進めてから戻ってきてください)。

この演習が終わると

Twin:te の公式サイト www.twinte.net のメンバー一覧に、あなたが載ります。

やることはシンプルで、公式サイト(landing page)のリポジトリに「自分のメンバー情報を追加する変更」を作り、Pull Request を出して、先輩のレビューを受けてマージしてもらうだけです。4章までの練習用リポジトリとの違いは、レビューするのが先輩で、マージされると本番のサイトに反映されるという点だけ。これはまさに、Twin:te で普段の開発がまわっている流れそのものです。つまりこの演習が終わった時点で、あなたはチーム開発の一連の流れを本番環境で一周したことになります。

さっそくやっていきましょう。

リポジトリを手元で動かそう

公式サイトのソースコードは twin-te/twinte-landing-page にあります。Nuxt 3 という Vue ベースのフレームワークで書かれていて、パッケージ管理には bun というツールを使っています1。

まずは clone して手元に持ってきましょう。

Terminal window
$ git clone https://github.com/twin-te/twinte-landing-page.git
$ cd twinte-landing-page

次に bun を入れます。すでに入っている人は飛ばして大丈夫です。

うまく入らなかったら、周りのTAに聞いてください。

入ったら、依存パッケージをインストールして開発サーバーを起動します。

Terminal window
$ bun install
$ bun run dev

動作を検証してみよう

ブラウザで http://localhost:3000 を開いてみてください。見慣れた(?)Twin:te の公式サイトが手元で動いていたら成功です!下の方にスクロールすると「主メンバー」のセクションがあります。この一覧に、これから自分を追加していきます。

ブランチを切ろう

変更を始める前に、作業用のブランチを作ります。3章で学んだとおり、main は「いつでも公開できる状態」を保つ共有の場所です。特にこのリポジトリでは、main の内容がそのまま本番の www.twinte.net になります。各自がブランチを切って作業し、Pull Request でレビューを受けてから main に取り込む、という4章までに体験した運用を、Twin:te でも毎日やっています。

ブランチ名は add-member-<自分のGitHubユーザー名> としましょう。

Terminal window
$ git switch -c add-member-<自分のGitHubユーザー名>

自分を追加しよう

顔写真(アイコン画像)を置く

まず、メンバー一覧に表示する画像を src/images/ に置きます。推奨は次のとおりです。

  • 正方形の画像(サイトでは丸くくり抜かれて 120px 程度で表示されます)
  • 一辺 300〜500px 程度(既存メンバーの画像もだいたいこのサイズです。大きすぎるとページが重くなるので、スマホの写真そのままではなく縮小してから置きましょう)
  • 形式は jpg か png(それ以外の形式は表示の仕組み上使えません。理由は次のセクションで体験します)

ファイル名は自分のユーザー名など、他の人とかぶらないものにしてください(例: src/images/yamada.jpg)。

members.ts に自分を追記する

メンバーのデータは src/constants/members.ts にあります。開いてみると、Member 型の配列 members が1つあって、先輩たちのデータがずらっと並んでいるはずです。

各メンバーの isActive に注目してください。この配列は1本ですが、isActive: true の人はトップページの「主メンバー」に、isActive: false の人は別ページの「OB / OG」に表示される仕組みになっています2。みなさんは現役メンバーなので、配列の末尾に isActive: true で自分を追記しましょう。

// members 配列の末尾(最後の要素の後ろ)に追記
{
  isActive: true,
  name: 'やまだ',
  imagePath: 'yamada', // src/images/ に置いたファイル名
  description: '情報科学類所属。',
  links: {
    githubId: 'yamada-gh',
    twitterId: 'yamada_tw',
  },
},
  • imagePath は拡張子を省略すると .jpg として読み込まれます。png を置いた人は imagePath: 'yamada.png' のように拡張子まで書いてください
  • description は空文字 '' でも大丈夫です(先輩にも空の人がいますね)
  • links の中身(githubId / twitterId / website)は全部任意です。空にするなら links: {}, と書きます

ここで少し脱線。試しに name: の行をまるごと消して保存してみてください。エディタ(VS Code)が赤線を引いて「name がないよ」と怒ってくれるはずです。これが TypeScript の型チェックで、間違ったデータを書いてもコミットする前に教えてくれるという安心感があります。確認したら name は戻しておいてくださいね。

わざと間違えてみよう

正しく書く前に、1回わざと詰まってみましょう。imagePath を 存在しないファイル名(たとえば imagePath: 'yamadaa' のようなタイポ)にして保存し、ブラウザで確認してみてください。

……メンバーの表示がおかしくなったはずです。こういうときは、ブラウザの開発者ツール(右クリック →「検証」、または F12)の Console タブを見てみましょう。images/yamadaa.jpg が見つからない、という意味のエラーが出ているはずです3。

「画面が壊れたらまず開発者ツールのコンソールを見る」は、この先ずっと使える鉄板ムーブです。エラーメッセージには原因のヒント(今回ならファイル名)がちゃんと書いてあるので、恐れず読む癖をつけましょう。

原因がわかったら imagePath を正しいファイル名に直してください。

動作を検証してみよう

http://localhost:3000 の「主メンバー」セクションに、自分のカードが表示されていますか?名前・写真・リンクが意図どおりなら成功です!後で PR に貼るので、この画面のスクリーンショットを撮っておきましょう。

コミットして Pull Request を出そう

変更をコミットして、GitHub にプッシュします。

Terminal window
$ git add .
$ git commit -m "Add member: やまだ"
$ git push origin add-member-<自分のGitHubユーザー名>

コミットメッセージは「何をしたか」が一目でわかれば OK です(今回は Add member: <自分の名前> としておきましょう)。

プッシュしたら GitHub のリポジトリページを開いてください。「Compare & pull request」という黄色いバナーが出ているのでクリックし、Pull Request を作成します(バナーが出ない・操作に迷うときは 4章を見てください)。

PR の説明欄(description)には、レビューする人のために次の2つを書きましょう。

  • 何をしたか(例: 「メンバー一覧に自分を追加しました」)
  • さっき撮った、手元で表示確認したスクリーンショット(説明欄にドラッグ&ドロップで貼れます)

作成できたら、PR 画面右側の「Reviewers」から当日レビュー担当の先輩を指定して(わからなければ口頭で「PR 出しました!」でも大丈夫です)、レビューを待ちましょう。待っている間、余裕があれば隣の人の PR の「Files changed」タブを覗いてみるのも勉強になります(見方は 4.3 でやりましたね)。

レビュー → マージ → 本番で確認しよう

レビューで指摘が来たら、手元のファイルを直して、同じブランチでコミット & プッシュしてください。PR には自動で反映されるので、新しく PR を作り直す必要はありません。これもチーム開発の日常の流れです。

Approve をもらってマージされたら、いよいよ本番です。少し待ってから https://www.twinte.net を開いて、「主メンバー」に自分がいるのを確認してください。

おめでとうございます!あなたは今日から Twin:te 公式サイトに載っているメンバーです。 記念スクリーンショットを撮って、周りの人に自慢しましょう。そして、いま体験した「ブランチ → 変更 → PR → レビュー → マージ → 本番反映」の流れは、この先のすべての開発で同じです。もう怖いものはありません。

Footnotes

  1. Node.js に対する npm のようなものだと思っておけば今日は大丈夫です。興味がある人は「bun とは」で調べてみてください。 ↩

  2. 気になる人は src/components/organisms/Member.vue と OtherMember.vue を見てみてください。members.filter(member => member.isActive) のように、同じ配列を isActive でフィルタして出し分けています。 ↩

  3. 画像は src/components/particle/MemberItem.vue の中で、imagePath の文字列から動的に import されています。拡張子を省略すると .jpg 扱いになるのも、jpg / png 以外が使えないのも、このコードがそう書かれているからです。「仕組みが気になったら実装を読む」ができるのも、コードが手元にある強みですね。 ↩