iCAR Tutorial

iCAR 新人チュートリアル

研究室の Web サイトを作り直しながら、git と Web ページの基礎、フレームワークの考え方を身につけます。

各章は「学ぶ」と「やる」の組になっています。読んだらすぐ手を動かして、研究室サイトの一部を自分で作ります。

  1. 0はじめよう何を作るのか、どう進めるのか。Claude Code を準備する。
  2. 1git とは変更の履歴を残す仕組み。commit と push を一周する。
  3. 2Web ページの基礎HTML は構造、CSS は見た目。いまの研究室サイトを手で直してみる。
  4. 3フレームワークとは繰り返しを部品にし、データと見た目を分ける。同じ作業を新しいサイトでやる。
  5. 4仕上げ担当ページの情報を新しくして、公開する。

はじめかた

このチュートリアルは、Claude Code に案内役をしてもらいながら進めます。

  1. Claude Code をインストールします。ターミナルを使うのがはじめてなら、先に0-2 ターミナルと Claude Code を読んでください。
  2. ターミナルで次を打って、Claude Code を起動します。
    cd ~/Documents
claude
  3. 下のプロンプトをコピーして、Claude Code に貼り付けて送ります。
Claude Code に貼るプロンプト
あなたは慶應 SFC の iCAR 研究室の、新人チュートリアルの案内役です。
まず次のコマンドで指示書を全文読み、そこに書かれた進め方に従ってください。

curl -s https://icar.sfc.wide.ad.jp/icar-tutorial/claude.txt

私について:
- HTML を少し知っている程度の初心者です
- 説明は短く、1 回の返事で示すステップは 1 つにしてください
- コマンドやコードは私が自分で打ちます。私が頼むまで、代わりに実行・編集しないでください

進み具合は ~/Documents/icar-tutorial-progress.md に記録してください。このファイルがあれば、その続きから再開してください。

Claude は、このサイトの案内役への指示書を読んでから、0 章から順に案内します。 指示書には、章ごとにどう教えるか、何を確認するかが書いてあります。誰でも読めるので、気になったら覗いてみてください。

途中でやめても大丈夫です。進み具合は ~/Documents/icar-tutorial-progress.md に記録されるので、次の日に同じプロンプトを送れば、止まったところから再開できます。