プログラミング素人でも試せる！ ChatGPTでHTMLのオリジナルWebアプリを作成する方法：ChatGPT使いこなし術（1/2 ページ）

[井上晃，ITmedia]

　ChatGPTを使ってプログラミングやコーディングが簡単に行える──とは耳にするものの、普段からプログラミングを使う生活をしていなければ、その恩恵を感じづらいもの。

　そこで、プログラミング素人でも簡単に利用できる例として、Webデザインで使われるマークアップ言語「HTML」で書かれたファイル（.html）を出力し、オリジナルWebアプリのようなものを個人で使う方法を提案したい。

BMIを計算するWebアプリを作成してみよう

　今回は、ChatGPTを使って体重と身長からBMIの値を算出するWebアプリを作成してみよう。ChatGPTに対して「体重と身長からBMIを計算するWebアプリをHTMLを使って作成してください。」と指示する。

「GPT-3.5」を使って「体重と身長からBMIを計算するWebアプリをHTMLを使って作成してください。」と指示した場合の出力例。右上にある「コードをコピーする」をクリックしよう

ちなみに、出力の末尾には「このHTMLファイルを作成し、ブラウザで開くと、体重と身長を入力できるフォームが表示されます。それぞれの値を入力し、"Calculate"ボタンをクリックすると、BMIが計算され、その結果が表示されます。」のように使い方についても解説されている

　コピーしたコードをテキストエディタなどにペーストし、ひとまずプレーンテキスト（.txt）としてデスクトップなどの分かりやすい場所に保存しよう。その後、保存したファイルの拡張子を」.html」に変換する。

例えば、Macの場合、コピーしたコードを「テキストエディット」にペーストし、「command＋option＋T）を同時押下して、「.txt」に変換してから保存操作を実行する

デスクトップに保存したファイルの拡張子を「.txt」から「.html」に変更。アラートが表示されたら「“.html”を使用」を選択しよう

　後は作成したHTMLファイルをブラウザアプリで開いた新規タブに対してドラッグ&ドロップすればOKだ。

「Safari」で開いた新規タブに、HTMLファイルをドラッグ&ドロップする

ChatGPTで作成したコードがWebアプリとして表示された