【初心者こそ使うべき】ChatGPTで簡単プログラミング|活用事例5選

この記事の重要点
ChatGPTとは、人工知能と会話ができるチャットサービスです。今回はAIと会話することで、プログラミングやプログラミング学習が”大変、大変”便利になります。この記事では、プログラミング初学者向けに、プログラミング学習の中での、ChatGPTの活用方法を実例を交えながら紹介します!
今回開設するのは以下の4つの使い方です。
- ソースコードの生成
- デバッグ(エラー解決)
- リファクタリング(プログラムの改善)
- プログラムコードの解説
ChatGPTとは
ChatGPTとは、人工知能と会話ができるチャットサービスです。ニュースやネットで単語は知っていても、まだ使ったことがないという方は、ぜひこの記事をきっかけ使ってみてください!ChatGPTはアカウントを作るだけで、無料で利用できます。使い方はとても簡単で、図1のような画面でメッセージを入力すれば、それに応じてAIが回答を生成してくれます。

今日は、このChatGPTをプログラミングに活用する方法を実例を交えながら説明します。アカウント登録がまだと言う方は、以下の記事を参考に、登録してみてください!
用語説明
- GPT4:この記事の出力は無料でなく、月額3000円程度のGPT4を使っています。
- プロンプト:ChatGPTに入力する文章のことをプロンプトと呼びます。
- Javascript:WEB系のフロントエンドの開発やWEB制作で用いられるプログラミング言語です。
コーディング(ソースコード生成)
ChatGPTを使えば、日本語で指示するだけでソースコードを出力できます。これを活用すれば、プログラミングの知識がなくてもコードが書けるようになります。
例えば、企業WEBサイトによくある問い合わせフォームを作りたいとします。そんな時は、以下のようなメッセージを入力すると良いソースコードを生成してくれました。
あなたはプロのWebエンジニアです。 名前、フリガナ、会社名、メールアドレス、電話番号、お問い合わせ内容を入力するフォームを作りたいです。 会社名以外は必須項目にしたいです。 デザインはメインの色が青で、スマホでも入力しやすいデザインがいいです。 Htmlとcssのソースコード書いて
実際に生成した時のchatGPTの画面がこちらです。

完成したWEBページがこちらです。バッチリですね。ぜひ、試してみてください。

これを応用すると、複雑なExcel関数をChatGPTで生成したり、SVGのpathを編集したり、グラフを作るためのPythonコードを生成したり、色んなプログラミングが誰でもできるようになります!
デバッグ(エラーの解決)
ChatGPTは、コードのミスを発見できます。コードのミス発見は、人が行うと非常に時間のかかる作業です。ChatGPTを活用すれば、短時間でミスを発見できます。
試しに、スペルミスがあるCSSのソースコードをChatGPTに送ってみました。
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px
//;と}がない
form {
background-color: white;
padding: 20px;
border-radius: 8px;
max-width: 500px;
margin: auto;
}
すると、以下のように、セミコロンと閉じ括弧がない事を指摘してくれました。さらに、修正後のソースコードも、後半では記載がありました。流石ですね!

このように、何かエラーが出た時は、ソースコードやエラー分をchatGPTに相談すると良い意見を貰えるでしょう。
また、エラーメッセージを送ると、どう解決すればいいか教えてくれることもあります!以下は聞き方が荒いですが、「このエラー何?解決方法も含めて、日本語で完結に教えて」など、簡単なプロンプトでも、参考になる答えが返ってきます!

リファクタリング(プログラムの改善)
ソースコードを、自分にとっても他者にとっても、読みやすく改善するためにもchatGPTは有効です。例えば、複雑な参考演算子を、読みやすい形に変更してみましょう。
以下の参考演算子で書かれたコードをif分に書き直して、
let a = data.id.indexOf('business') !== -1 ? 'business' : data.id.indexOf('recruit') !== -1 ? 'recruit' : '';

もっと抽象的なプロンプトの例も紹介します。漠然と、もっと読みやすさや保守性を意識したコードの替えたい場合は、以下のようなプロンプトも活用できます。
以下のソースコードの可読性や保守性を向上させるためのリファクタリング提案をしてください。

補足:excel関数もGPTで生成
エンジニア職ではなく、事務や営業についての業務でもChatGPTは大活躍です。例えば、以下のようにExcelの複雑な関数の生成は、デスクワークをする人なら誰でも使う機会があると思います!
スプレッドシートのカスタム数式で、以下の単語を含まないフィルタ作って
saiyo,jinji,recruit,hr

プログラムコードの解説
最後に、ソースコードを理解するために、ChatGPTを使う方法も紹介します。
今回は弊社のITメディアラボの記事をCMSサーバーから取得する?ソースコードを開設してもらおうと思います!
以下のコードわかりやすく説明して、

出力です!1行目から、import部分、型定義部分、関数部分と上から順に解説が生成されます。

さらに学習にも役立てるために、勉強方法を聞いてみました。調べて行き詰ったときに、調べる糸口を見つけることにも役立ちそうですね。
上のソースコードを理解するために、参考になりそうなドキュメントを教えて、

まとめ
この記事では、ChatGPTを活用してプログラミング学習を効果的に行う方法について紹介しました。ChatGPTは、人工知能を活用したチャットサービスで、ソースコードの生成やエラーの発見など、プログラミングの様々な場面に貢献します。特に、初学者に特に有用です!
皆さんの学習に役立てば幸いです。ITメディアラボでは、他にも仕事を便利にするITツール、サービスの使い方やプログラミング学習、ITリテラシー向上につながるコンテンツを発信してます。この記事が面白かったよという方は、下にあるおすすめ記事も読んでみてください!
この記事を書いた人

2022年3月に当社を設立。 クラウドサービスの導入支援、WEBエンジニアの育成事業を経営。 大阪出身、高専出身。

2022年3月に当社を設立。 クラウドサービスの導入支援、WEBエンジニアの育成事業を経営。 大阪出身、高専出身。