Asa Tech Blog

学んだことを備忘録として残しています

GPT4で自分の勉強したい技術要素を使ったチュートリアルを作る

こんにちは。
最近、AI の進歩は本当にすごいですよね。 ChatGPT などの便利なツールが出てきて、私も毎日使っています。

私が 4 月に入った現場では、AWS を使ったサーバーレスアプリケーションの開発を行っています。ただサーバーレスは、私にとって新しい技術で、まだ完全にはキャッチアップできていません。

そこで、ネットで良い学習教材を探してみたのですが、自分にぴったりのものが見つからなくて困っていました。

そこでふと思いついたのですが、AI の力を借りれば、自分の勉強したい技術要素を使ったチュートリアルが作れるのではないかと思いました。この記事では、それが実際にできるのか試してみます。

ChatGPT とは

今回は、ChatGPT を利用してチュートリアルを作ってみようと思います。 ChatGPT は、OpenAI が開発した自然言語処理を使って文章生成や質問応答など、さまざまなタスクをこなすことができる AI ツールです。 私は、ChatGPT Plus という有料プランに課金しているので、「GPT-4」という ChatGPT の最新モデルを今回使用していこうと思います。

ChatGPT を使ってチュートリアルを作成してみる

まずは、プロンプトを作成する必要があります。 プロンプトとは、ChatGPT が回答を生成するための命令文のことです。 ChatGPT は、プロンプトの出来によって、回答の品質が変わってしまうようです。どのようにプロンプトを作成するべきな悩みましたが、いろいろ調べながら、以下のようなプロンプトを作成しました。

あなたは優秀なエンジニア講師です。
これから指定した技術要素を使ったチュートリアル教材を作って欲しいです。
チュートリアルでは、シンプルなTODOアプリケーションを作成してください。

## 技術要素
・バックエンド：AWS SAM, API gateway, AWS Lambda, Dynamodb, Node.js
・フロントエンド： React.js 

## TODOアプリの要件
1. タスクの追加：ユーザーは新しいタスクを追加できます。タスクには、タイトル、詳細、締め切り日などの情報を含めることができます。
2. タスクの表示：ユーザーは、すべてのタスクを一覧表示できます。タスクの詳細を確認することもできます。
3. タスクの編集：ユーザーは、タイトル、詳細、締め切り日などの情報を編集できます。
4. タスクの削除：ユーザーは、不要なタスクを削除できます。
5. タスクの完了：ユーザーは、完了したタスクにマークを付けることができます。完了したタスクは、タスク一覧から非表示になります。

## 制約条件
・技術要素を使用したことがない初心者が理解できるように、わかりやすく説明してください。
・コメント付きのソースコードを出すようにしてください。
・ディレクトリ構造がわかるようにしてください。
・必要に応じて、ターミナルで実行できるコマンドを教えて下さい
・内容に応じて見出しを付けてください。
・マークダウンで出力してください。

ChatGPT が作成してくれたチュートリアル

想像以上にしっかりとしたチュートリアルを作成してくれました！ ただ細かいところを指摘すると、制約条件で書いた「コメント付きのソースコードを出すようにしてください。」という指示は守られていないですね。笑

作成してくれたチュートリアルは、こちらから確認できます。

ただ、見た感じしっかりしていたとしても、実際に動くものが作成できているかはあやしいので、実際にチュートリアルをやっていこうと思います。

実際にチュートリアルをやってみる

「必要なソフトウェアのインストール」と「AWS 設定」のところは、僕の環境ではすでに完了していたので、スキップしました。

sam init --runtime nodejs14.x --name backend を実行すると、以下のような選択肢が出てきました。どちらを選択したらいいかわからないので、GPT に聞いてみます。

Which template source would you like to use?
    1 - AWS Quick Start Templates
    2 - Custom Template Location

すると、このような回答が返ってきました。

すみません、その点を明確にしていませんでした。

このチュートリアルでは、AWS Quick Start Templates（1番）を使用しています。したがって、プロンプトで `1` を選択して、`Enter` キーを押して進めてください。

