前回の実装結果を確認する
前回の動画で生成AIアプリをClaude CodeのPlanモードを使って要件をしっかり伝え、その計画を基に実装するところまで終わりました。今回はその最終的な出力結果を確認し、Gemini APIキーを用意して実際にアプリが動くようにしていきます。
ドキュメントの確認
docsディレクトリ配下にplan.mdファイルが保存されていることがわかります。1つのファイルで保存されていますが、実装の機能ごとにドキュメントを分けても構いません。例えばアーキテクチャの設計やデータベースの設定など、細かく分けることもできます。ただし今回はそこまで大きなアプリではないので、1つのファイルで十分です。
ソースコードの構成
srcディレクトリ配下にApp Directoryがあり、API（バックエンドのこと）が実装されています。フロントエンドに関しては、App Directory配下のpage.tsxに書かれています。
Next.jsの基本として、summarize、email、blogなどのディレクトリがページ切り替えに対応しています。例えばブログページに行きたい場合は、blogディレクトリ配下のpage.tsxを作って表示するという仕組みです。
ローカルサーバーを立ち上げる
実際にコードがどういった表示になっているかを確認するには、ローカルサーバーを立ち上げる必要があります。Next.jsでローカルサーバーを立ち上げるには、ターミナルをもう1つ追加して以下のコマンドを実行します。
npm run devエンターキーを押すとローカルサーバーが立ち上がります。localhost:3000で開きますので、Windowsの方はCtrlを押しながら左クリック、Macの方はCommandを押しながら左クリックで開けます。
UIの確認
Claude Codeが生成したUIを確認しましょう。UIの見た目は、各自のClaude Codeの出力次第で変わってくるので、同じ結果にはならないと思います。
今回のUIは統一感のあるデザインになっていますが、これはshadcn/uiというUIライブラリを裏側で利用しているためです。shadcn/uiはおしゃれなUIコンポーネントを提供してくれるライブラリで、気になる方はぜひ調べてみてください。
動作テスト
ブログ記事執筆の機能を試してみましょう。「使ってみる」を押すとブログ記事執筆ページに移動し、テーマを入力できます。
しかし、現時点ではAPIキーを用意していないのでエラーになります。エディタのターミナルを確認すると、ローカルサーバーの下に「API KEY NOT SET, PLEASE PASS A VALID API KEY」というエラーが表示されています。つまり、APIキーを用意すれば正常に動くと予想されます。