見出し画像

【初心者向け】ChatGPT 4oでプログラミング学習をするとき、マジで使える「プロンプト」集!

こんにちは! 本業はライター、副業はエンジニアの"なつめ"です。noteをご覧くださり、本当にありがとうございます!

最初に「本記事の要約・関連記事の紹介」をした後、コピペで使えるプロンプトを解説していきますね。


ゼロからのプログラミングに効く! ChatGPT プロンプト集
後ほど詳しく解説します!
初心者がChatGPT 4oでプログラミング学習をする上で、効果抜群のプロンプトを使っている様子
初心者がChatGPT 4oでプログラミング学習をする上で、効果抜群のプロンプトを使っている様子


ギャルGPT対話 —完成したサイコロアプリをブラウザで動かす方法の解説
ギャルGPT対話 —完成したサイコロアプリをブラウザで動かす方法の解説



0.この記事でつくるサイコロアプリ(ダウンロードして試してみよう!)



加えてブラウザで動く、サイコロアプリを実際に作成していきます。完成したアプリを、zip形式でダウンロードすることも可能です!

Note.  解凍して「dice_game.html」をブラウザで開くと動きます

サイコロアプリの画面


ChatGPT に教えてもたったサイコロアプリをブラウザで動かしている様子・その1
ChatGPT に教えてもたったサイコロアプリをブラウザで動かしている様子・その1
ChatGPT に教えてもたったサイコロアプリをブラウザで動かしている様子・その1
ChatGPT に教えてもたったサイコロアプリをブラウザで動かしている様子・その1

サイコロアプリのダウンロード

Note.
  解凍して「dice_game.html」をブラウザで開くと動きます


1.この記事を【3行で要約】!


プログラミング「初心者」特化のChatGPT 4o用プロンプト例
プログラミング「初心者」特化のChatGPT 4o用プロンプト例

・ プログラミングができるようになりたいけれども、苦手意識が強くて困っている人を対象に、GPT4oを最強の家庭教師にするプロンプトを紹介!

・ 楽しく面白く、ゲームのように学ぶには「欲しいアプリを!」「小さく!」「noteにメモって!」の、3点セットが大事!

・ 実際にサイコロアプリを作りながら、プログラミング学習のコツを学べる

3行要約


「AIの個別指導って!? 数十万円のプログラミングスクールより良いの?」と感じるのは、ごくごく自然な感情です。

なんせChatGPT(4o)の個別指導(家庭教師)は、月額約3,200円ですからね!

(関連記事)プログラミング学習が3週間で「超苦手→超楽しい」になった経緯

表題の「経緯」は、下記の記事から確認できます。興味があれば、一読してみてください。

【文系ライターがAIに、30日間プログラミングの個別指導を受けたら世界が変わった】”冒頭”

“「この世にプログラミングスクールなんていらないじゃん!」-これは、AIにプログラミングを習って30日目の、率直な想いです。 趣味のつもりで習っていましたが、今では毎月数万円の副収入にも。本業はライターなんですけどね! そこで、苦手で苦手で仕方なかった10数年を経て、30日でお金になるほどプログラミングの面白さに目覚めた経緯を、かんたんに書き留めておきたい所存です。”

文系ライターがAIに、30日間プログラミングの個別指導をうけたら世界がかわった【冒頭文】




2.GPT4oを最強のプログラミング家庭教師にするプロンプト集

ゼロからのプログラミングに効く! ChatGPT プロンプト集
苦手意識がってもプログラミング学習が大好物に!


高度なプロンプトもありますが、本記事では、手軽なのにめっちゃ強力なプロンプトを集めました!

(2-1)プログラミングに対する苦手意識が強く、チンプンカンプンな状態を救ってくれるプロンプト

プロンプト①:プログラミング未経験の中学生!

※【】内が大事な依頼文
PythonやPHP、JavaScriptなど、どの言語を学ぼうか迷っています。【プログラミング未経験の中学生でも分かるように、たとえ話を交えて】解説してください。

必要に応じて「テンプレート」をコピペして使ってみてくださいね!

プロンプト①の回答を一部抜粋

※太字はGPT4oの回答(一部抜粋)
Pythonは、最初に学ぶのにとてもおすすめです。まるで、魔法の学校に入学したての新入生が使う初心者向けの杖のように、すぐに扱えるようになります。自分が何を作りたいか、どんな魔法を使いたいかを考えて、どの杖を選ぶか決めてみてくださいね!

