Lv.00

準備編 道具をそろえる

配布物はありません・読みながら手を動かす回

琥珀

琥珀からの依頼書

はじめる前に、道具をそろえてください。VSCode・Live Server・Node.js・Claude Code の4つです。

今日はAIにコードを書かせないでください。フォルダの中身を説明させるだけにしてください。

最後に、わざと壊したHTMLを html-validate にかけて、エラーが出るところまで見てください。

カンプと配布物

VSCode／Live Server／Claude Code／Node.js（配布物はありません・読むだけの回です）

手で書くところ

作業フォルダ／VSCode／Live Server／DevTools／HTMLの型を1回だけ写経／UTF-8

AIに任せるところと検品

Claude Code の導入と最初の設定／Cursor・ChatGPTを副で使うときの注意／html-validate

この教材の進め方

未来から来ました、AI秘書の琥珀です！ ここから一緒に、6つのサイトを作っていきます。

この練習所では、毎回おなじ3つを通します。手で書く／AIに書かせる／検品する。多くの入門教材は1つ目だけを教えて、多くのAI活用の記事は2つ目だけを教えます。ボクたちは3つとも通します。理由は単純で、分けておくと、壊れたときに自分で直せるからです。どこが自分の手で、どこがAIの手で、どこを機械が見たのかが分かれば、原因を探す範囲が一気に狭くなります。

次の回からは、レッスンごとに4つの配布物が付きます。

配布物使い方
HTMLカンプ完成形を実物のページで見る。ブラウザで開いて寸法を確かめる
PNG（1440・390）自分の画面と並べて見比べる
完成ZIP詰まったときだけ開く。最初から見ない
公開デモ動きと表示を確認する

作ったサイトは、そのままポートフォリオ（自分の作品集）に載せてかまいません。題材は架空のお店や会社なので、実在の相手に気をつかう必要もありません。

この回だけは配布物がありません。道具をそろえる回だからです。ここまでで画面はまだ触りませんが、「3つを分ける」が自分の言葉で言えれば OK です。

フォルダを1つ決める

最初にやるのは、練習のファイルを置く場所を1か所に決めることです。ホームフォルダ（macOSならユーザー名のフォルダ、Windowsなら C:\Users\あなたの名前）の直下に coding-practice を作り、その中をレッスンごとに分けます。

text
coding-practice/
  01-cafe/
  02-works/
  03-event/

フォルダ名とファイル名には、日本語・スペース・全角文字を使いません。あとでコマンドを打つときとURLになるときに、環境によって文字が化けたり、名前の途中で切れたりするからです。半角の英数字とハイフンだけにしておくと、この事故が起きません。

ここまでで画面がこうなっていれば OK：coding-practice の中に 01-cafe という空のフォルダが1つある状態。

VSCode を入れる

コードを書くエディタには VSCode（Visual Studio Code）を使います。公式サイトからダウンロードして、ふつうのアプリと同じように入れてください。

入れたら2つだけ設定します。

  1. 拡張機能（機能を後から足す部品）の検索欄で Japanese Language Pack を入れて、画面を日本語にする
  2. メニューの File → Open Folder から、さきほど作った 01-cafe フォルダを開く

開くのはファイルではなくフォルダです。 1つのサイトは複数のファイルでできていて、お互いを名前で呼び合っているからです。

フォルダを開いたら、左側のファイル一覧の「新しいファイル」から3つ作ります。

text
index.html
style.css
script.js

これは手で書く

HTMLの一番外側の型は、この教材で1回だけ写経します。次の回からはここに中身を足していくだけになるので、いまのうちに指で覚えておくと後がずっと楽です。

index.html に、次をそのまま書き写してください。

html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>練習用ページ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>こんにちは</h1>
  <script src="script.js"></script>
</body>
</html>

href="style.css" は相対パス（いま開いているファイルから見た道順）です。同じフォルダにあるので、名前だけで届きます。<meta charset="UTF-8"> は文字コードの宣言で、これが無いと日本語が記号の羅列になります。VSCode の右下に UTF-8 と出ていることも一度だけ確認してください。

