このチュートリアルについて

研究室のサイトを作り直す

iCAR の Web サイト（icar.sfc.wide.ad.jp）を開いてみてください。

このサイトは 2016 年に作られ、それ以来ずっと 1 枚の HTML ファイルに手で書き足されてきました。メンバーは 2023 年、業績は 2024 年で止まっています。

更新が止まったのは、誰かが怠けたからではありません。1 人を追加するだけでも、700 行近いファイルの中から正しい場所を探し、前の人の書き方をまねてコピーする必要があります。触るのが怖いサイトは、だんだん誰も触らなくなります。

このチュートリアルでは、このサイトを誰でも更新しやすい形に作り直します。作り直しながら、Web とソフトウェア開発の基本を身につけます。

全体の地図

1. git: ファイルの変更を記録し、みんなで同じファイルを触るための道具
2. HTML と CSS: Web ページがどうできているか。今のサイトを手で直して、その大変さも体験します
3. フレームワーク: ページを部品とデータに分けて、楽に更新できるようにする仕組み
4. 公開: 新しいサイトを世界に出す

各章は「読んで学ぶ」と「手を動かす」の組になっています。読んだらすぐに試してください。

心構え: 全部を覚えなくていい

HTML のタグや git のコマンドを、すべて暗記する必要はありません。書くのは Claude Code に手伝ってもらえます。

その代わりに、次の 2 つを大事にしてください。

• どこを変えると、何が変わるのか（構造をつかむ）
• 変えた結果が正しいか、自分の目で確かめる（確認する）

AI は速く書けますが、間違えることもあります。結果が正しいかを判断するのは、あなたの役目です。

確認テスト

チェックリスト

• 今のサイトを開いて、古くなっていそうな情報を 3 つ見つけた
• このチュートリアルの 4 つの章の流れを言える