発展的な機能

より高度な機能に挑戦したい人向けのガイドです。

画像アップロード

概要

ユーザーが画像をアップロードし、表示できるようにします。

実装の指示

画像アップロード機能を追加して。

要件：
- 画像ファイルを選択してアップロード
- アップロードした画像をプレビュー表示
- Vercel Blobに保存（環境変数: BLOB_READ_WRITE_TOKEN）

参考：@vercel/blob パッケージを使って

Vercel Blobの設定

1. Vercelダッシュボード → Storage
2. 「Create Database」→「Blob」
3. プロジェクトに接続
4. BLOB_READ_WRITE_TOKEN が設定される

ユーザー認証

概要

ログイン機能を追加し、ユーザーごとにデータを分けます。

実装の指示

ユーザー認証機能を追加して。

要件：
- メールアドレスとパスワードでサインアップ/ログイン
- NextAuth.js を使用
- ログインしたユーザーのみデータを閲覧・編集可能
- 各ユーザーのデータは他のユーザーから見えない

必要な設定

1. NEXTAUTH_SECRET 環境変数
2. NEXTAUTH_URL 環境変数（本番URL）
3. データベースにusersテーブル

注意

認証は複雑なため、時間に余裕がある場合のみ挑戦してください。

AI機能（ChatGPT連携）

概要

OpenAI APIを使って、AIチャット機能を追加します。

実装の指示

ChatGPT APIを使ったチャット機能を追加して。

要件：
- 入力欄にメッセージを入力
- 送信するとAIが回答
- 会話履歴を表示
- ストリーミングで回答を表示

環境変数：OPENAI_API_KEY

必要なもの

• OpenAIアカウント
• APIキー（課金が必要）

リアルタイム更新

概要

複数ユーザーが同時に使っても、リアルタイムでデータが同期されます。

実装の指示

リアルタイム更新機能を追加して。

要件：
- 他のユーザーがデータを追加したら自動で反映
- Vercel KVまたはPusherを使用
- ページ更新なしでデータが同期

PWA（プログレッシブウェブアプリ）

概要

Webアプリをスマホのホーム画面に追加できるようにします。

実装の指示

PWA対応にして。

要件：
- スマホのホーム画面に追加できる
- アプリアイコンを設定
- オフラインでも基本機能が使える
- next-pwa パッケージを使用

別のアプリに挑戦

Chrome拡張機能

Chrome拡張機能を作って。

機能：
- ページ上のテキストを選択して右クリック
- 選択したテキストをコピー/保存

LINE Bot

LINE Botを作って。

機能：
- メッセージを送ると返信
- 特定のキーワードに反応
- LINE Messaging APIを使用

Discord Bot

Discord Botを作って。

機能：
- 特定のコマンドに反応
- サーバーにメッセージを送信
- discord.jsを使用

チャレンジのコツ

1. 公式ドキュメントを見る

AIに聞いても分からない場合は、公式ドキュメントを確認：

[機能名]の公式ドキュメントのURLを教えて

2. エラーは必ず読む

エラーメッセージには解決のヒントがあります：

このエラーの意味と解決方法を教えて：
[エラーメッセージ]

3. 小さく始める

大きな機能も、小さなステップに分けて実装：

まず最小限の動くものを作って。
[基本機能のみの要件]

---

どんどん挑戦して、スキルアップしていきましょう！