ターミナルとエディタを用意し、AIに小さなプログラムを1つ作らせて動かす一連の流れを体験する
「書けなくていい。動かせればいい。」
| このレベルで身につけること 本格的に学び始める前に、AIに小さなプログラムを書かせて、それを自分のパソコンで実際に動かす体験をする。「言葉で頼む → コードが返る → 動く → 直してもらう」という、このコース全体の流れを、まず手でつかむ。 学習の流れ：① 道具をそろえる → ② AIにプログラムを書かせる → ③ 保存して動かす → ④ AIに直してもらう → ⑤ 気づきをメモする |
このレベルにテストはありません。 知識ではなく「体験」が目的です。コードが読めなくても、まったく問題ありません。 Level 1からは、ターミナルで動く本格的なAIコーディングツール（Claude Code など）を使っていきます。
今回はインストールの少ない、いちばん簡単な方法で体験します。準備するのは2つだけです。
| 道具 | 役割 | 用意の仕方 |
|---|---|---|
| テキストエディタ | コードを書いて保存する場所 | パソコン標準の「メモ帳」（Windows）「テキストエディット」（Mac）でOK。慣れたい人は VS Code（code.visualstudio.com）を入れると以降が快適 |
| Webブラウザ | 作ったページを表示して動かす | いつも使っているChrome・Edge・Safari などでOK |
今回は HTML（Webページを作る言葉）を使います。HTMLは、ファイルをブラウザで開くだけで動くので、 難しいインストールが要りません。「はじめの一歩」にぴったりです。
| ポイント | 最初から完璧な開発環境はいらない。「書いて保存する場所」と「動かす場所」さえあれば、もう始められる。 |
ブラウザで ChatGPT（chatgpt.com） または Claude（claude.ai） を開き、次のようにそのまま頼んでみてください。
「HTMLで、ボタンが1つあるだけのページを作って。ボタンを押すと『こんにちは！』とポップアップが出るようにして。コードだけ、そのままコピーできる形で出して。」
すると、次のようなコードのかたまりが返ってきます（中身はだいたいこんな形です）。
<!DOCTYPE html>
<html>
<head>
<title>はじめてのページ</title>
</head>
<body>
<button onclick="alert('こんにちは！')">押してね</button>
</body>
</html>
| ポイント | コードの意味が分からなくて大丈夫。今は「頼むと、動く部品が返ってくる」という感覚をつかむことが目的。 |
hello.html にして保存する（拡張子を .txt ではなく .html にするのが大事）。hello.html を ダブルクリックしてブラウザで開く。うまく動かないときは、エラーの様子（または「ボタンが出ない」などの状況）を、そのままAIに伝えてください。 「さっきのページが動かない。ボタンが表示されない」と書けば、AIが原因と直し方を教えてくれます。
| ポイント | 「AIが書く → 自分が保存して動かす → 結果をAIに伝える」。この往復こそが、AIコーディングの基本リズム。 |
動いたら、続けて頼んでみましょう。会話を続けるだけで、AIが直してくれます。
| 頼む文（例） | 体験してほしいこと | |
|---|---|---|
| ① | 「ボタンの文字を『あいさつする』に変えて」 | 言葉で頼むと"修正"してくれる |
| ② | 「背景を薄い水色にして、ボタンを大きくして」 | 見た目もAIが直せる |
| ③ | 「押すたびに、今の時刻も一緒に表示して」 | 機能を"追加"できる |
そのたびに新しいコードを受け取り、hello.html に貼り直して保存 → ブラウザを更新（再読み込み）すると、変化が見られます。
| ポイント | 最初から完璧を狙わず、小さく頼んで・動かして・また頼む。この繰り返しで、つくりたい形に近づいていく。 |
| 中身を読まずに、AIのコードをそのまま信じてしまう 初めてだと、返ってきたコードが「動いた＝完全に正しい」と感じてしまいがちです。実際には、見た目は動いても意図と違う動きや不要な処理が混ざっていることがあります。今回のような遊びなら問題になりませんが、仕事のデータや公開するものでは事故のもとです。 学び：AIのコードは"下書き"。動いたら終わりではなく、「何をしているコードか」をAI自身に説明させて確かめる習慣を、最初からつけておく。 |
体験できたら、次のことを自分で確認してみてください。テストではないので、できた項目に心の中でチェックを入れるだけでOKです。
hello.html として保存し、ブラウザで開いてボタンが動いたやってみて感じたこと・驚いたこと・難しかったことを、ページ下部の「このレベルの気づき」に書き残しておきましょう。 Level 5まで進んだあと読み返すと、自分の成長がよくわかります。
準備運動は完了です。次は Level 1 Claude Code を使う へ進み、ブラウザではなくターミナルで動く本格的なAIコーディングツールに触れていきましょう。
感じたこと・気づいたこと・分からなかった点を一言どうぞ（任意）。送信すると講師に届きます。