ChatGPTと会話してコーディングしてみた

## はじめに
前回の記事投稿から早1年、その間に、ChatGPTというツールが登場し、
自分のような一般人でも普通にAIに触れられるようになりました。

2023年現在も「GPT-4 Turbo」（有料版）が公開され、さらに活用範囲が広まったもよう。

### 今更ですが…
GPT-3で、簡単な質疑応答くらいしか活用していなかった自分。

ChatGPTがプログラミングは得意分野だと知ってはいたものの
なかなか触るきっかけがありませんでした。

今回はその機能を体験してみるべく
**「ChatGPTと会話して、WEB自動操作ツールを作成する」**
ということをやってみました。

:::note info
無料版の備忘録です。すでに活用されている方には基礎的な内容になりますので、ご了承ください。
:::

***
## 作成したもの
コードを実行すると、ブラウザを起動してgoogle検索します。

![Videotogif (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2698486/ed0a3a88-b492-d323-f17e-7f33bc985916.gif)


#### 意外に時間がかかってしまった…
「チャット開始から、動くまで数分でできた！」

…となると思っていたのですが

**・ピンポイントで質問ができなかったこと（Pythonにそこまで詳しくない）**
**・ChatGPTを使い慣れていないこと（特にプロンプトの入れ方）**

これらが原因で、エラー解決に時間がかかり、
この程度のツールに完成まで半日くらいかかってしまいました。

:::note info
それでも、ゼロベースよりは断然早く完成し、
ChatGPTのすごさ、便利さはしっかり実感できました。
:::

## 手順
### ０．前提条件
ChatGPTが利用できること（GPT3.5）
Pythonが実行できること
　⇒以下のコマンドで確認できます
```
 python --version
```
https://www.python.org/

***
### １．GPTに、作りたいものを丸投げしてみる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2698486/dcd03fa3-0c32-8290-6b5c-ff35f6af5312.png)

こんな書き方ではダメかな？と思ったのですが…
とりあえず作りたいものをプロンプトに記入してみました。すると、

**一瞬で、元になるコード（解説付き）が。**

必要なライブラリ、ドライバのインストール方法まで。
実際に使ってみると、本当にすごい。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2698486/ab02e857-96e6-5e1f-d789-56f4fe717c85.png)

<details><summary><font color="green">GPTの解説とコード</font></summary>

>ブラウザを操作するためにPythonを使用する場合、Seleniumというツールが一般的に利用されています。Seleniumは、ブラウザを制御してウェブページ上での操作を自動化するための強力なツールです。以下に、Seleniumを使用してブラウザを操作するための基本的なPythonプログラムの例を示します。

>まず、Seleniumをインストールします。以下のコマンドを使用してインストールできます。
```
bash
Copy code
pip install selenium
```

>次に、以下はGoogle Chromeを使用する場合の例です。まず、ChromeDriverをダウンロードして、PATHに追加します。ChromeDriverは、Google Chromeを制御するためのSeleniumのドライバです。ChromeDriverのダウンロードは、https://sites.google.com/chromium.org/driver/ から行えます。

```python:web.py
from selenium import webdriver
from selenium.webdriver.common.keys import Keys

# ChromeDriverのパスを指定
chrome_driver_path = '/path/to/chromedriver'

# ブラウザを起動
driver = webdriver.Chrome(executable_path=chrome_driver_path)

# Googleのトップページを開く
driver.get("https://www.google.com")

# 検索ボックスにキーワードを入力して検索
search_box = driver.find_element("name", "q")
search_box.send_keys("Python Selenium")
search_box.send_keys(Keys.RETURN)

# 5秒間待機してからブラウザを閉じる
driver.implicitly_wait(5)
driver.quit()
```

この後にも、
コードの解説や、注意点まで返答をくれました。（省略）

</details>

------------------------------------------------------------------------------

### ２.返答のとおり、実装してみる

<font color="green">・以下構成でフォルダを作る</font>

　デスクトップ
　　┗ Python
　　　┗ Driver
　　　　┗ chromedriver.exe
　　　　┗ LICENSE.chromedriver
　　　┗ web.py　 <font color="green">⇒・ここにコードを記入する</font>

***
  
<font color="green">・chromeDriverのパスを「driver/driver.exe」に修正</font>
```
 chrome_driver_path = 'driver/chromedriver.exe'
```
***
<font color="green">・pythonフォルダでCMDを開き、「web.py」を実行する
</font>
```
 C:\Users\ユーザー名\Desktop\python > python web.py
```
***
これでもう、いきなり完成かと思いましたが、
エラーが出て動きませんでした。
```
selenium.common.exceptions.SessionNotCreatedException: Message: session not created: This version of ChromeDriver only supports Chrome version 114
Current browser version is 119.0.6045.160 with binary path C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
```

***

### ３．エラーを読む
どうやらドライバーのバージョンが合っていないのが原因のよう。

自分のは「119」で、ドライバーが「114」だと言っているので、
再度、公式サイトからダウンロードしました。

https://chromedriver.chromium.org/downloads

::: note info
最新版をダウンロードしたつもりでしたが、よく見たら
最新版として出てくるのが「114」となっていました。

それより新しいものは、別ページから手動でダウンロードするようでした

<details><summary><font color="green">ダウンロード手順</font></summary>

