🎍

初学者がバイブコーディングでWebアプリ開発をやってみた記録

に公開
Next.js
React
webアプリ
Cline
Vibe Coding
idea

はじめに

年末年始に時間があったので、バイブコーディングで初めてwebアプリ作成をしてみました。バイブコーディングでの開発のスピード感を知るためには、実際に手を動かした方が早いと思い、今回「2048ゲーム」と「タスク管理アプリ」を作ってみました。

私はエンジニア2年目で、普段は組み込み系の開発を行っており、webアプリ開発は初挑戦です。ただ前々から自分の日常生活の課題をアプリ開発ですぐに解決できるスキルを身に着けたいと思っていました。

この記事は私が行ったことと気づきを整理&記録し、また私と同じようにとりあえず何か手を動かしてバイブコーディングを始めたい人の参考になればいいなと思っています。

準備

開発手順を知る

生成AIを用いた開発手順については、以下のyoutube動画や書籍を参考にしました。後述する2048ゲームは書籍でも題材としてとり挙げられています。

【完全版】これ一本で「バイブコーディング」の全てが学べます【AI駆動開発/Cursorを利用】

https://www.youtube.com/watch?v=LWqIWPU1QAY

AI駆動開発完全入門 ソフトウェア開発を自動化するLLMツールの操り方 田村悠

生成AIモデルのAPIキー準備

  • コーディングツール
    →今回はコーディングツールにClineを使用しました（会社で少し使ったことがあるため）。ClineとはVSCode上で動作するAIコーディングエージェントで、VScodeの拡張機能から追加できます。

  • 生成AIモデル
    →Clineでは自分でAPIキーを登録する必要があるため、どの生成AIモデルのAPIキーを使うかの選定から始めました。最終的に1Mトークンあたりの価格とコーディング性能のバランスと新規登録時の無料枠があったGemini APIを使用しました。

2048ゲーム作成

まずnext.jsを用いて2048ゲームの作成に取り組みました。このゲームアプリのルールは本家と同じで、スコアランキング機能を付けました。スコアはSupabaseで管理し、ゲームオーバー時にユーザー名を入力するとDBにスコアを登録することができます。

ここで行ったこと

  • Clineを用いた仕様駆動開発（AIとの開発の仕方を学ぶ、トークン消費量を体感する）
  • DBを使ってみる(SQLite, Supabaseをprismaを用いて利用してみる）
  • Vercelへデプロイしてみる

Clineを用いて2048ルールの書き出し、要求仕様の整理（requirements.mdの作成）、フェーズ毎のタスク整理(tasks.mdの作成）を行ったうえで、実装をClineにお願いしました。（後から知りましたが、この開発体系を仕様駆動開発と呼ぶらしいです）。

ここでの気づき

  • トークン消費量の感覚
  • clinerulesの必要性

デバッグ時に連続してclineに曖昧な指示を投げたり、clineも何度も同じコマンドを実行しようとした結果、Gemini APIの使用上限(TPM)に引っかかり、使えなくなる事態が発生しました…
トークン上限に達した別な原因は、PlanとActモードで同じモデルを使用していたことも考えられます。最初はPlanとAct両方ともGemini-2.5-flashを使っていました。利用制限以降は、PlanモードをGemini-3-proで、ActモードをGemini-3-flashでモデルを分けたことで、各モデルのトークン消費量は抑えられたかなと思います。

またClineは要求仕様の検討後、全ての機能を一気に実装しようとする傾向もあったため、要求仕様を固めた後に、tasks.md記載のフェーズに沿った開発進行をclinerules（Clineに対する開発ルールを定義する設定ファイル）に記載したところ、フェーズ毎の実装が行われました。開発をやりながらAIモデルの癖を知り、clinerulesを育てていく感じなのですかね。

タスク管理ツールの作成

Next.jsはログイン機能を簡単に実装できるとのことで試してみました。題材は前々から作ってみたかったタスク管理アプリにしました。カテゴリ毎にタスクを追加でき、カテゴリを横断して全てのタスクを締切順に表示できます。


カテゴリ追加画面


締切順のタスク表示画面

ここで行ったこと

  • ログイン機能の追加
    →auth.jsを使用してログイン機能を実装しました。こちらもClineに実装を指示し、ログインユーザー毎にタスク管理画面を表示することができました。
    (auth.jsはBetterAuthに統合されていたようなので、次回からはそちらを利用します…！）

ここでの気づき

  • レンダリング手法
    →今回のアプリは一応動作しましたが、画面遷移やタスク追加時の遷移処理に数秒かかっている状態です。その原因調査の中でレンダリング処理の責務やタイミングによってCSR/SSR/SSG/ISRといった種類があることを学びました。

今後のトライ

  • Reactの勉強
    →今回の試みで、とりあえず”動くもの”はできたが、コードの理解は全然追いついていないです。責任をもってアプリを公開し使っていただくには、アプリのコードや利用したライブラリの技術的な仕組みの理解が必要であると感じます。

  • アプリのデザインも少し考えてみる
    →生成AIに任せるとどうしてもデザインが平面的でどれも似たようなデザインになってしまいます（プロンプトの問題？）。デザインもAIに全任せではなく、人間がある程度のポンチ絵を作成しAIに入力することで、差別化されたデザインのアプリ開発も可能になるのではと思いました。Figmaなどデザインツールも実際に使ってみたいと思っています。

  • nativeアプリ作成に挑戦
    →タスク管理アプリで毎回webブラウザでログインするのは使いづらいと感じました。将来的にios上で動くアプリ開発にも挑戦したいです。

まとめ

今回は「まず作ってみる」ことを目的に、バイブコーディングでWebアプリ開発に挑戦しました。
正直、コードの中身を十分に理解できていない部分も多く、知らなければいけないことはたくさんありますが、
Webアプリ開発の全体像や、AIと一緒に開発する感覚を掴めたことは大きな収穫だったと感じています。

これからはReactやNext.jsの基礎をしっかり学びつつ、今回作ったアプリを少しずつ改善していきたいです。同じように「とりあえず何か作ってみたい」と思っている方の、最初の一歩の参考になれば嬉しいです。

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

Discussion