CSSを持たない Headless な UI ライブラリと ChatGPT によるマークアップ生成を試してみる
いまさら気づいたけど Headless 系のUIライブラリが一番 AI と相性いいのではないか。 ロジックはプログラマで書けて自由度高いし、コンポーネントのネスト構造から意図を読み取れるだろうし、class 名は自由に書けるから意図を表明しやすい。 それをプロンプトとして ChatGPT or Codex にそのまま投げて書かせる、ができる。 というわけで vite + react + radix-ui + vanilla-extract で実験してみた。 プロンプト あなたは凄腕のマークアップエンジニアです。 radix-ui は Headless UI ライブラリで、UIとしてのセマンティクスのみを持っています。 次のコードは React + radix-ui + vanilla-extract で書かれた React コンポーネントです。 // Popover.tsx import
ChatGPTとCopilotに要件だけ伝えて自動コーディングしてもらう(AIペアプロ) - Qiita
※この記事は個人的な実験の記事です※ ※実験内容は随時記事を更新していきます※ 24時間いつでも手助けをしてくれるGitHub Copilotさん。 24時間文句も言わずにいつでも親切に回答してくれるChatGPTさん。 そんな両者に要件だけ伝えて自動コーディングしてもらおう(AIペアプロ)、という実験記事です。 Copilot自動コーディング動画 以下の動画は、最初に要件だけをコメント入力して、それ以降はCopilotの提案を受け入れているだけになります。 コメントの入力と提案の受け入れ以外は、全くタイピングをしていません。 コメントの内容は Next.jsでボタンをクリックしたら画像を選択してブラウザに表示する です。 完成品 要件のコメントと受け入れだけをしたコードを実際に動かしてみました。 自動コーディングしてもらったコードは以下の通りです。 // Next.jsでボタンをクリック
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
