はじめに
DTダイナミクスで板金・溶接Webの開発をしている森口です。
昨今話題となっているバイブコーディング。
長期休暇が始まり、まとまった時間が取れましたので、バイブコーディングを体験してみました。
社内の用語を検索するchrome拡張機能を作りたいと思っていたので、今回はこれを題材にバイブコーディングを体験していこうと思います！
バイブコーディングとはなんぞや？
バイブコーディングを一言で言うと、「コーディングの大部分をAIに任せちゃおう！」というものです。
AIとチャットでやり取りしながら、感覚(バイブス)で開発を進めていくことから「バイブコーディング」と言われており、完璧なものを最初から目指すのではなく、動くものをまずは作ることを重要視しているようです。
作ったもの紹介
概要
よくあるものにはなりますが、用語の意味を検索できるChrome拡張機能を作りました。
機能としては以下のような簡単なものになります。
- ブラウザ上に表示されているテキストを選択し、検索ボタンをクリックすることで意味を表示する。
- 拡張機能のポップアップメニュー内で用語の検索ができる。
- デフォルトの用語一覧に加え、利用者が独自に用語を追加できる。
技術スタック
- Cline (AIエージェント)
- DeepSeek (LLM)
- Manifest V3（Chrome拡張の仕組み）
- React
- TypeScript
- Vite
デモ
| 設定タブ | 検索タブ | 検索結果ダイアログ |
|---|---|---|
 |
 |
 |
開発ステップ
- Clineに以下の要件を共有
- コードの自動生成
- 生成されたのはChrome拡張機能の開発に必要なJavaScriptのファイル一式。
- この段階では要件通り動作しない部分も多々あり。
- 修正してほしいポイントを共有し、コードを修正
- 3回ほどやり取りし、要件通り動作するコードが生成された。
- 同じ仕様のものをReactベースで作り変えてほしい旨を共有
- コードが自動で生成されるも、想定通りに動作せず
- 何度かやり取りを試みるも動作せず。
- 同じ修正をループするようになったため断念。
- 手動でReactベースのコードを生成
- Clineにリファクタリングを依頼
- 手動で見た目の調整
- 完成
まとめ
- プロトタイプの作成には非常に便利。
- リファクタリングで出力されるコードが綺麗 (勉強になる)。
- 意外とやすい
- 丸一日使ったが1ドルも掛からなかった(DeepSeekが特別安いのかも)
- 要件を正確に伝えないと意図しない修正が入る。
- 文章を作ったり、チャットでのやり取りに時間がかかるため、コードを自分で書いた方が早いこともある。
- 空でも良いので構成がわかるレベルでファイルを生成しておき、 AIに依頼すれば構成を理解してくれて意図した内容で生成してくれる。
- 業務の効率化にはなるが、要件を正確に伝えるのが難しいことから全てをAIに任せるのはまだ難しい。
最後に
AIのみで完結できなかったため、完全なバイブコーディングとはいきませんでしたが、AIとの付き合い方を身をもって学べ、良い経験になりました。
0から新しくツール・システムを作成する際には非常に便利なので、皆さんもぜひ試してみてください。
わたしたちミスミ、そしてDTダイナミクスは一緒にmeviyを通して世界の製造業を支える仲間を募集しています！
少しでも興味のある方はぜひカジュアル面談しましょう！
