バイブコーディングからの続き
気の迷いで関数電卓ウェブアプリを作らせてみようと思った。ChatGPT-5とGemini 2.5 Proを組み合わせてあれこれ試した結果，画面と機能の設計がかなり面倒だということがわかった。そこで，出発点としてiPhoneの計算機アプリを使うことにする。その画面と裏画面（2nd関数で表示されるもの）をキャプチャーしてこのようなものとChatGPT-5 Thinkingにお願いした。
Ｑ（koshix）：Appleの計算機を参考に関数電卓のウェブアプリを作ってください。 ２つ画像があるのは1st関数リストと2nd関数リストを表現しています。(1) 背景は薄い空や海のような自然で流れるような水色にしてください。(2) 本体のボディはシルバーにして，ボタンとの違いをはっきりさせます。(3) 表示部分は液晶的な背景にモダンな文字デザインにします。(4) 有効数字は別列スイッチで6桁（単精度）と12桁（倍精度）の切り替え式に。(5) 同様に角度の単位のラジアンと度のも別列スイッチで切り替え式に。(6) %キーはやめてバックスペースキーBSにしてください。BSは一つずつ順に前の計算/入力状態に戻していくキーになります。(7) mc m+ m- mr はMC M+ M- MR と表示して区別できる薄緑色にしてください。(8) Rand は rnd と表示します。(9) EEキーは数字キーと同じ色に，Degキーは先ほどの%を盛ってきます。(10) 2nd ボタンは色を変えて，押した状態では 1st と表示するようにして下さい。(11) 計算式が薄いグレーの小文字で計算結果表示の上に出続けるようにしてください。(12) 最上段の選択ボタンと関数電卓型のボタンは不要です。ココまでの指示内容でで質問があればお願いします。よければ了解としてください。その後，こちらで進めてくださいという指示を出します。
400行くらいのHTMLファイル（javascriptプログラム）がでてきて，動作確認の粘り強い往復やり取りをしながら一日かかって，570行くらいのプログラムができた。まだバグがたくさん残留している模様。とりあえず 関数電卓ウェブアプリ を公開しておく。
図：関数電卓ウェブアプリの画面
javascriptの文法やprograminngの仕組みを知らなくても，論理的で正確な日本語表現で，デザインや機能に対する要件を伝えることや，AIからのフィードバックを検証してみる過程を繰り返しながら完成に近づけていくということを学習できそうではある。
その前段階として，簡単なjavascriptを出力するような課題をあたえ，その結果を読解するような演習がありうる。そんなこんなで生成AIを自由に使える環境さえあれば，これまでのものとは一味違うプログラミング教育は可能だと思う。むしろバイブコーディングの方が如何に適確に相手に要望を伝えるかという訓練ができるのではないか。
0 件のコメント:
コメントを投稿