ここまでで画面がこうなっていれば OK：VSCode の左側に index.html style.css script.js の3つが並んでいる状態。

Live Server を入れる

保存するたびに自分でブラウザを更新するのは、続きません。拡張機能の検索欄で Live Server を入れてください。

入れたら index.html を右クリックして Open with Live Server を選びます。ブラウザが開き、アドレス欄が http://127.0.0.1:5500/ のような表示になります。

このアドレスで開くことに意味があります。ファイルを直接ダブルクリックすると file:// で開きますが、後のレッスンで出てくる外部ファイルの読み込み・動画・アクセス解析は、file:// では動きません。最初から http:// で見る癖を付けておくと、「本番では動くのにローカルでは動かない」で悩む時間がまるごと消えます。

index.html の「こんにちは」を別の言葉に変えて保存してみてください。ブラウザが勝手に変わります。

ここまでで画面がこうなっていれば OK：保存した瞬間に、ブラウザの文字が書き換わる状態。

Node.js を入れる

Node.js は、この教材では検品コマンドを動かすためだけに入れます。サイトのコードそのものには一切出てきません。公式サイトから LTS 版（長期サポート版）を入れてください。

入ったかどうかは、VSCode のメニュー Terminal → New Terminal で開くターミナルに、次を打って確かめます。

bash
node -v
npm -v

どちらもバージョンらしき文字が返ってくれば入っています。一緒に npx という道具も入ります。これは必要なものをその場で取ってきて1回だけ実行する仕組みで、この先の検品はほぼ全部これで動かします。自分のパソコンに道具を溜めこまずに済みます。

ここまでで画面がこうなっていれば OK：ターミナルで node -v を打つと、バージョンが1行返ってくる状態。

Claude Code を入れて、最初の設定をする

主に使うAIは Claude Code です。ターミナルの中で動いて、いま開いているフォルダのファイルを読める、というのが他との一番の違いです。

macOS のターミナルでは、これを実行します。

bash
curl -fsSL https://claude.ai/install.sh | bash

Windows の PowerShell では、これを実行します。

text
irm https://claude.ai/install.ps1 | iex

入ったかどうかは claude --version で確かめます。バージョンが1行返れば成功です。

次に、さきほどの 01-cafe フォルダに移動してから claude と打って起動します。初回はログインの案内が出てブラウザが開くので、画面の指示どおりに進めてください。Claude Code を使うには Claude の有料プランの契約が必要です。プランの種類と入り方は変わることがあるので、Claude Code のセットアップ（公式） の案内に従ってください。起動中に /help と打つと、使えるコマンドの一覧が出ます。

今日この道具でやることは、1つだけです。次の文をそのまま貼ってください。

text
いま開いているフォルダに、どんなファイルがありますか。
ファイルの中身は変更しないでください。
ファイル名の一覧と、それぞれが何のためのファイルかだけ、1行ずつ教えてください。

今日はコードを書かせません。 先に確かめるのは「このAIは、自分のフォルダの何をどこまで見ているのか」です。そこを知らないまま書かせ始めると、出てきたコードの良し悪しを判断する足場がなくなります。

ここまでで画面がこうなっていれば OK：ターミナルの中に、自分が作った3つのファイル名が説明つきで並んでいる状態。

Cursor と ChatGPT を副で使うときの注意

Cursor や ChatGPT を一緒に使ってもかまいません。ただし、この教材の間は3つだけ守ってください。

  1. 答えが割れたら、多数決で決めない。 同じ質問を2つのAIに投げて違う答えが返ってきたら、必ず自分で動かして確かめます。2対1で正しさは決まりません。
  2. ブラウザのAIに、鍵と個人情報を貼らない。 パスワード・APIキー・自分や他人の住所や電話番号は貼らない、と決めておきます。この教材で扱うのは架空の事業のコードなので、そちらは気にせず貼って大丈夫です。
  3. 入門の間、Cursor の自動補完は切る。 Cursor は打ち終わる前に先回りして続きを書いてくれますが、それだと自分が何を打ったのか記憶に残りません。設定画面のタブ補完（Tab）の項目をオフにしてください。項目名は変わることがあるので、見つからなければ公式の案内に従ってください。02以降で戻せば十分です。

