プログラミング素人でも試せる！ ChatGPTでHTMLのオリジナルWebアプリを作成する方法

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

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

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

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

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

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

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

　HTMLファイルをブラウザ上で起動できたら、フォームに数値を入力して、「Caluculate」ボタンをクリックする。これでBMIの数値が算出される。

●ChatGPTに記述の解説をしてもらう

　なお、出力した言語の内容を理解したい場合には、ChatGPTに解説を交えてもらうのがおすすめだ。

　例えば、「先ほどのHTMLファイルに対して、コメントを使い、プログラミング初心者でも理解できるようにコードの解説を細かく記載してください」と指示をすれば、HTMLの記述内に、実行には影響しないよう「コメント」として解説が添えられた状態で出力される。

　Webデザインやプログラミングをかじっているものの、出力したファイルの内容が理解できない場合や、作成したコードを元に勉強を重ねたい場合には、こうしたコメントを交えた出力を使ってみるとよいだろう。

　なお、本稿で紹介したBMI算出の他にも、例えば、ガソリン代を計算するためのフォームを作成したり、サイコロの目をランダムに表示したりする簡易アプリなど、シンプルな構成であれば、さまざまなオリジナルツールをChatGPTを通じて作成することができる。いろいろとアイデアを練ってみて欲しい。