![コメント 2023-12-04 020217.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2698486/dfa3dfa8-cfc6-6fa8-ee2e-d24ccb930650.jpeg)


「119」の左のStableをクリックして、その先にあるURLをブラウザに貼り付けすると、ドライバーがダウンロードできました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2698486/9d4602d8-5fe5-80d1-5a33-183b1104fe67.png)
</details>
:::

最新版に入れ替え、もう一度実行してみますが、

```
File "C:\Users\Desktop\python\web.py", line 11, in <module>
    driver = webdriver.Chrome(executable_path=chrome_driver_path)
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
TypeError: WebDriver.__init__() got an unexpected keyword argument 'executable_path'
```

う、またエラー…
***
### ４．エラーについて聞いてみる

今度は、エラー箇所とエラーコードをそのまま、対話形式で丸投げしてみました。

最初の質問と同じく、こんな書き方で大丈夫かな、と思いましたが、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2698486/04f3cb24-ec7e-9bc5-5bf6-cb14ee1d6b84.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2698486/ca2ff094-8c0d-8abe-db71-cb10eda574bc.png)

**すぐに修正コードと、その解説が。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2698486/cc237ee0-a688-24a2-8136-be5a0493edb6.png)
（以降のGPTの回答は、省略）

先の会話を踏まえて、回答をくれています。

Seleniumのバージョンの違いによるもので、
そのバージョンにあった書き方をすればよいとのこと。
```python:web.py
# ChromeOptionsを作成してドライバーのパスを指定
chrome_options = webdriver.ChromeOptions()
chrome_options.add_argument(f'--webdriver.chrome.driver={chrome_driver_path}')
```
この部分を修正して、**動きました！**

最後に、sleepで表示速度の調整して、完成。
最終的なコードはこちらです

```python:web.py
# ブラウザを立ち上げて、フォーム入力した結果を取得する
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
import time

# ChromeDriverのパスを指定
#chrome_driver_path = '/path/to/chromedriver'
chrome_driver_path = 'driver/chromedriver.exe'

# ChromeOptionsを作成してドライバーのパスを指定
chrome_options = webdriver.ChromeOptions()
chrome_options.add_argument(f'--webdriver.chrome.driver={chrome_driver_path}')

# Chromeのウィンドウを開く
#driver = webdriver.Chrome(executable_path=chrome_driver_path)
driver = webdriver.Chrome(options=chrome_options)

# Googleのトップページを開く
driver.get("https://www.google.com")

# 検索ボックスにキーワードを入力して検索
search_box = driver.find_element("name", "q")
search_box.send_keys("Python Selenium")
search_box.send_keys(Keys.RETURN)

# 10秒間待機してからブラウザを閉じる
time.sleep(10)
driver.quit()
print("end")

```

**いつもの癖で、ついgoogle検索してしまいましたが...**
1つ目のエラー（ドライバーのバージョン違い）を、つい検索して解決してしまいましたが、
後で「エラーメッセージそのままをGPTに投げればよかったのではないか？」と思い試したところ、バージョン指定するコーディングを教えてくれました。こっちの方が早かったかも。

```python:web.py
# ChromeDriverのバージョンを指定
chrome_options.add_argument('--version=119.0.6045.160')
```
***

## まとめ、感想

質問のやり方が悪く、思いのほか時間がかかってしまいましたが
返答の精度、内容が想像以上でした。
***
### 特に便利だった点
**とりあえず最初の雛形を作ってくれる**
　そこからカスタマイズすれば良いので、完成までのハードルがとても下がります。

::: note info
例えばCSSでも、HTMLを丸投げしたら、いい感じにたたき台を作ってくれました。
::: 

**質問したことを踏まえて回答（解説付き）をくれる**
　内容が正しくないこともあるのは注意はいえ、
　基礎的な事はかなり効率よく勉強できると思いました。

　また、話し言葉でとりあえず投げても内容を読み取って返答してくれるので
　（もちろん、GPTが理解しやすいように書く方がより良いのですが）
　アイディアや方針の候補探しにも便利そう。

***
### 使う側に必要と思うこと
**プログラムの基礎知識**
　何も考えずでコピペして作るだけでは考慮不足な部分があるので、
　（例えば、今回のコードだとChromeDriverのバージョンが変わるたびに修正しないといけない）本当にその書き方でよいのか判断したり、もっとこうしたい、をピンポイントで質問するのに、知識は必要だと思いました。

::: note info
GPTにすべて任せるのではなく、補完してくれる存在なのだと感じました。
:::

**明確に伝える能力、文章力**
　やりたいことを具体的に伝えられると、GPTからの返答も正確になります。

　プロンプトのフォーマットなるものもあるらしいので、
　今後質問する時は参考にしたいと思います。
　<font color="green">・例　やりたいこと＋手順を箇条書きにする
　　　　一度に指示せず、少しずつ修正して完成させる
   </font>

## おわりに
今更の使い方ではありましたが、こんな便利なものが、誰でも無料で使えるとはすごい時代だなと思いました。

有料版の活用、他ツールと組合わせて出来る事などが多く公開されていますが、とりあえず無料版のGPT3でも自分には充分便利で、対話しながらコードが書けるというのが不思議な感覚でした。

まだ使っていない方、一度試してみてはいかがでしょうか。

***
最後まで読んでいただき、ありがとうございました。