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

» 2024年09月11日 15時26分 公開
[井上晃ITmedia]
前のページへ 1|2       

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

photo 身長と体重を入力して「Calculate」ボタンをクリックすると、BMIが算出された。なお、今回の例では、数値に問題はなさそうだった

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

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

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

photo 解説をコメントで指示した場合の出力例

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

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

前のページへ 1|2       

Copyright © ITmedia, Inc. All Rights Reserved.

アクセストップ10

2026年02月10日 更新
  1. 「iPhoneの調子が悪いです」の文言、なぜアイホンのFAQに? 実はAppleと深く関係 (2026年02月08日)
  2. 総務省有識者会議が「手のひら返し」な我が国への示唆――日本を国際標準から遅れさせたのは自らの愚策のせい (2026年02月08日)
  3. 「東京アプリ」で1.1万円分をゲット、お得な交換先はどこ? dポイント10%増量+楽天ペイ抽選が狙い目か (2026年02月05日)
  4. KDDI、楽天モバイルとの「ローミング重複エリア」を順次終了 松田社長が言及 (2026年02月06日)
  5. 楽天モバイル、1000万回線突破も残る「通信品質」の課題 5G SAの早期導入とKDDIローミング再延長が焦点に (2026年02月07日)
  6. Googleが台湾のPixel開発拠点を公開 「10 Pro Fold」ヒンジ開発の裏側、“7年サポート”を支える耐久テスト (2026年02月09日)
  7. 東京アプリ、PayPayがポイント交換先に追加される可能性は? 広報に確認した (2026年02月05日)
  8. ソフトバンク、短期解約を繰り返す「ホッピングユーザー」を抑制 その理由は? (2026年02月09日)
  9. 東京アプリ、PayPayとWAON POINTをポイント交換先に追加 交換時期は「決まり次第案内」 (2026年02月09日)
  10. 「小型iPhone SEを復活させて」──手放せない理由SNSで話題 どこが“ちょうどいい”と評価されるのか (2025年11月29日)
最新トピックスPR

過去記事カレンダー

2026年