『namael』開発記録 第7回・ChatGPTで究極のやっつけWEBデザイン
>> 前の記事「第6回・AIは怒らないらしいので思い切って聞いてみた」はこちら。
データベースのカンタンな設計が終わったら、次はいよいよ外観の仮組みだ。
名前募集記事の入力フォーム作成
先にデータベースを設計してあれば、こんなざっくり命令でもChaatGPTさんはキッチリと仕事をしてくれる。
↓ ↓ ↓
具体的には、ChatGPTが勝手にname_requestsテーブルに存在する各項目の内容を参照し、ネーミングの募集情報として必要なもの（※たとえば募集タイトルや募集要項といった内容）について入力を求めるフォームを作成してくれるワケだ。
しかも、ただ闇雲にテーブル内の全項目について入力フォームを作るのではない。たとえば登録日時のような、ユーザ側に入力を求めるまでもない項目については勝手にhidden属性（＝自動取得）の設定まで入れてくれる。
これが、出力されたフォーム「部分」。
↓ ↓ ↓
魔法のおまじない「bootstrap5準拠」
わざわざ HTMLフォーム（bootstrap5準拠）と書いてあるが、bootstrapというのは「CSSフレームワーク」といって、最低限見られる程度のWEBデザインを簡単に作れる便利機能であり、規格のひとつみたいなモンだと思ってほしい。
HTMLを生成してもらう際、この一言「bootstrap5準拠」を入れておけば、ChatGPTは勝手にこのbootsrtrap5の命令セットをbootstrap5の配信元から呼び出し、それなりの見た目で生成してくれる。
上のフォームを見て、どこがそれなり？ 大したコトねーじゃん……と思う人もいるかも知れないが、スマホやタブレットで表示した場合に自動で見た目を調整してくれる機能（＝レスポンシブ機能）がある。そのため、デザイナーでない場合はかなり助かるのだ。
入力内容の処理もやってくれた
ここで、さっきの指示をもう一度おさらいする。
この命令、実は「（入力用の）htmlフォーム」と「（入力内容をDBに保存するための）phpファイル」の２つを作ってくれという命令だった。
ChatGPT4（当時）はこんなアバウト命令もちゃんと拾いあげ、「よきにはからって」くれた。
↓ ↓ ↓
データベースへの接続情報はどうしても見せられない（そもそもChatGPTに食わせていない）ので、ダミー情報が出力されているけど、そこを自分のサーバー情報やパスワード等に置き換えればちゃんと動く。
まあ、この記事は入門書じゃないし、AIを使ったWEBアプリ開発の雰囲気だけ味わってもらいたいと思って書いているので、コードの全文公開とかはしないんだけど……
いままでやってきたこと
第1回（アクセス爆死でのたうち回っただけ）～今回まで、簡単にやってきたことをおさらいしたい。
大体これが、ChatGPTを使ってWEBアプリを作るための基本的な順序になると思う。
↓ ↓ ↓
アプリでやりたいことを考える（※これは作者自身の仕事）
やりたいこと（要件）に見合った環境を用意する
やりたいことをChatGPTに話し、必要な機能を実現するためのファイル構成（＝どんなファイルが必要になるか）やデータベース構造（＝どんなデータをどんな形で持つ必要があるか）を確認する。
（記事では触れていないが）データベースはここで実際に作ってもいい。作っておいた方が、あとの作り込みでChatGPTとの間に「阿吽の呼吸」が通じるので便利だ。
データベース構造をもとに、各ファイルを作成していく。
次回以降に触れていくが、手順5から先は何と言うか……延々と機織り（はたおり）をしている気分だった。何をもって「機織り」と表現したかは、次回をお待ちいただきたい。
>> 次の記事『第8回・AIプログラミングは「機織り」とみつけたり』はこちら。
