1.自己紹介
昨年4月に未経験でエンジニアの世界に飛び込んだ31歳です。
入社前のスクールではJavaを学び、現在は現場でC#やReactを使いながら、新規開発や保守に勤しむ日々を送っています。
2.バイブコーディングとは
釈迦に説法ではありますが、バイブコーディングとは、自らコードを一行も書かずに、AIなどのツールを活用して 「雰囲気(バイブス)」でアプリを作り上げる 開発手法です。
今回は、キノコードさんのYouTube動画をきっかけに、この波に乗ってみることにしました。
3.なぜバイブコーディングに取り組んだのか
きっかけは、上長からの 「AI開発についてキャッチアップしておいて」 というミッションでした。
正直、何から手をつければ……と思っていたところ、YouTubeでキノコードさんの解説動画に出会い、「これならバイブスでいける!」と直感したのが始まりです。
4.今回作ったアプリの紹介
エンジニアが新しい世界に足を踏み入れる際、避けては通れない 「伝統行事」 があります。そう、Hello Worldの出力です。
バイブスで開発するならもっと複雑なものを、という誘惑もありましたが、まずは伝統を重んじ、AIにこの儀式を代行してもらうことにしました。
- 機能(儀式の全貌):
- 降臨: ボタンを押すと、画面に「Hello World」という聖なる文字列が出現します。
- 浄化: 「クリア」ボタンを押すことで、出力を一瞬で無に帰します。
- 記録(保存): 伝統の足跡を残すべく、出力内容をテキストファイルとして保存する機能も搭載しました。
- 技術スタック: フロントエンドにReact、バックエンドにJavaという、伝統行事にしてはなかなか豪華な構成です。
最初のHello World出力までは、わずか5分。カップラーメンが伸びる前に、私の伝統行事は完了してしまいました。
5.使用ツールとトラブルシューティング
開発の相棒には、VS CodeベースのAIエディタであるCursorを選び、その中でGeminiを呼び出して相談しながら進めました。
順調に進んでいた儀式ですが、「保存機能」の実装で壁が立ちはだかりました。
- 問題: JDKはインストール済みでしたが、パスがCursorではなくEclipseの方を向いていたのです。
- 解決策: Geminiに「パスが通らない!」と泣きついたところ、適切な設定を案内してくれました。パスを修正することで、無事にJavaを動かすことに成功しました。
6.作ってみた感想
「コードを一切書かずにアプリが動く」 という体験は、純粋に面白いものでした。しかし、同時に大切なことにも気づかされました。
- 基礎知識は裏切らない: 環境構築やパスの設定で詰まったとき、結局助けになったのは基礎知識でした。バイブコーディングといえど、 「基礎がないとバイブスも乗らない」 というのが正直な感想です。
- 今後の展望: 今回の「バイブコーディング・イントロダクション」はこれにて閉幕です。今後は、環境構築などの「よう勉強」な部分を克服しつつ、さらに高度なバイブスで別のアプリ制作にも挑戦してみたいと思います。
7.Qiita記事までAIに書かせてみた
実は、この記事自体も「バイブス」で作成しています。 執筆プロセスは以下の通りです。
- 音声での記録: 開発の合間に、ボイスレコーダーに向かって約3分ほど、その時の状況や感情を記録しました。
- NotebookLMへの投入: その音声ファイルと、あらかじめ用意した記事構成 を、AIツール 「NotebookLM」 に読み込ませました。
- AIとの対話: ソース(音声)と構成案に対し、AIから「ここが足りないよ」という質問(自己紹介や具体的な動機など)を投げてもらいました。
- 記事の生成: その質問に答えるだけで、AIが点と点をつなぎ合わせ、今あなたが読んでいるこの記事を爆速で書き上げました。
開発だけでなく、アウトプットまでもAIと共同作業する。 これこそが、令和のエンジニアのバイブスかもしれません。