新しいサイトで追加する

新しいサイトの branch に移る

新しいサイトは、同じリポジトリの renewal という branch で作っています。main（今のサイト）とは別の枝なので、公開中のサイトには影響しません。

1. 研究室サイトのフォルダで、最新の状態を取り込みます。

   cd ~/Documents/sfc-icar.github.io
   git switch main
   git pull

2. renewal から、自分の作業用の branch を作ります。

   git switch renewal
   git pull
   git switch -c renewal-あなたの名前

3. 手元でサイトを動かします。

   npm install
   npm run dev

   表示されたアドレスをブラウザで開いて、新しいサイトが見えれば準備完了です。

やってみよう: 自分を追加する

1. src/data/members.ts を開きます。

2. 一覧の最後に、自分の行を 1 行足します。

   { name: 'あなたの名前', en: 'Your Name', role: '環境情報学部', photo: 'you.jpg' },

3. 写真を public/img/ に入れます。

4. ファイルを保存すると、ブラウザの表示が自動で更新されます。自分のカードが並んでいることを確かめてください。

5. commit して push します。

   git add src/data/members.ts public/img/
   git commit -m "メンバーに自分を追加"
   git push -u origin renewal-あなたの名前

2 章で同じことをしたときと比べてみてください。書いたのは 1 行です。row に何人入っているかを気にする必要もありません。並べ方は部品の側で決まっているからです。

やってみよう: 担当のセクションを移す

今のサイトには、まだ新しいサイトに移していないセクションがあります。先輩から担当を 1 つ割り当ててもらってください。

進め方は、メンバー欄と同じです。

1. 今のサイトの index.html で、担当セクションの HTML を読む。繰り返されている「型」はどこか、人や項目ごとに違う「中身」はどこかを見分ける
2. 中身を src/data/ のデータにする
3. 型を src/components/ の部品にする
4. ページで、データを部品に渡して並べる

Claude Code にコードを書いてもらってかまいません。ただし、1 の「型と中身の見分け」だけは自分でやって、Claude に伝えてください。ここがこの章で一番身につけてほしい力です。

チェックリスト

• 新しいサイトを npm run dev で手元で動かせた
• members.ts に 1 行足して、自分のカードが表示された
• 担当セクションの「型」と「中身」を見分けて、新しいサイトに移した
• 2 章と 3 章のメンバー追加の違いを、自分の言葉で説明できる