教えてもらった 1 を選択すると、また別の選択肢が出てきました。再度、質問を繰り返して進んでいきます。 ちょっとした説明は抜けてしまうようですね。ただ、質問しながら進められるのでいい感じです。

進めていくなかで、template.yaml の内容を編集するところがあったのですが、記述内容に関する解説がなかったので、GPT に聞いてみました。

質問

template.yamlの記述内容の意味がわからないので、初心者でもわかるようにコードにコメントを付けて行く形で解説してもらってもいいですか？各プロパティごとに、コメントを付けるようにしてください。

回答

もちろんです。以下に、`template.yaml` の各プロパティにコメントを追加した内容を示します。

Resources:
  # DynamoDB テーブルの定義
  TodosTable:
    Type: AWS::DynamoDB::Table
    Properties:
      TableName: Todos
      AttributeDefinitions:
        # プライマリキーとなる id 属性の定義
        - AttributeName: id
          AttributeType: S
      KeySchema:
        # プライマリキーとして id 属性を使用する設定
        - AttributeName: id
          KeyType: HASH
      ProvisionedThroughput:
        # 読み取り容量と書き込み容量の設定
        ReadCapacityUnits: 5
        WriteCapacityUnits: 5

すぐ先生に質問ができる環境で学習できている感じですね。 その後も、説明不足なところ、理解できないところなど GPT に質問しながら進めていき、バックエンドの構築が完了しました。

一度、ローカル環境で動作確認をしたかったので、その方法を聞いてみました。 ただ教えてもらった方法で、動作確認をしたところ、モジュールが見つからないエラーが発生していました。エラーメッセージをコピペして質問を繰り返すと解決することができました。

エラー解決質問の回答 1

このエラーメッセージは、`uuid` モジュールが見つからないことを示しています。Lambda 関数のコードで `uuid` モジュールを使用しているため、まずは `uuid` モジュールをインストールする必要があります。

バックエンドディレクトリに移動して、以下のコマンドを実行して `uuid` モジュールをインストールしてください。

<pre class="code bash" data-lang="bash" data-unlink>cd backend
npm init -y
npm install uuid

これで uuid モジュールがインストールされます。再度、sam local start-api コマンドを実行してローカル API を起動し、Postman でテストを行ってください。

エラー解決質問の回答2

エラーがまだ発生している場合、`uuid` モジュールが正しく Lambda 関数に含まれていない可能性があります。この問題を解決するには、`template.yaml` ファイルを更新して、Lambda 関数が `node_modules` ディレクトリを含むようにします。

1. `template.yaml` ファイルを開きます。
2. すべての Lambda 関数定義の `CodeUri` プロパティを `src/` から `.`（カレントディレクトリ）に変更します。これにより、`node_modules` ディレクトリが Lambda 関数に含まれるようになります。

例:

yaml
Resources:
GetTodosFunction:
Type: AWS::Serverless::Function
Properties:
CodeUri: .
Handler: src/getTodos.handler # ...省略...

他にも、CORSのところでのエラーやDynamoDBを操作するため、IAM ロールに適切なポリシーが付与されていないため生じるエラーなどありましたが、それらのエラーも、GPTとの対話の中で解決でき無事デプロイして動かすところまでできました！

まとめ

今回は、ChatGPTを使って、自分の勉強したい技術要素を使ったチュートリアルを作成しました。 不具合も多々ありましたが、内容としてはしっかりとしたものが作れていたのではないかと思います。不具合も、GPTとの対話の中で解決できましたし、理解できないところなども詳しく質問できるのは良い体験で、学習効率が良いなと思いました。 ただ、GPTの弱点として、2021年までの情報しか持っていないため最新情報に対応していないということもあり、DynamoDBの部分のコードの書き方が古い（AWS SDK for JavaScript バージョン 3 ではなく、バージョン2の書き方になっている）というものがありました。 この弱点が克服されるとさらに良いチュートリアルが作れそうですね。 ChatGPTを使って学習するのはおすすめなので、ぜひ試してみてください。