Vibe Coding1日目

# はじめに

AIを使用したVibe codingがかなり開発効率が良いという記事をよく見かけるので、
試しにやってみることにしました。

## 執筆者の背景
- vscodeを普段から使用している
- 個人開発
- vscodeにGithub Copilotプラグインを追加して推奨されるコードを利用したりしている
- AIの推薦したコードを使うことで、単体テストに不安が残り、結果、結合試験を増やして、もやもやしている

## vibe codingで試したもの
- vscodeにGithub Copilot Chat

Cursorなどはvscodeに似ているとはいえ、開発環境を変えたくなかったので、
まずは、Github Copilot Chatで試してみることにしました。

## 動機
- パート従業員を雇うことになり、今年から労働保険年度更新が発生する
- 今年の労働保険年度更新申請は6月2日（月）から7月10日（木）まで
- できれば労働保険年度更新申請をAPIで処理したい
- 去年の算定基礎届の時にも、そう思ってAPIの処理を進めていたが、検証環境のアカウント作成前で止まっている
- 良い機会なので、軽そうな労働保険年度更新申請を組み込む
- APIではXMLを送信する（JSONにも対応してほしいぞ）
- XMLのxlsの定義書はあるが、XMLサンプルの本体は別のものは異なる定義のサンプルが１個あるだけ
- 今回は時間がないのでXMLのテンプレートに直接埋め込むという超絶簡単なつくりで組み込みたい
- まずはXMLのテンプレートを作る
- vscodeにxlsからコピペして、エディタの置換処理でタグに変換する
- 手作業で終了タグを追加して、10行ぐらい進めて手が止まる。かなり面倒だ。。
- これはvibe codingでうまいことできるんじゃないだろうか

## XMLテンプレートを作成しようとした流れ
1. xlsのXML定義書
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687151/49b131fa-101d-4d60-8e18-3f01d6da36e9.png)

2. vscodeにコピペ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687151/01e975f9-affd-437e-907c-d4bfe49ead63.png)

3. vscodeのエディタで置換処理
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687151/1fcc7758-dbad-4fc4-8726-3d73856468b9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687151/2e3185b4-98a8-4953-867b-75e76e30707f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687151/ebd66276-f4e0-49ec-be2a-c0215d9b07e8.png)

4. 手作業で少し修正
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687151/fd6b761c-b21f-4460-99c8-883a0a1a5cea.png)

# Vibe Coding?
1. 全選択をして右クリックメニューの【Copilot】-【Editor Inline Chat】を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687151/4025d453-cbbe-46da-98b2-fb05827c67e9.png)

2. 「階層を考慮して、XMLの終了タグを追加して」を入力して送信
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687151/961c2215-b288-47c0-9406-01e5c7b565b3.png)

3. その結果がこちら（信用していないので、処理実行毎にGitにコミットして差分比較しています）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687151/6a605274-011c-4435-b6ed-afdc79dba52d.png)
おー、うまくできているようです。Copilotちゃんの好感度アップです。

4. しかしサンプルを見ると、謎の属性があります
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687151/b5a3528e-d8d4-489f-bb7d-c144a34fcad7.png)

5. 属性の情報はXML定義書の後ろの方に書いてありました。属性列ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687151/981392ff-9c0a-409c-91d3-653947cdbe96.png)

6. Excelを持っていないので、LibreOfficeで開いていますが、さすがにcsvで変換してあげたほうがCopilotちゃんが読みやすいだろうということで、csvで出力して、プロジェクトのフォルダにおいてあげます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687151/d50c9e4e-89c8-44bc-b775-fc02cb0ffe19.png)

7. Editor Inline Chatを使って「労働保険年度更新申請.csvを参考に、労働保険適用徴収システムにおける特殊属性を属性に追加して」と実行しました。※csv出力したファイル名が労働保険年度更新申請.csv
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687151/e177dc0e-3060-4faa-b614-de41fc47775e.png)

8. 他のファイルの参照ができないようで、失敗しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687151/b2f373f5-fa4e-4c30-8373-5b0e9f1e5e73.png)

9. 次にメニューの【View】-【Chat】を選択して、Github Copilot Chatを試してみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687151/8b18560d-7bcc-4287-9c7d-45172449532a.png)

10. 「労働保険年度更新申請.csvを参考に、労働保険適用徴収システムにおける特殊属性をlabor_insurans_annual_renewal.xmlに反映して」と入力したら、いまいちでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687151/14cb66e5-e621-411b-b9c1-4649e6569dd0.png)

11. もう少し絞ります。「労働保険年度更新申請.csvを参考に、労働保険適用徴収システムにおける特殊属性のみをlabor_insurans_annual_renewal.xmlに反映して」で実行したら、いい感じになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687151/593beace-e675-4a7f-8720-bccda99ac098.png)

12. 反映ボタンがあるので、反映すると。いろいろだめです。タブがスペースに変わっていて、生成していない部分がごっそり削除されています。いい感じには反映されない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687151/d7be6ce8-8f91-4629-880e-a1b3123d7650.png)

13. まずはタブに変換する。「労働保険年度更新申請.csvを参考に、労働保険適用徴収システムにおける特殊属性のみをlabor_insurans_annual_renewal.xmlに反映して、階層はタブで」。うまくいかない。
14. アプローチを変更して、ファイルのタブをスペースに変換する。
15. タブはスペース4桁固定のようなので、スペース4桁に変換する。
16. 全てのタグを表示したいので、「労働保険年度更新申請.csvを参考に、労働保険適用徴収システムにおける特殊属性のみをlabor_insurans_annual_renewal.xmlに反映して、全てのタグを出力して」で実行して反映した結果。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687151/3fcfdbd6-9ce7-402b-bbb4-d762f0c43ec0.png)
うまくできたようです。Copilotちゃん頑張りました。まだ定義書と比較してないけど、よさげ。

17.定義書と比較したら50個以上抜けがあった。まだまだですね。この場合は、表計算ソフト上で属性を列移動して、タグ名と属性をテキストにコピーして、「終了タグを追加して」とAIに頼むのが良かったかも。

# 所感
- vscodeで開発している人は、最初に試すならgithub copilot chatが手軽でよい
- 記事を書きながら、1時間でここまでできたので、命令が上手にできれば楽。
- あまり楽すぎると泥臭い作業がますます嫌いになりそう。
- これからプログラムを始める人は、開発期間が短くなることで、学習するバッファがなくなってつらいかも
- コーディングといってもXMLのテンプレート作成しただけなので、あまりコーディングな感じではないが、泥臭い作業をやってもらえるのはかなりありがたい。
- 何か作業をする際は、AIに頼めるかな？自分がやったほうが早いかな？という判断が最初に必要になるかもしれない。
- AIをチームメンバと考えれば、あまり違和感ない