コース一覧
Vibe Coding入門
つくる:公開版完成

Vibe Coding入門

作りたいものを言葉で伝え、AIとの対話だけでWebアプリを作り上げるVibe Codingを、毎レッスン実際にAIとやり取りしながら体験します。プログラミングの知識は不要です。最後は自分のアイデアをアプリの形にして公開し、AIが間違えた1行を自分の手で直すところまで進みます。

1
はじめてのVibe Coding
01. Vibe Codingとは5分
02. アイデアを言葉にする5分
03. 最初のアプリを作る6分
04. 少しずつ変える5分
05. つくる:v1完成6分
06. 第1章クイズ5分
2
要望の伝え方
01. 具体的に頼む6分
02. 見た目の指示6分
03. 動きの指示6分
04. 比べて選ぶ6分
05. つくる:思い通り化6分
06. 第2章クイズ5分
3
うまくいかない時
01. エラーはそのまま渡す6分
02. 期待と違う時6分
03. 大きな変更は刻む6分
04. 壊れたら戻す6分
05. つくる:復旧訓練7分
06. 第3章クイズ5分
4
作品を仕上げる
01. 仕上げの磨き6分
02. スマホ対応を頼む6分
03. 公開する6分
04. 自分らしさを足す6分
05. つくる:公開版完成7分
06. 第4章クイズ5分
5
AIの限界とコードの世界
01. AIが間違える所を見る6分
02. コードを覗いてみる6分
03. 1行だけ自分で直す7分
04. つくる:AIと手の合わせ技7分
05. 第5章クイズ5分
6
総合制作
01. マイアプリ完成8分
02. シェアと振り返り7分
03. 完成と次のステップ6分

つくる:公開版完成

人に見せられる状態まで一気に持っていく

この章では、仕上げの磨き、スマホ対応、公開の準備、自分らしさの4つを1つずつ扱ってきました。この回は、その4つを1本の画面にまとめて適用します。ここを抜けると、あなたのアプリは「動くもの」から「人に見せられるもの」に変わります。

動くだけの状態と、公開できる状態のあいだにある差は、じつは細かい項目の積み重ねです。ひとつひとつは3分で終わるのに、抜けていると一目で分かってしまう。だからこそ、思い出しながらやるのではなく、確認する項目を決めておいて、毎回同じ順で潰します。

公開前に見る項目

公開の直前に見る項目は、次のとおりです。

  1. ページの題名が入っていて、中身がひと目で分かる言葉になっているか
  2. 文字の種類の宣言が入っていて、日本語が化けないか
  3. スマホで開いたときに、等倍で表示される宣言が入っているか
  4. 画面の外周に余白があり、端に文字が張り付いていないか
  5. 持ち主が分かる要素が1つ入っているか

この5つを、毎回同じ順で確かめます。順番を決めておく理由は、思いつきでやると必ずどれかを飛ばすからです。プロの現場でも、公開前の確認は頭の中ではなく一覧の形で持ちます。

まとめて頼むときのコツ

ここまでの章では「1回1変更」を徹底してきました。仕上げの段階だけは、少し違う頼み方をします。同じ性質の小さな変更は、まとめて番号付きで渡したほうが速く、事故も起きにくいからです。

プレーンテキスト

良い例 公開の準備をしてください。次の4つを入れてください。 1. index.html に title を入れ、「たろうのおこづかい帳」にする 2. index.html に charset を utf-8 で入れる 3. index.html に viewport の指定を入れる 4. style.css で body の外周に余白を 24px 入れる

まとめてよい変更と、分けるべき変更の線引きは、次のとおりです。互いに関係しない小さな追加はまとめてよく、画面の構造を作り替えるような変更は1つずつにします。今回はすべて小さな追加なので、まとめて渡せます。

頼んだあとに必ず見る

まとめて頼んだときほど、返ってきた画面の確認が雑になります。4つ頼んだら、4つとも入ったかを1つずつ見てください。番号付きで頼んでおくと、この確認が「1番は入った、2番も入った」という形で機械的にできます。

抜けがあったときは、全部を頼み直すのではなく、抜けた番号だけをもう一度伝えます。「3番の viewport が入っていないようです。追加してください」で通ります。

この回の演習

おこづかい帳を公開版に仕上げます。題名、文字の種類、スマホ表示の宣言、外周の余白、持ち主の名前の5つを入れてください。番号付きの1つの指示にまとめて渡してかまいません。返ってきたら、5つとも入っているかを自分の目で確かめてください。

完成条件

  • 小さな追加はまとめて番号付きで頼んでかまいません
  • 返ってきたら、頼んだ番号のぶんだけ入っているかを1つずつ確かめます

依頼

おこづかい帳を公開できる状態に仕上げてください。index.html に題名と文字の種類とスマホ表示の宣言を入れ、見出しを「たろうのおこづかい帳」に変え、style.css で画面の外周に余白を入れてください。

  • ・小さな追加はまとめて番号付きで頼んでかまいません
  • ・返ってきたら、頼んだ番号のぶんだけ入っているかを1つずつ確かめます

いまのコード

index.html

<h1>おこづかい帳</h1>
<ul id="list"><li>おやつ 300円</li><li>ノート 150円</li></ul>

script.js

style.css

AI への指示

残り 4 回
AI に依頼するにはが必要です

ヒント