画面を3枚に剥がすと、直し方が見える

ボタン1つにも、指示書が3枚

予約サイトの「予約する」ボタン。文字があり青く塗られ、押すと画面が変わります。

これらはそれぞれ別の指示書に書かれています。

指示書を1枚ずつ外してみよう

板をタップして1枚ずつ外し、下の画面で「押す」を試してみてください。とくに動きを外したとき、数字がどうなるか注目です。

外れたものに、名前を付ける

見た目を外しても文字やボタンは残ります。中身を置くのがHTML、色や形を決めるのがCSSです。

役割が違うので見た目だけ剥がせます。

押しても増えない理由

動きを外すと押せても数字が増えません。押した後の処理を書くのがJavaScriptです。

3枚そろって触って動く画面になります。

用語と意味をつなごう

置くもの、見せ方、動き。3枚の役割は重なりません。

○か✕か

○か✕か：見た目の指示書を外しても、ボタンを押したときの反応はそのまま残る。

答え：○。見た目と動きは別の指示書です。色や大きさが崩れても、押されたときの処理はそのまま動きます。

順番がずれると、別物になる

指示書は上から順に実行されます。「数字を表示する」が「1を足す」より先にあると、前の数字のままになります。

こうした不具合をバグといいます。

ボタンを押したときの指示が「数字を表示する」「1を足す」の順に並んでいます。押した直後の画面はどうなるでしょう。

問題：ボタンを押したときの指示が「数字を表示する」「1を足す」の順に並んでいます。押した直後の画面はどうなるでしょう。

1. 1を足す前の数字が表示される（正解）
2. 1を足したあとの数字が表示される
3. どちらの行も実行されずに止まる

解説：上から順に動くので、表示が先に済んでから1が足されます。画面の数字は1つ遅れたままです。

その行を、誰が書く？

小さなアプリでも指示書は数百行になり、長いあいだ人が手で書いてきました。

いまは「押すと数字が増えるボタンを付けて」と頼めば、生成AIがその行を書きます。

書く人から、決める人へ

この作り方がVibe Codingです。名付けたカルパシーは、コードがあることすら忘れて雰囲気で任せる作り方だと書きました。

任せるほど、人の役目は何を作るか決め、確かめることになります。

AIに頼んでアプリを作るとき、人の側に残る仕事はどれでしょう。

問題：AIに頼んでアプリを作るとき、人の側に残る仕事はどれでしょう。

1. 何を作るかを決めて、できたものが望みどおりか確かめること（正解）
2. 指示書の1行ずつを、AIより先に自分で書いておくこと
3. AIが書いた指示書を、あとで読めるように暗記すること

解説：AIは頼まれた通り書けますが目的は知りません。何を作るか決め、確認する作業が人の仕事です。

3枚を知ると、頼み方が変わる

「なんか変です」だけだと、AIは3枚すべてを調べ始めます。

「ボタンの色だけ直して」と言えれば、CSSだけ見れば済みます。

ボタンは押せるのに、押しても数字が増えません。直す場所をいちばん正しく絞れている頼み方はどれでしょう。

問題：ボタンは押せるのに、押しても数字が増えません。直す場所をいちばん正しく絞れている頼み方はどれでしょう。

1. ボタンを押したときの動きを直して（正解）
2. ボタンの色と大きさを直して
3. 画面にボタンを置き直して

解説：押せるならHTMLは問題なく、見た目も平気です。押した後の処理、つまりJavaScriptの担当です。

画面の読み方

• 画面は、中身・見た目・動きの3枚の指示書でできている
• 指示書は上から順に実行され、順番のずれもバグになる
• 書くのはAI、何を作るか決めて確かめるのは人
• 症状から3枚のどれかを絞って頼むと、早く直る

ボタンの文字は出ているのに、色も大きさも整っていない素っ気ない表示です。押すと数字は増えます。外れているのはどの指示書でしょう。

問題：ボタンの文字は出ているのに、色も大きさも整っていない素っ気ない表示です。押すと数字は増えます。外れているのはどの指示書でしょう。

1. 見た目を決めるCSS（正解）
2. 中身を置くHTML
3. 動きを書くJavaScript

解説：文字が出ていて押すと動くので、HTMLとJavaScriptは無事です。おつかれさまでした。では、送信した1通のメッセージは画面の外のどこへ行くのでしょう。次は、その旅を1駅ずつ追いかけます。