プログラミング初心者。まずProgateで学んで、次は本格的なプログラミングに挑戦します。
Webサイトを作りたいな、それともゲームを作ろうかな。。はて、じゃあどうすればよいの？あんなに勉強したのになにも思いつかない。ああやっぱり自分はプログラミングに向いてないんだ…
なんて思いませんか？
大丈夫です。みんなそうです。
プログラムはまっさらから作るわけではない
プログラミング初心者は、もしかしたらプログラマー像について誤解しているかもしれません。
百戦錬磨の達人プログラマー。おもむろにPCの前に座る。しばらく目を閉じ、瞑想にふける。。しばらくのちにカッと目を見開き、堰を切ったようなタイピングでプログラムを仕上げていく。。。
そんなプログラマーいません。
実際のところどうするかというと、こんな感じ。
- ひな型になりそうなプログラムを探す 既存で動いているプログラムとか、ネットにあるものとか。。
- とりあえずコピーして動かす 動かなかったら動かないところ直す。
- どこを改造するか考える
- ちょこっと改造して動かす 動かなかったらまた直す。
ChatGPTを使ったひな型作り
ひと昔まえまでは、まずひな型を持ってくるのにも苦労していました。
- 本に書いてあるのをポチポチタイピングしたり
- あるサイトとあるサイトにあるのをつなぎ合わせたり
しかしいまの時代には、協力な助っ人、ChatGPTがいます。ChatGPTはプログラムが書けます。ひな型を作ってもらえばよいのです。
例えばChatGPTに
自己紹介をするページのHTMLを作って
とお願いしてみましょう。すらすらとプログラムを書いてくれます。
<!DOCTYPE html>
<html>
<head>
<title>自己紹介</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
border-radius: 5px;
box-sizing: border-box;
}
h1, h2 {
text-align: center;
color: #333;
}
h2 {
font-size: 1.5rem;
margin-bottom: 20px;
}
p {
line-height: 1.5;
font-size: 1.1rem;
color: #666;
margin-bottom: 20px;
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
ul {
list-style-type: none;
padding: 0;
margin-bottom: 20px;
}
li {
margin-bottom: 10px;
font-size: 1.1rem;
color: #666;
}
a {
color: #666;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #333;
}
</style>
</head>
<body>
<div class="container">
<img src="https://example.com/myphoto.jpg" alt="自分の写真">
<h1>自己紹介</h1>
<h2>名前</h2>
<p>自分の名前をここに書いてください。</p>
<h2>自己紹介</h2>
<p>自分の自己紹介をここに書いてください。</p>
<h2>スキル</h2>
<ul>
<li>スキル1</li>
<li>スキル2</li>
<li>スキル3</li>
</ul>
<h2>連絡先</h2>
<ul>
<li><a href="mailto:example@example.com">example@example.com</a></li>
<li><a href="https://twitter.com/example">Twitter</a></li>
<li><a href="https://www.linkedin.com/in/example/">LinkedIn</a></li>
</ul>
</div>
</body>
</html>
これをテキストファイルにコピーして、ブラウザで開いてみましょう。ちゃんと表示されますか？
表示されたなら、その内容がプログラムのどこに関係しているのか調べてみましょう。そして自分なりに改造してみましょう。自分の自己紹介に書き換えてみたり、文字の色を変えたり、自分の写真を表示してみたり、プロフィールを追加してみたり。
やり方分からなかったら、それもChatGPTに聞いてみましょう。表示する文字を大きくしたい、など言えば答えてくれます。聞き方はいろいろ工夫してみましょう。
まとめ
プログラミング上達のコツのひとつは「よいプログラムを真似する」ことです。いまではChatGPTが世の中のそれなりに良いプログラムを提案してくれます。積極的に活用しましょう。
ただし大事なことは「盲信しないこと」。さらりと嘘をつくChatGPT、プログラムに関しても動かないプログラムを提案してくることがあります。
まずは自分で動かしてみること。そしてそれを自分なりにいろいろ改造してみる、のが大事です。
コメント