Codevとは
Codevはプロンプトを通してWebアプリを作成できるAIプラットフォームです。Next.jsやSupabaseといった最新の技術スタックを採用しており、リアルタイム性を備えたモダンなアプリケーションを開発できます。
無料プランでは1つのWebアプリのみ作成でき、有料登録することでコードの生成や修正も可能。Supabaseと接続し、ログイン機能やデータベース機能も生成できるのが魅力です。
Codevでできること
Next.jsを活用したモダンなWebアプリケーションの生成
CodevはNext.jsを採用しており、モダンなWebアプリを作成できるのが特徴です。 Next.jsは高速なページ表示やSEO対策に優れており、Codevを通じて生成されるアプリもこれらのメリットを活かした構成となっています。
また、静的サイト生成（SSG）やサーバーサイドレンダリング（SSR）に対応しているため、用途に応じた柔軟なアプリ開発が可能。 最新の技術を取り入れた、高品質なアプリを効率よく構築できます。
基本機能を備えた完成度の高いWebアプリ
Codevが生成するアプリにはデータベース連携やCRUD（作成、読み取り、更新、削除）機能など、基本的なWebアプリの要件が含まれています。
これにより生成直後から実用的なアプリとして利用可能。 また、デプロイできる状態で提供されるため、完成品をすぐにオンラインで公開できます。
自由にカスタマイズ可能なソースコード
Codevの有料プランを利用すると、生成されたアプリのソースコードを自由に編集・変更できます。
Codevが作成したアプリをベースにして、独自の要件や機能を容易に追加することが可能。 アイデアのプロトタイプ作成からカスタマイズを重ねた本格的なアプリ開発まで、一貫して対応できる柔軟性が特徴です。
Codevの料金プラン
Cadevの料金プランは下記の通りです。[1]
| プラン | 価格 | 特徴 |
|---|---|---|
| Hobby | 無料 |
|
| Pro | 49ドル（割引価格） |
|
| Enterprise | カスタム料金 |
|
Codevの使い方
はじめにCodevの公式ページへアクセスします。
Codev：https://www.co.dev/
Codevより
トップページの右上にある「Get started」ボタンをクリック。
Codevより
Googleアカウントおよびメールアドレスで新規登録できます。任意の方法を選択してください。
Codevより
アカウント登録が終わると、上記のプロジェクト画面が表示されます。右上にある「New Projects」をクリックします。
Codevより
任意のプロジェクト名を入力してください。今回はTwitterのようなアプリを作成するので、そのままの名前をプロジェクト名とします。
Codevより
「What would you like to build?」という入力画面に、作成したいアプリのプロンプトを記載します。今回利用するプロンプトは下記の通りです。
「Next.jsとSupabaseを使用して、TwitterのようなSNSアプリを作成してください。以下の要件を満たしてください。
基本機能
ユーザーログイン機能:
Supabaseの認証機能を利用して、ユーザーがメールアドレスとパスワードでアカウントを作成・ログインできるようにしてください。
ログイン後、ユーザー専用のタイムラインにアクセスできるようにしてください。
投稿機能:
ユーザーはテキスト（最大280文字）を投稿できます。
投稿は自動的にタイムラインに表示されます。
タイムライン機能:
すべてのユーザーの投稿を時系列順に表示。
各投稿には投稿者の名前、投稿日時、テキストが表示されます。
いいね機能:
各投稿に「いいね」ボタンを設置。
ユーザーが「いいね」をクリックするとカウントが増える。
追加機能（余裕があれば実装）
フォロー機能:
ユーザーが他のユーザーをフォロー可能。
自分がフォローしているユーザーの投稿だけを表示する「マイタイムライン」機能を追加。
プロフィール機能:
プロフィールページでユーザーの名前、投稿数、フォロワー数、フォロー数を表示。
プロフィール画像のアップロード機能。
コメント機能:
投稿に対してコメントを追加できる。
ユーザーインターフェース
Next.jsでシンプルかつモバイル対応のレスポンシブデザイン。
Tailwind CSSを使用して軽量かつ美しいデザインを構築。
ページ構成
ログイン/サインアップページ: ユーザーがアカウントを作成またはログインできる。
ホームページ（タイムライン）: 投稿作成フォームとタイムラインを表示。
プロフィールページ: ユーザーの情報と投稿一覧を表示。
技術要件
フロントエンド:
Next.jsを使用してリアクティブなUIを構築。
バックエンド:
Supabaseのデータベースを利用して投稿、ユーザー情報、いいね数を保存。
Supabaseのリアルタイム機能を活用して、新しい投稿や「いいね」を即座にタイムラインに反映。
開発の優先順位
ユーザー認証（メールアドレスとパスワードのみ）。
投稿機能とタイムラインの表示。
「いいね」機能。
必要に応じて追加機能を実装（フォロー機能やプロフィールページなど）。
このアプリは、TwitterのようなSNSアプリをシンプルに構築することを目的としています。」
ログイン機能やデータベース機能を使う場合、プロンプト入力に「Add user login」へチェックを入れて表示内容から「Supabase Project」ボタンをクリックして下さい。
ログイン機能が必要ない場合は、そのままプロンプト内容を実行することでアプリを生成できます。これから先はログイン機能を実装することを前提に解説を進めます。
Codevより
「Supabase Project」ボタンをクリックすると、SupabaseとGitHubアカウントの連携画面が表示されます。「Authorize supabase」ボタンをクリックしてください。
Codevより
APIへのアクセスに関する画面が表示されるので、内容を確認後「Create an organization」ボタンをクリックします。
Codevより
Name欄に任意の名称を入力して「Create organization」ボタンをクリックします。
Codevより
上記画面が表示されるので、右下にある「Authorize co.dev」ボタンをクリックします。
Codevより
Codevの画面に戻るので、再度「Supabase Project」をクリックして下さい。すると先ほど「Name」欄に記載した名称が表示されるので、そちらを選択します。
そのあと「Supabase Project」ボタンの左側にある「Connect」をクリックしてください。
Codevより
a上記のようにプロジェクト作成画面が表示されます。プロジェクト名は既に表示されているので「Database Password」のみ任意で入力して「Create new project」ボタンをクリックしてください。
Codevより
しばらく処理画面が続くので、上記画面が表示されるまで待ちましょう。右上の「Connect」ボタンをクリックします。
Codevより
再度Codevの画面に戻り、上記画面の各欄に設定したプロジェクト名とデータベースのパスワードを入力して「Generate」ボタンをクリックして下さい。
Codevより
画面右に作業過程が表示され、右に完成したWebアプリが表示されます。しかし今回のプロンプトでは、ログイン機能は実装できたものの、ツイートの作成画面とツイートの結果を反映させる画面は作成できませんでした。
Codevより
機能の追加や編集は、画面右のチャット欄へプロンプトを通して実行できます。
今回はチャット欄に下記のプロンプトを入力し、ツイート機能とその結果を表示するフィード欄を作ってみます。
メールアドレスとパスワードで新規登録した場合、その情報でログインできるようにしてください。
ログインした人にはツイートを作成できる画面を表示し、ツイートすると自分のフィード上に反映させられるようにしてください。
Codevより
すると上記のように、ログイン後はツイートの作成画面が表示される仕様になりました。
Codevより
ツイートした内容はツイート作成欄の下部に反映されます。改善の余地はまだまだありますが、このようにプロンプトだけでWebアプリの作成・改善を実現できます。
Codevより
また、右上にある「Deploy」を押すと文字の通り作成したWebアプリをデプロイできます。このようにCodevを使うことで、ログイン機能やデータベース機能を採用したWebアプリを作成できるのが魅力です。
References
- ^ Codev. 「Pricing Information」. https://www.co.dev/pricing, (参照 2024-12-09).
