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

0

2024年09月11日 15:41  ITmedia Mobile

  • チェックする
  • つぶやく
  • 日記を書く

ITmedia Mobile

「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を通じて作成することができる。いろいろとアイデアを練ってみて欲しい。



    ランキングIT・インターネット

    前日のランキングへ

    ニュース設定