LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@uchicom

Vibe Coding1日目

Last updated at Posted at 2025-06-04

はじめに

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

  2. vscodeにコピペ
    image.png

  3. vscodeのエディタで置換処理
    image.png
    image.png
    image.png

  4. 手作業で少し修正
    image.png

Vibe Coding?

  1. 全選択をして右クリックメニューの【Copilot】-【Editor Inline Chat】を選択
    image.png

  2. 「階層を考慮して、XMLの終了タグを追加して」を入力して送信
    image.png

  3. その結果がこちら（信用していないので、処理実行毎にGitにコミットして差分比較しています）
    image.png
    おー、うまくできているようです。Copilotちゃんの好感度アップです。

  4. しかしサンプルを見ると、謎の属性があります
    image.png

  5. 属性の情報はXML定義書の後ろの方に書いてありました。属性列ですね。
    image.png

  6. Excelを持っていないので、LibreOfficeで開いていますが、さすがにcsvで変換してあげたほうがCopilotちゃんが読みやすいだろうということで、csvで出力して、プロジェクトのフォルダにおいてあげます。
    image.png

  7. Editor Inline Chatを使って「労働保険年度更新申請.csvを参考に、労働保険適用徴収システムにおける特殊属性を属性に追加して」と実行しました。※csv出力したファイル名が労働保険年度更新申請.csv
    image.png

  8. 他のファイルの参照ができないようで、失敗しました。
    image.png

  9. 次にメニューの【View】-【Chat】を選択して、Github Copilot Chatを試してみました。
    image.png

  10. 「労働保険年度更新申請.csvを参考に、労働保険適用徴収システムにおける特殊属性をlabor_insurans_annual_renewal.xmlに反映して」と入力したら、いまいちでした。
    image.png

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

image.png

  1. 反映ボタンがあるので、反映すると。いろいろだめです。タブがスペースに変わっていて、生成していない部分がごっそり削除されています。いい感じには反映されない。
    image.png

  2. まずはタブに変換する。「労働保険年度更新申請.csvを参考に、労働保険適用徴収システムにおける特殊属性のみをlabor_insurans_annual_renewal.xmlに反映して、階層はタブで」。うまくいかない。

  3. アプローチを変更して、ファイルのタブをスペースに変換する。

  4. タブはスペース4桁固定のようなので、スペース4桁に変換する。

  5. 全てのタグを表示したいので、「労働保険年度更新申請.csvを参考に、労働保険適用徴収システムにおける特殊属性のみをlabor_insurans_annual_renewal.xmlに反映して、全てのタグを出力して」で実行して反映した結果。
    image.png
    うまくできたようです。Copilotちゃん頑張りました。まだ定義書と比較してないけど、よさげ。

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

所感

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?