Infoseek 楽天

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

ITmedia Mobile 2024年9月11日 15時35分

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

この記事の関連ニュース