プログラミングするのに準備はいらない!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ページが表示されました!
![お問い合わせフォーム](http://plainprogram.com/wp-content/uploads/2023/05/contact.png)
送信ボタンを押すと、メッセージ表示されます。
お問い合わせ画面プログラムの完成です!
いろいろ改造してみよう
。。と、ここで終わってはいけません。ここからがプログラマーの本職です。
これを元手にして、いろいろ改造してみましょう!
改造してみよう!
- デザインを整えよう:色をつけたり、装飾したり
- レイアウトを整えよう:ボックスがきれいに並ぶようにしよう
- 入力を増やしてみよう:住所とか年齢とか
分からなければ、検索してみたり、ProgateやUdemyなどで勉強しなおしてみたり。。ChatGPTにまた聞いてみるのもいいですね。
まとめ
プログラミングで大変なこと、ひとつには、まずプログラミングを開始するまでの準備がたいへん、ということがあります。
たいへんなことはChatGPTにお願いして、がんがんプログラミングしましょう!
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://plainprogram.com/wp-content/uploads/2023/05/chatgpt-fastprogramming-graphic-300x169.jpg)
【ChatGPT】爆速3Dグラフィックプログラミング
プログラミングするのに準備はいらない!ChatGPTを使って最短手順でプログラミング! 爆速プログラミング手順 ChatGPTは使えるようにしておいてください。 使うアプリは…
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://plainprogram.com/wp-content/uploads/2023/06/chatgpt-python-300x169.jpg)
【速攻】ChatGPTで作る、Python簡単ゲームプログラム3選
簡単なゲームプログラムの製作は、プログラミングのよい練習になります。 ChatGPTを使えば、簡単なゲームプログラムのひな型がすぐに作れます。ゲーム作りでPythonプロ…
コメント