ここまでで画面がこうなっていれば OK：副で使うAIを決めて、Cursor を使う人は補完がオフになっている状態。

DevTools を開いて、3つのタブを覚える

DevTools は、ブラウザに最初から入っている検査の道具です。macOS は Command + Option + I、Windows は F12 で開きます。

タブはたくさんありますが、覚えるのは3つだけです。

タブ何が見えるかいつ見るか
要素（Elements）いまその要素に当たっているCSS見た目が思ったとおりにならないとき
ConsoleJavaScript のエラーボタンなどが反応しないとき
Network何をどれだけ読み込んだかページが重いとき・画像が出ないとき

今日はこの1点だけ先に覚えてください。「書いたのに効かないCSS」は、要素タブで打ち消し線を探す。 要素タブでその要素をクリックすると、当たっているCSSが一覧で出ます。負けて無効になった指定には取り消し線が引かれています。線が引かれていれば「別の指定に負けている」、そもそも一覧に出てこなければ「その要素に届いていない」。原因がこの2つに割れるだけで、探す場所が半分になります。

ここまでで画面がこうなっていれば OK：h1 をクリックすると、右側にCSSの一覧が出ている状態。

検品コマンドを1回動かす

最後に、機械に聞く方法を試します。先にわざと壊してから直します。 直った状態しか見ていないと、壊れた状態がどう見えるのかを知らないままになるからです。

index.html の <h1> の下に、次の2行を足してください。<p> を閉じていないのがわざとの壊れです。

html
  <p>この段落は閉じ忘れています
  <div>次のかたまり</div>

保存したら、そのフォルダでターミナルから実行します。

bash
npx -y html-validate index.html

初回は道具の取得で少し待ちます。こう出れば、狙いどおり壊れています。

text
  11:2  error  Element <p> is implicitly closed by adjacent <div>  no-implicit-close

1 problem (1 error, 0 warnings)

左端の 11:2 は11行目の2文字目という意味です。エラーの文と行番号が出るので、ブラウザとにらめっこせずに直せます。</p> を書き足して、もう一度実行してください。

検品

bash
npx -y html-validate index.html

合格の見え方：何も表示されずに、次の入力待ちに戻る。エラーがあるときだけ、行番号と理由が出ます。

補足

<!DOCTYPE html> は大文字で書いてください。小文字の <!doctype html> でもブラウザは表示しますが、この検品では doctype-style のエラーになります。教材のサンプルコードもすべて大文字でそろえています。

ここまでで画面がこうなっていれば OK：壊したときはエラーが1件出て、直したときは何も出ない状態。

困ったときの3手

この先で詰まったら、次の順に試してください。上から順にやると、たいていは2手目までで片付きます。

  1. DevTools の要素タブを見る。見た目の問題は、ほぼここで場所が分かります
  2. npx -y html-validate index.html を打つ。タグの閉じ忘れや書き間違いは、機械のほうが速く正確です
  3. それでも分からなければ、Claude Code に原因だけ聞く

3手目のときは、こう頼みます。

text
思ったとおりに表示されません。コードは直さないでください。
原因の候補を、可能性の高い順に3つまで挙げてください。
それぞれ、DevToolsのどこを見れば確かめられるかを1行で書いてください。

「直さないでください」と書くのがコツです。直してもらうと目の前の1件は片付きますが、次に同じ症状が出たときにまた同じところで止まります。原因の探し方だけを受け取って、直すのは自分。これを01から06まで続けると、最後には自分で書かないサイトでも、どこが怪しいか見当がつくようになります。

補足

道具が全部そろうまでに時間がかかっても、まったく問題ありません。大丈夫、まだ間に合います。ここでそろえた4つは、01から06まで最後まで同じものを使い続けます。買い直しも入れ替えもありません。

ここまでで画面がこうなっていれば OK：VSCode・ブラウザ・ターミナルの3つが開いていて、保存すると画面が変わり、検品コマンドが動く状態。次の回から、実際にサイトを作りはじめます。

もっと聞きたいことがあれば、琥珀の公式LINEで質問できます。

琥珀の公式LINEで質問する（無料）