こんにちは。デジタルラボのらいちです。
躓くことの多いプログラミング学習をより効率的にすべく、ChatGPTを使っていきたいと考えている方は増えています。
しかし、実際に使ってみたものの、思い通りに回答してくれなかったり、そもそもどう活用すればよいのかわからない方も多いのではないでしょうか。
僕自身もChatGPTを使ったばかりの頃は活用方法すら思い浮かばず、しばらく放置してしまった経験があります。
本記事では上記のような方へ向けて、ChatGPTを使ったプログラミング方法を紹介していきます。
具体的な内容を交えるのはもちろん、実際のプロンプト例も紹介しているため、フリーランスとして活動したい方はぜひ読んでいただきたいです。
プログラミング学習中の悩み
プログラミングを学習している中、以下の3つのうちどれか1つでも悩んだことがあるのではないでしょうか。
らいちどれも初心者がつまづきがちな内容です。僕自身はすべて経験があります。
どんなコードで実装できるのかわからない
機能やデザインを実装しようにも、そもそもどんなコードを書けば良いのかがわからないという悩みです。
プログラミングを学んでいるうちは、初めて実装することになる機能やデザインが多く、そのたびに実装方法に悩みます。
この場合はネットや本でコードを調べ、実際に自身の環境で試したりすることになりますが、なかなかうまくいかないことも多いです。
らいち僕自身も、お問い合わせフォームのラジオボタンやチェックボックスのデザインで結構苦戦しました。
ちょっとしたコードのミスが多い
プログラミング学習中はコードを書くことに慣れていないことから、スペルミスや記述漏れなどちょっとしたミスが多かったりします。
しかし、このちょっとしたミスはプログラムのエラーを起こしたり、デザインが崩れてしまったりなどで決まって大きな影響をもたらします。
すぐに間違ったところを発見できれば良いですが、小さなミスなだけになかなか見つけられず、学習が進まないのがやっかいなところです。
らいち何度見ても合っているように見えるため、誤った箇所を見つけられず、挫折につながることもある悩みです。
エラー内容や実装できない理由がわからない
学習中のうちはコードを書いて実行してみると、エラーであったり、HTMLやCSSではデザイン崩れに必ず当たったりします。
この場合はエラー文やデザインの崩れ方から解決していきますが、エラーの内容が難しかったり、デザインが崩れている理由がいまいちわかないこともあります。
らいちこのまま解決できずに時間が過ぎていくと、最終的に挫折してしまうのが、この悩みの恐ろしいところです。
ChatGPTを使ってできること
初心者に陥りがちな悩みを挙げたところで、ChatGPTがプログラミングでできることを紹介します。それが以下の3点です。
らいちこれらはプログラミング学習中の悩みで挙げた悩みもすべて解決できる内容となっています
コードの生成
まずできることとして挙げられるのが、コードの生成です。プロンプトに作成してほしい内容を入れることで、内容に従ったコードを回答してくれます。
AIと対話形式でコミュニケーションをする際に、ユーザーが送るテキストのことです。主にAIに対する指示や質問を差します。
機能やデザインの一部分のコードも生成できるほか、言語も指定することによって、自身の使っている環境に合わせたコードの生成も可能です。
らいちコーディングのプロとチャット形式で連絡ができ、指示をすればすぐにコードを作成してくれるようなイメージです。
コードのレビュー
自身が記述したコードをプロンプトに組み込むことで、間違いやより良い書き方のコードを教えてもらうことができます。
これにより、必要のないコードを削減したり、特定の操作でエラーにつながるような部分の改善を行うことが可能です。
らいち変数の中身が空だとエラーになってしまうような問題や、特殊文字を入れた場合に起きるエラーも解決できます。
また、自身のコードを伝えるだけでなく、ネット上のコードをプロンプトに組み込むことで、コードの内容についても教えてもらうことができます。
エラーメッセージの解説
プログラムを実行して出たエラー文をChatGPTに伝えることにより、エラー内容についての解説を受けることができます。
エラー文を翻訳してくれるだけでなく、そのエラーが発生する主な理由も複数上げてくれるため、いちはやく原因のコードを突き止めることが可能です。
らいちエラーが発生したコードも伝えることで、どこで原因が起きているかまでの回答も貰うこともできます。
現役Webフリーランスの活用術
僕(らいち)がプログラミングをする際に行っている、ChatGPTの活用方法を4つ紹介します。
らいち紹介する方法を実践することで、ChatGPTを最大限に活用でき、プログラミングの質と効率を高めることが可能です。
やってほしいことを具体的に伝える
プロンプトは、単に1～2行のテキストではなく、具体的で相手がイメージしやすいような文章を意識して入力します。
- 悪いプロンプト例：
HTMLとCSSでサイトのフッダーを作成してください。 - 良いプロンプト例：
HTMLとCSSで以下の内容に従ってフッダーを作成してください。
・右側、真ん中、左側の3列の構成にする
・右側にはサイトのロゴ、真ん中にはサイトメニュー、左側にはカテゴリー一覧を表示
・サイトメニューはTOP、記事一覧、お問い合わせの3リンク
・カテゴリー一覧はフリーランス、コーディング、営業
これにより、ピンポイントかつ無駄のない回答を出力できる可能性が高まるため、生成したコードを後から自身で修正したり、最初から聞き直さなければいけない状況を減らすことができます。
また、状況に最適な回答を出力できるようになることから、自身の知らないメソッドや、よりシンプルな書き方のコードなど自身が求めていた以上の回答も出力も可能です。
らいちプロンプト次第で、出力される内容は10倍以上良くなります。
前提条件を整えてシナリオ設計する
自身が使用している言語やディレクトリ構成、CSS設計など、前提条件をプロンプトに入力しておくことで、環境に合わせたコードを生成してくれます。
使用言語:HTML、CSS、PHP
フレームワーク:Laravel
データベース:MySQL
使用言語:HTML、CSS、JavaScript
ルートディレクトリ:
imgフォルダ、CSSフォルダ、JSフォルダ、index.html
CSS設計:BEM
生成されたコードがすでに自分仕様になるため、コピペやちょっとした修正で使えるようになり、作業効率が格段に上がります。
らいち自身の環境だけでなく、禁止していることも伝えることで、条件を満たした回答に絞って生成させることも可能です。
粘り強く壁打ちしていく
1度プロンプトを入力して受け取った回答が思い通りのものではなかった場合、最初から聞き直すのではなく、回答に対して何度も指示を出します。
さらに要望を出している際の画像
例えば、「お問い合わせフォームのHTMLコードを生成してもらったが、件名の選択欄がなかったり、並び方が気に入らない」から追加のプロンプトを入力するなどになります。
こうすることで、自身の欲しい回答へ近づけていくことができる上、追加の要求やより詳細な仕様に対応させることが可能です。
らいち会話の中でいう「質問したら思ったのと違う回答が来たから、言い方を変えて質問してみる」形になります。
用途別にGPTsを作成する
あらかじめ用途ごとにGPTsを作成しておくことで、少ない指示で自分に最適化された回答を出力できるようになります。
特定の目的や作業に特化した回答を出力できるようカスタマイズしたChatGPTを作成できる機能のことです。プリセットのように複数作成できます。
これにより、言語やディレクトリ構成などの前提条件をプロンプトに毎回入力する必要がなくなったり、コードを貼り付けるだけで解説してもらうといった自動化ができます。
僕（らいち）も複数GPTsを作成しており、その中でも良く使うものが以下の3点です。どれも非常に便利で、確実にプログラミング効率を高めています。
- エラーチェック用：エラーが起きたコードをコピペするだけで、修正コードを生成する
- クラス名決定用：“概要”や”私たちについて”などの単語や言葉を入れるだけで、クラス名を作成する
- コード解説用:コードをコピペしたら、1行ずつコード内容を解説する
また、実際にGPTsを試していただけるような例を、以下に用意しました。ぜひ、コピペして使ってみましょう。
- 「名前」欄：コード解説GPTs
- 「説明」欄：入力したコードについて解説するGPTsです。
- 「指示」欄：以下に記載
#目的
コードを読んでも内容がわからない方にも理解できるよう、コードの解説を提供する。
#指示
あなたはWeb制作に特化したすばらしいコーダーです。
送られてきたコードについて、ルールに従って解説をおこなってください。
#ルール
・1行ずつ解説をする
・専門用語をできるかぎり使用しない
・エラーがあった場合はエラーについても解説する
らいち自分の環境や使いやすい仕様にアレンジするのもおすすめなGPTs例になります。
実践的なプロンプトの例（HTML＆CSS）
ChatGPTがプログラミングでできることや、活用方法を紹介したところで、実践的なプロンプトの例を3つ紹介します。
実践①ヘッダーのコードを生成
今回はHTMLとCSSでヘッダーを作成する例を実践していきます。左側にサイトロゴ、右側にメニューがあるものを生成したいのと、細かな要望もあるので、これらをプロンプトに入力します。
HTMLとCSSを使って下記前提条件と内容に従ってヘッダーを作成してください。
#前提条件
・htmlファイルはindex.html、cssファイルはCSSというフォルダの中にあるstyle.css
#内容
・ヘッダーは左右で構成し、左側にサイトロゴ、右側にメニューとする
・サイトロゴはh1タグで囲む
・ヘッダーの背景は白で、文字色は黒色にする
・メニューリンクは、TOP、私について、記事一覧、カテゴリー一覧、お問い合わせの5リンク
・お問い合わせリンクのみ、背景をオレンジにする
送信するとコードを生成してくれたため、実行してみると問題なく左側にサイトロゴ、右側にメニューのあるものを作成してくれました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サイトタイトル</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<header class="site-header">
<h1 class="logo">サイトロゴ</h1>
<nav class="menu">
<ul>
<li><a href="#top">TOP</a></li>
<li><a href="#about">私について</a></li>
<li><a href="#articles">記事一覧</a></li>
<li><a href="#categories">カテゴリー一覧</a></li>
<li><a href="#contact" class="contact-link">お問い合わせ</a></li>
</ul>
</nav>
</header>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background-color: #ffffff;
color: #000000;
}
.logo {
font-size: 1.5em;
}
.menu ul {
list-style: none;
display: flex;
gap: 20px;
}
.menu a {
text-decoration: none;
color: #000000;
}
.contact-link {
background-color: #c46817;
color: #ffffff;
padding: 5px 10px;
border-radius: 5px;
}
しかし、サイトロゴが画像でなかったり、メニューリンクが中央揃えではないなど気に入らない部分も多いので、再度プロンプトを入力します。
上記に以下の内容を追加してください。
・お問い合わせの背景色の高さをヘッダーの高さと同じにする
・サイトロゴは画像にする
・メニューリンクは上下中央揃えにする
・ヘッダーに少し影を入れる
・aタグにホバーしたら、少し薄くする
再度生成されたコードはほとんど修正されておりました。一部直っていない箇所もありますが、すぐに修正できる範囲なので生成自体は完了とします。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30px;
height: 60px;
background-color: #ffffff;
color: #000000;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* ヘッダーに影を追加 */
}
.logo img {
height: 40px;
/* 画像の高さを調整してください */
}
.menu ul {
list-style: none;
display: flex;
gap: 20px;
height: 100%;
align-items: center; /* メニューリンクを上下中央揃え */
}
.menu a {
text-decoration: none;
color: #000000;
padding: 0 10px;
transition: opacity 0.3s ease; /* ホバー時のアニメーション */
}
.menu a:hover {
opacity: 0.7; /* ホバーしたときに少し薄くする */
}
.contact-link {
background-color: #c46817;
color: #ffffff;
display: flex;
align-items: center;
height: 100%; /* ヘッダーと同じ高さに設定 */
padding: 0 15px; /* 横の余白を設定 */
border-radius: 5px;
}
生成するコードの複雑さによりますが、要望を1つ1つプロンプトに指示することで、数回の壁打ちで要望通りのコードを生成させることもできま
す。
実践②不足しているコードがないかを確認
ここではデザイン崩れを起こしているコードをプロンプトに入力し、どこが原因で発生しているのかをChatGPTに確認してもらいます（コードは実践①で作成したのをあえて崩したものを使用しています）。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サイトタイトル</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<header class="site-header">
<h1 class="logo">
<a href="#home"><img src="path/to/logo.png" alt="サイトロゴ"></a>
</h1>
<nav class="menu">
<ul>
<li><a href="#top">TOP</a></li>
<li><a href="#about">私について</a></li>
<li><a href="#articles">記事一覧</a></li>
<li><a href="#categories">カテゴリー一覧
<li><a href="#contact" class="contact-link">お問い合わせ</a></li>
</ul>
</headr>
</body>
</html>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30px;
height: 60px;
background-color: #ffffff;
color: #000000;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
/* ヘッダーに影を追加 */
}
.logo a {
display: flex;
align-items: center;
height: 100%;
}
.logo img {
height: 40px;
/* 画像の高さを調整してください */
}
.menu {
height: 100%;
/* navをヘッダーの高さに合わせる */
display: flex;
align-items: center;
/* navの内容を上下中央揃え */
}
.menu ul {
list-style: none;
display: flex;
gap: 20px;
height: 100%;
align-items: center;
/* メニューリンクを上下中央揃え */
}
.menu a {
text-decoration: none;
color: #000000;
padding: 0 10px;
transition: transform 0.3s ease, opacity 0.3s ease;
/* ホバー時のアニメーション */
}
.menu a:hover {
opacity: 0.7;
/* ホバー時に少し薄くする */
transform: scale(1.2);
/* ホバー時にサイズを1.2倍にする */
}
.contact-link {
background-color: #c46817;
color: #ffffff;
/* お問い合わせの文字を白色に */
display: flex;
align-items: center;
height: 100%;
/* ヘッダーと同じ高さに設定 */
padding: 0 15px;
/* 横の余白を設定 */
border-radius: 5px;
}
プロンプトには、該当コードを実行するとどんな状態なのかを入れつつ、原因のコードの修正と原因の説明をしてもらう内容で入力します。
下記HTMLとCSSコードだと、デザインが崩れてしまいます。
不足していたり、誤りのあるコードがあれば修正してください。
また、該当コードについて詳しく説明してください。
{先ほど掲載した崩れているコードをここに貼り付け}
プロンプトを送ると、修正後のコードと発生原因を問題なく解説してくれました。クラス名が1文字抜けているだけの細かな部分も汲み取って説明できています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サイトタイトル</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<header class="site-header">
<h1 class="logo">
<a href="#home"><img src="path/to/logo.png" alt="サイトロゴ"></a>
</h1>
<nav class="menu">
<ul>
<li><a href="#top">TOP</a></li>
<li><a href="#about">私について</a></li>
<li><a href="#articles">記事一覧</a></li>
<li><a href="#categories">カテゴリー一覧</a></li>
<li><a href="#contact" class="contact-link">お問い合わせ</a></li>
</ul>
</nav>
</header>
</body>
</html>
らいち目視確認ではかなり見つけにくい誤りも、ChatGPTが瞬時に見つけて修正＆解説をしてくれました。
実践③コードの内容について解説
今回は、実践①で生成したコードのうち、メニュー部分に当てられているCSSコードをChatGPTに解説してもらいます。
.menu {
height: 100%;
display: flex;
align-items: center;
}
.menu ul {
list-style: none;
display: flex;
gap: 20px;
height: 100%;
align-items: center;
}
.menu a {
text-decoration: none;
color: #000000;
padding: 0 10px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.menu a:hover {
opacity: 0.7;
transform: scale(1.2);
}
.contact-link {
background-color: #c46817;
color: #ffffff;
display: flex;
align-items: center;
height: 100%;
padding: 0 15px;
border-radius: 5px;
}ここではCSSの各プロパティを知りたいため、1つ1つ説明してもらう旨を入れつつ、コードをプロンプトに入力します。
下記CSSコードについて、それぞれのプロパティ1つ1つの説明をしてください。
{先ほど掲載したコードをここに貼り付け}
すると、クラスごとに分けて、それぞれのプロパティについてわかりやすく解説してくれました。抜け漏れもなく、不明なままのプロパティもないため完了になります。
らいち実験も踏まえてあえて雑なプロンプトを入力しましたが、それでもChatGPT側でわかりやすい解説をしてくれました。
ChatGPT活用の際の注意点
ChatGPTはプログラミングにおいてさまざまな点で便利ですが、注意しなければいけないことが主に4点あります。
らいち知っておかないと作業に支障がでる場合もあるため、目を通しておきましょう。
正しい回答が返ってくるわけではない
プロンプトを入力することでたいていのことには回答してくれますが、内容は必ずしも正しいわけではありません。
実際に生成してもらったコードを実行してみたらエラーが出たり、思ったのとは違う動作をすることもあります。
らいち禁止した書き方のコードを生成することもありました。
生成されたコードをそのまま使うのではなく、いったん読んだりテストしたりで確認しましょう。
複雑なデザインの実装は難しい
テキストではもちろん、参考URLや画像をプロンプトに含めても、細かなデザインを生成させるのは難しいです。
凝ったデザインを提示した場合、基本的な横並びやdiv構造程度で、細かなCSS（position:absoluteやグラデーションなど）までは生成されません。
ただし、一気に生成させるのではなく、ボタンや囲いブロックなど簡単なパーツ1つ1つであれば、比較的複雑なものにも対応できます。
らいちパーツごとに生成することで、細かくコードを見ることができるため、学習の面でもおすすめです。
返ってきた情報がすでに古い場合も
ChatGPTは2023年10月時点の情報を最新としているため、生成されたコードが現在のバージョンに非対応であったり、最善の書き方ではないこともあります。
実際に動作できていても、言語のバージョンが上がったことでエラーになる可能性もあるため、ChatGPTにどのバージョンでコードを生成しているかなど確認を行いましょう。
らいちどの言語でも短いスパンでアップデートされているため、注意が必要です。
必ず理解してから使う
生成されたコードを単にコピペして「できた！」では、学習に役立てられないうえ、スキルも身に付きません。
フリーランスとして独立した後でもこのままであれば、クライアントの要望に沿った柔軟なコードはかけず、年収を上げることもできません。
らいちちょっとしたデザイン崩れや、エラーすら修正できないままだと、仕事の幅が限りなく狭いままになります。
生成されたコードを理解してスキルアップし、クライアントの口頭での要望もすぐコードに落とし込めるぐらいまでになるのが理想です。
ChatGPT活用に関するQ&A
ここではプログラミングにおけるChatGPT活用に関するQ&Aをまとめています。
- ChatGPTは有料版を使用したほうが良いですか
-
ぜひ有料版を使用しましょう。プロンプトへの入力文字数の上限や指示できる回数の追加、GPTsの作成、画像の読み込みができるなどメリットが多いためです。
価格に関しても、たった20ドル(約2990円)/月で超優秀な助手を雇うようなものなので、使わない手はないです。
- 将来的にChatGPTを使わないようになる必要がありますか
-
決してそんなことはありません。世の中のエンジニアは普通にネットで調べたり、ChatGPTに指示をして回答を得ています。むしろ、コードの質や時間効率を高めるために、積極的に利用したほうが良いでしょう。
- プロンプトに個人情報を含めても良いですか
-
決して個人情報を含めてはいけません。プロンプトに含めた内容がAIに使われている可能性が高いためです。ChatGPTのバグによって入力した個人情報が他のユーザーが見える状態になったという事例もあるため、絶対にやめましょう。
まとめ
ChatGPTはプログラミングをするにあたって大変便利なものですが、前提として使っている必要があります。
| 項目 | 内容 |
|---|---|
| できること | ・コードの生成 ・コードのレビュー ・エラーメッセージの解説 |
| 活用術 | ・やってほしいことを具体的に伝える ・前提条件を整えてシナリオ設計する ・粘り強く壁打ちしていく ・用途別にGPTsを作成する |
| 注意点 | ・正しい回答が返ってくるわけではない ・複雑なデザインの実装は難しい ・返ってきた情報がすでに古い場合も ・必ず理解してから使う |
何も知らずにとりあえず指示しただけでは、有用な回答は得られず、むしろ作業効率を下げてしまうことにもなるでしょう。
反対に、少しでも使い方を知っているだけで、作業効率やコードの質が2倍3倍どころか5倍以上も良くなり、学習自体もより濃いものにできます。
らいちぜひ、本記事の内容を参考にChatGPTを使いこなし、プログラミング作業や学習をレベルアップしていきましょう。