GPT4o


(2-2)プログラミングに対する苦手意識が強く、フランクに解説してほしい場合のプロンプト


プロンプト②:ギャルGPT

※【】内が大事な依頼文
Pythonでデスクトップ付箋を作りたいです。【プログラミング未経験の中学生でも分かるように】【ギャル語で解説してください。】

必要に応じて「テンプレート」をコピペして使ってみてくださいね!

プロンプト②の回答を一部抜粋

※太字はGPT4oの回答(一部抜粋)
おっけー、おっけー、デスクトップ付箋ね!超カワイイアプリ作っちゃおうぜ!Pythonで作るから安心してね。じゃあ、やってみよっか!
まずはPythonがインストールされてるかチェック!Pythonを使ってGUI(グラフィカル・ユーザー・インターフェース)を作るのに、tkinterっていう便利なモジュールを使うよ。これでカワイイ付箋作れちゃうからね。

GPT4o

(2-3)専門用語をさらに質問すプロンプト


プロンプト③:中学生×比喩×ギャルGPT

※【】内が大事な依頼文
GUI・tkinter・モジュールの意味が分からないので、【プログラミング未経験の中学生でも分かるように、たとえ話も交えて、ギャル語で】教えて!

必要に応じて「テンプレート」をコピペして使ってみてくださいね!

プロンプト③の回答(一部抜粋)

※太字はGPT4oの回答(一部抜粋)
tkinterは、Pythonでパソコンやスマホでポチポチする画面を作るための道具箱みたいなものなの。学校でいうと、色鉛筆とかクレヨンみたいな感じ。Pythonっていうプログラミングの鉛筆を使って、tkinterっていう色鉛筆セットでカラフルな絵(GUI)を描く感じだね。だから、tkinterを使えば、簡単にカワイイ画面を作ることができるの。

GPT4o


WordPress開発本の人気ランキングを、Amazonでチェックしよう!
PR



3.プログラミングが苦手で難しく感じる場合のキーワード一覧


ギャルGPT対話 —「ゲームを作りたい」旨を依頼しているプロンプト
ギャルGPT対話 —「ゲームを作りたい」旨を依頼しているプロンプト


  • 【プログラミング未経験の中学生でも分かるように解説して】

  • 【たとえ話を交えて教えて】

  • 【ギャル語で教えて】

これらを全部組み合わせると、どんな市販の解説書よりも、圧倒的にわかりやすく解説してもらえます。以下に、「中学生×比喩×ギャル語」のプロンプト例を、まとめておきますね!

●●について【プログラミング未経験の中学生でも分かるように、たとえ話も交えて、ギャル語で教えて!】

必要に応じて「テンプレート」をコピペして使ってみてくださいね!




4.自分が欲しいアプリを「小さく」完成させて、自信を育てる


Windowsの付箋は既製品なのでカスタマイズできない…

ふだんPCを使っていて、「もっとこんなアプリがあったらなぁ」を思い出す段階からはじめましょう!

例えば私なら、

  • お気に入りのサイトの画像を一括ダウンロードするアプリ

  • 家計とは別に、自分のお小遣いを管理するアプリ

  • noteのネタ帳アプリ

  • めっちゃかわいくて自分好みのデスクトップ付箋

  • 気に入ったTweet(post)をストックするアプリ

などなど、欲しいアプリはたくさんあります。

POINT①:最小限の機能が完成したら、ちょびっとずつ改良していく

POINT②:既成のアプリは便利でもどこか微妙だが、DIYすれば、100%自分好みのアプリに成長させられる

POINT③:自分用のアプリを何個か作っているうちに、楽しみながらスキルが身に付く

楽しんで覚える3つのPOINT!


[PR]より深くプロンプトエンジニアリングを学びたい人向けの教科書
(★4.5)


(4-1)実際に「サイコロアプリ」を作ってブラウザで動かしてみよう!

ChatGPT に教えてもたったサイコロアプリをブラウザで動かしている様子・その1
ChatGPT に教えてもたったサイコロアプリをブラウザで動かしている様子・その1

STEP1. サイコロアプリを表示するHTMLを教えてもらう
STEP2. サイコロをふるためのJavaScriptを教えてもらう
STEP3. いったん保存して、動かしてみる
STEP4. HTMLやJavaScriptの不明点を質問する
STEP5. 特に大事な知識やキーワードをメモしたり、頭の整理も兼ねて、noteで解説記事にしてみる

