【初心者こそ使うべき】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;
}