3行テンプレートからお願いの文章を作ってAIに送り、「今日の気分で選ぶレシピ診断」を、自分のパソコンで動かせるようになります。
お願いを送る → AIがコードを書く → 開いて動かす。この流れで作ります（画面はイメージです）。
お願いの文章を作る
レッスン3の3行を、そのまま文にします。最後に「HTMLファイル1枚で動くように」と「全文を1つにまとめて」を足しておくと、レッスン2のやり方でそのまま開けます。
・使うのは、仕事帰りで献立を考えるのがおっくうな私です
・気分を4つ（元気いっぱい／ちょっとつかれた／のんびりしたい／ごほうびがほしい）から選ぶと、おすすめのレシピが1つ出ます
・HTMLファイル1枚で動くようにしてください
・コードは、ファイルにそのまま保存できるように、全文を1つにまとめて出してください
作って、動かしてみよう
Skillhub で実際に作った例です。気分を押すと、下におすすめが出ます。
見た目が、この例とちがっても大丈夫です。AIの返事は、同じお願いでも毎回少しずつちがいます。「気分を選ぶと、おすすめが出る」が動いていれば、成功です。
できたら、もう1つ確かめよう
このあと直してもらうために、気になったところをメモしておきます。たとえば、こんなところです。
- スマホで開くと、どう見えるか（パソコンのブラウザの幅をせまくしても確かめられます）
- 結果が料理の名前だけで、さみしくないか
- ほかに選べたらうれしいこと（料理にかけられる時間、など）はないか
メモは、次のレッスンでそのまま使います。
自分の3行でも作ってみよう
レッスン3で自分の3行を書いた人は、同じ形でお願いを作って送ってみましょう。「HTMLファイル1枚で動くように」「全文を1つにまとめて」の2行は、どんなものを作るときにも使えます。
つまずきやすいところ
こうなったら：コードが長くて、途中で切れてしまった
こうする：「続きを出してください」と送ります。うまくつながらないときは、「全文をもう一度、1つのコードの枠で出してください」と頼みます。
こうなったら：開いたら真っ白で、何も出ない
こうする：まずレッスン2の「保存のしかた」を見直します。それでも真っ白なら、次のレッスン5のやり方で、AIに様子を伝えて直してもらいます。
こうなったら：AIが「どんな見た目にしますか？」などと質問してきた
こうする：分かる範囲で答えればOKです。迷ったら「おまかせします。シンプルで見やすくしてください」と返します。
- お願いの文章は、3行テンプレートをそのまま文にして作る
- 「HTMLファイル1枚で動くように」「全文を1つにまとめて」を足すと、すぐ開ける
- 動いたら成功。気になるところはメモしておく
次のレッスンでは、メモした「ここが違う」をAIに伝えて、直してもらいます。
確認クイズ
Q1. 作例と見た目がちがうものができました。失敗？
Q2. コードが途中で切れたときは、AIに何と送る？
こたえ
- Q1：失敗ではありません。AIの返事は毎回少しずつちがいます。お願いしたとおりに動いていれば成功です。
- Q2：「続きを出してください」。または「全文をもう一度、1つのコードの枠で出してください」。