サイコロアプリを通じてChatGPTからプログラミングを学ぶ5つのSTEP!


ギャルGPTとの対話例 -サイコロゲームのHTML

コピペ用のHTML↓↓↓

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サイコロふるアプリ</title>
</head>
<body>
    <h1>サイコロふるアプリ☆</h1>
    <button id="rollButton">サイコロふる~</button>
    <p id="result">結果がここに出るよん♪</p>

    <script src="dice.js"></script>
</body>
</html>

このHTMLを保存する際は、下図の注意点を参考に、メモ帳などのテキストエディタを使います。


メモ帳でHTMLを編集する場合、[すべてのファイル][UTF-8]を選んで保存する!

Note.  解凍して「dice_game.html」をブラウザで開くと動きます

Note. HTMLとJavaScript(dice_game.html, dice.js)は、かならず同じフォルダに保存する!



ギャルGPT対話 —サイコロをふるゲームのJavaScriptを教えてもらっている画面
ギャルGPT対話 —サイコロをふるゲームのJavaScriptを教えてもらっている画面


コピペ用のJavaScript↓↓↓

document.getElementById('rollButton').addEventListener('click', function() {
    let result = Math.floor(Math.random() * 6) + 1;
    document.getElementById('result').innerText = `サイコロの目は ${result} だよん!`;
});


メモ帳にJavaScriptを保存する場合、拡張子「.js」を忘れずに付ける(エンコードは,UTF-8!

これで、ChromeやSafariなどの「ブラウザ」で開けば、サイコロアプリを実行できます。

Note.  解凍して「dice_game.html」をブラウザで開くと動きます

Note. HTMLとJavaScript(dice_game.html, dice.js)は、かならず同じフォルダに保存する!


サイコロアプリのおおまかな処理過程を、フローチャートで示します。コードを学習する場合の、補足としてご活用ください。


ChatGPTのサンプルコードを理解するためのフローチャート
htmlとJavaScriptの連携




5.大事な知識はnote(ブログ)にまとめる(紙に整理してもOK!)


ChatGPTに教わったコードをザっと整理したノート
ChatGPTに教わったコードをザっと整理したノート

GPT4oに教わった知識のうち、とくに大事なものは、note記事にして公開するのがおすすめ! 自分しか見ないノートにまとめるよりも、学習効果は2倍・3倍に!

多かれ少なかれ他人の目があるので、モチベを維持しながら、自分専用の「教科書」を作れますし、後から見返すと、本当に重宝しますよ。

プログラミング学習専用のアカウントを作って、自分に最適化された、最強の教科書を作るイメージです。

(参考)私が勉強用に作成したnote▼

読まれるかどうかは、あまり気にしなくてもいいでしょう!一番の目的は、勉強ですからね。加えて、 外出先からスマホで復習できるのも◎!

※ 気がひける場合は、非公開のメモアプリにまとめてもOKですよ!




6.いつか副業になるかも!?


引用元:トークテーマガチャ

こうしてプログラミング学習を進めていくと、楽しみながら、小さなアプリを作る過程でだんだんと「高度なスキル」が身に付いていきます!

こうしたスキルを副業化するには、次のような方法が現実的です。

  • 教える:UdemyやKindleでプログラミングの教育コンテンツを販売する
    (強み:元素人だからこそ、初学者の「???」に寄りそえる)

私の場合、たまたま運に恵まれ、プログラミング学習3週目には毎月4~5万円程度の小さなシステム開発の依頼がくるようになりました。ですが、地雷クライアントはかなり多く、見分けにくいのが実情です。

ですから、

  • 教える

  • 完成品を売る

  • アプリ×広告

の3つのやり方が、おすすめ。

いずれにせよ、まずはアプリ開発に「ドハマり」し、開発大好き人間になればOK! 自ずと結果はついてきます!!!



まとめ:プロンプト集・サイコロアプリ(ダウンロード可!)


復習用のプロンプト画像

▼プロンプト画像をダウンロード▼

▼サイコロアプリをダウンロード(zipファイル)▼

Note.  解凍して「dice_game.html」をブラウザで開くと動きます



ここまで読んでくださり、ほんっとーーーにありがとうございます!!!
以上、なつめ|ライターでした!



[PR]プロンプトエンジニアリングの教科書(★4.5)



あわせて読みたい! 関連記事




この記事が気に入ったらサポートをしてみませんか?