プログラミングするのに準備はいらない！ChatGPTを使って最短手順でプログラミング！
目次
爆速プログラミング手順
ChatGPTは使えるようにしておいてください。
使うアプリは以下だけです。
使うアプリ
- メモ帳（PC標準のものでOK）
- ブラウザ（PC標準のものでOK）
「インストール」とか「環境設定」といった、余計な作業はいりません。
手順は以下。
プログラミング手順
- ChatGPTにプログラムを書いてもらう
- メモ帳に貼り付け、拡張子を “.html” にして保存
- 保存したファイルをダブルクリック
これだけです。
Step1：ChatGPTにプログラムを書いてもらおう
問い合わせフォームを作ってみましょう。このようにChatGPTに聞いてみます。
ChatGPT
HTMLとJavaScriptで、お問い合わせフォームのサンプルプログラムを書いて
・入力項目は、名前、メールアドレス、件名、お問い合わせ内容
・送信ボタンを押したら、入力内容をメッセージで表示
このようなプログラムを書いてくれました。（違うようになる場合もあります）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>お問い合わせフォーム</title>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<form>
<label for="name">名前:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email"><br><br>
<label for="subject">件名:</label>
<input type="text" id="subject" name="subject"><br><br>
<label for="message">お問い合わせ内容:</label>
<textarea id="message" name="message" rows="5" cols="30"></textarea><br><br>
<input type="button" value="送信" onclick="submitForm()">
</form>
<script>
function submitForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var subject = document.getElementById("subject").value;
var message = document.getElementById("message").value;
var displayMessage = "名前: " + name + "\nメールアドレス: " + email + "\n件名: " + subject + "\nお問い合わせ内容: " + message;
alert(displayMessage);
}
</script>
</body>
</html>Step2：メモ帳に貼り付けよう
ChatGPTが書いたコードの右上に、Copy code ボタンがあります。押してコピーしましょう。
メモ帳を立ち上げましょう。貼り付けメニューでコードを貼り付けます。
contact.html という名前で保存しましょう。
Step3：ページを立ち上げよう
contact.html をダブルクリックします。
Webページが表示されました！
送信ボタンを押すと、メッセージ表示されます。
お問い合わせ画面プログラムの完成です！
いろいろ改造してみよう
。。と、ここで終わってはいけません。ここからがプログラマーの本職です。
これを元手にして、いろいろ改造してみましょう！
改造してみよう！
- デザインを整えよう：色をつけたり、装飾したり
- レイアウトを整えよう：ボックスがきれいに並ぶようにしよう
- 入力を増やしてみよう：住所とか年齢とか
分からなければ、検索してみたり、ProgateやUdemyなどで勉強しなおしてみたり。。ChatGPTにまた聞いてみるのもいいですね。
まとめ
プログラミングで大変なこと、ひとつには、まずプログラミングを開始するまでの準備がたいへん、ということがあります。
たいへんなことはChatGPTにお願いして、がんがんプログラミングしましょう！
あわせて読みたい
【ChatGPT】爆速3Dグラフィックプログラミング
プログラミングするのに準備はいらない！ChatGPTを使って最短手順でプログラミング！ 爆速プログラミング手順 ChatGPTは使えるようにしておいてください。 使うアプリは…
あわせて読みたい
【速攻】ChatGPTで作る、Python簡単ゲームプログラム５選
簡単なゲームプログラムの製作は、プログラミングのよい練習になります。 ChatGPTを使えば、簡単なゲームプログラムのひな型がすぐに作れます。ゲーム作りでPythonプロ…
コメント