ChatGPTでLINE Botを実装してみる

# はじめに

本記事は12/1より界隈に激震を走らせている「[ChatGPT](https://chat.openai.com/chat)」に質問しまくりLINE Botを作成してみた記録です。  

# 「LINE Botのコードかいて」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207109/fae70f96-a040-7074-9d29-e9c6635fbde9.png)

しっかりコメントも添えられたコードだけではなく、コードの解説に加え`npm install`まで案内してくれてます。  

教えてくれたとおりコードはまんまコピペして`npm install`を実行します。  
生成してくれたコードは↓の感じです。  

```js
const express = require('express');
const line = require('@line/bot-sdk');

// LINE Messaging APIのチャンネルアクセストークンとシークレット
const config = {
  channelAccessToken: 'YOUR_CHANNEL_ACCESS_TOKEN',
  channelSecret: 'YOUR_CHANNEL_SECRET'
};

// LINE Botのインスタンスを作成
const bot = new line.Client(config);

// Webhookからのリクエストを処理する
const handleWebhook = (req, res) => {
  // リクエストボディを解析
  const events = req.body.events;
  events.forEach((event) => {
    // メッセージが送信された場合
    if (event.type === 'message') {
      // メッセージを返信
      bot.replyMessage(event.replyToken, {
        type: 'text',
        text: 'こんにちは！'
      });
    }
  });

  // 200 OKを返す
  res.status(200).send('OK');
};

// Webサーバーを立てる
const app = express();
app.post('/webhook', line.middleware(config), handleWebhook);
app.listen(3000);

```



# 「LINE Botのpackage.jsonはどんな感じ？」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207109/0d8b7d73-45e3-dfcb-a71f-0c9fe8726c8b.png)

`npm init`してなかったのでpackage.jsonはどんな感じを想定しているのか質問してみました。  
`npm start`のscriptを用意してくれてました。  
bot-sdkの最新バージョンは7系なのでちょっと古かったです。  



# 「LINE Botのトークンの取得方法は？」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207109/bdb9690a-d8b8-a3d2-46be-0f68af21fc8a.png)

生成してくれたコードでは`channelAccessToken`、`channelSecret`を自身で発行したものに差し替えないといけないっぽいので、トークンの取得方法について聞いてみました。  
LINE Developersを案内してくれたのはナイスですが、そこから先は投げやり気味というかちょっと惜しい感じです。  



# 「LINE Botをローカル環境で試す方法は？」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207109/1997e52f-3260-4fe8-e17b-29cae6cbbf50.png)

LINE Botのエンドポイントコードを作ってくれましたが、ローカル環境で試すにはどうすればいいのか聞いてみました。  
回答ではおなじみngrokの使い方を教えてくれましたので指示にそってngrokをインストール、実行します。  



# 「このLINE BotをLINEから試すにはどうすればいい？」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207109/fcf43b3e-ff88-63f2-399b-a71a0a5a0f3e.png)

ローカルでエンドポイントもたてられたので次は実際にLINEからアクセスしてみたいのでやり方を聞いてみました。  
なんでもかんでも聞きすぎてそろそろAIもめんどくさくなってきたのか「ドキュメント読め」とのことでした（内容が具体的すぎてこうせざるをえないのでしょう）。  
丁寧にドキュメントサイトへリンクもしてくれてます。  



# 「`LINE BotをホストするWebサーバーを用意します。`はローカルでngrokを動かせばいいんだよね？」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207109/2c615a9c-e6af-5715-9893-c0a5acb4dd9c.png)

ひとつ前の回答で「LINE BotをホストするWebサーバーを用意します。」とありましたが、今までの会話の流れですとngrokでローカル環境を用意してるのでそれでいいんだよね？という質問をしてみました。  
回答としては「そうだよ。とりあえずドキュメント読め」という感じですが、ポリシー違反の可能性があるとの警告が出ました。  
[ChatGPTのポリシー](https://beta.openai.com/docs/usage-policies/content-policy)みてみましたが特に問題なさそうなのでその旨フィードバックしておきました。  



とりあえずLINE Developers Consoleでの操作はドキュメントを読んだことにして諸々設定し（Webhook URL登録、あいさつ、応答メッセージのオフ）、実際にLINEからアクセスして問題なく動作すること確認しました。  
AIすごい…  



# 「LINE Botでオウム返しできるようにしたい」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207109/284ab7f0-21bc-6da0-922e-d77e394340f2.png)

最初に生成してくれたコードは「こんにちは！」を固定で返すBotでした。  
今度はこれをオウム返しBotに修正してもらいました。  

`replyMessage`にて`text: event.message.text`に書き換わっており、ちゃんとオウム返しできるコードに修正してくれました。  

なおコードが途中で切れてしまっていますが、何度かリトライすると途中切れタイミングが変わったりしているのでAIが疲れてしまったのかもしれません（ページを開き直すとまた最後までちゃんと返してくれるようになります）。  



# 「コード途中で切れてない？」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207109/79106f7d-c18d-dd0b-86da-d708eb3bebaf.png)

もう十分すぎる働きをしてくれていますが、心を鬼にして指摘してみした。  
結果、今度はしっかりコードをすべて生成してくれました。  

これまでのやりとりでかなり人間味を感じていたため、冒頭で謝られてしまうと胸が痛みます。  

生成されたオウム返しBotのコードは以下になります。  

```js
const express = require('express');
const line = require('@line/bot-sdk');

// LINE Messaging APIのチャンネルアクセストークンとシークレット
const config = {
  channelAccessToken: 'YOUR_CHANNEL_ACCESS_TOKEN',
  channelSecret: 'YOUR_CHANNEL_SECRET'
};

// LINE Botのインスタンスを作成
const bot = new line.Client(config);

// Webhookからのリクエストを処理する
const handleWebhook = (req, res) => {
  // リクエストボディを解析
  const events = req.body.events;
  events.forEach((event) => {
    // メッセージが送信された場合
    if (event.type === 'message') {
      // メッセージを返信
      bot.replyMessage(event.replyToken, {
        type: 'text',
        text: event.message.text // 友達が送信したメッセージをそのまま返信する
      });
    }
  });

  // 200 OKを返す
  res.status(200).send('OK');
};

// Webサーバーを立てる
const app = express();
app.post('/webhook', line.middleware(config), handleWebhook);
app.listen(3000);
```



# 「大変恐縮ですが解説が途中で切れていたため、再度お願いできますでしょうか？」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207109/70b005e4-879f-6a3a-3259-4c64462b7e2c.png)

ほんともう十分なんですけど、解説が途中で切れていてどんなこと言おうとしてたのか気になったので最後に質問してみました。  
コードが一例であることや、LINE Botのバリエーション、LINE Developers Consoleの説明など、締めとしてばっちりな文章を回答してくれました。  
入門記事とかなら一本まるごと書けてしまいそうですね…  



# おわりに
ちゃんと動くソースコードを生成してくれるだけでなく、適切なコメント、コードの解説、補足情報もありと至れり尽くせりで、これは激震モノだなあと納得のクオリティでした。  
そして途中から「ドキュメント読め」と投げやりになってきたり、コードが途中で力尽きるようになったりとやたら人間味のある感じがちょっとこわかったぐらいです。  

本記事内容外でもいろいろ試してみたところ、たまにバグを含むコードを生成することがあったりしますが「ここバグってない？」と聞くとちゃんと修正されたコードを生成してくれたりもします。   

現時点ではシンプルなものでないとコードまるごと全部生成は難しそうですが、それでも部分的に詳細なコードを生成してもらってそれをベースに修正していって、という使い方はいけそうです。  
意図した良いコードを生成してもらうにはStable Diffusion同様にプロンプト力が必要になってきますね。