はじめに
これの続きです。
STEP
・要件整理（画面デザイン作成）
・フロンドエンド開発
・静的画面 ←いまここ
・表示切り替え（useState）
・画面遷移（useRouter）
・APIモック作成
・バックエンド開発
今回のやることとゴール
このSTEPではひとつ前の工程で決まった画面の、フロンドエンド側の開発を行います。
１から作成するのではなく、生成AIを使用して画面側（バックエンド処理を含まない）を作成します。
目次
１. 初期プロジェクトを作成（Next.js）
２. 追加するページのたたき台を作成
３. 実際のデザインを作成（生成AI/V0）
４. 作成したデザインをたたき台に移植（GitHub Copilot）
開発開始
初期プロジェクトを作成（Next.js）
こちらの方の手順を参考に、「npx create-next-app@latest my-next-app」を実行して、
Success! が表示されるところまで実施してください。
ざっくり2回目以降の自分へ
npx create-next-app@latest my-next-app でNext.jsプロジェクトを作成
cd my-next-app
npm run dev で開発サーバーを起動
作成されたフォルダ内にはReadmeが作成されています。
起動
VSCodeで作成されたフォルダを開き、Readmeファイルを表示して、任意の場所で右クリックし、
Copilot ＞ Explin を選択してファイルの説明をしてもらいましょう。
こんな感じ
では起動したいので、どうしたらいいの？（Readmeに書いてありますがｗ）と聞いてみます。
成功時のメッセージがちょっと違いましたが、起動はできました。
追加するページのたたき台を作成
ページを追加するためのページ用ファイルを作成します。
完全に個人的な体感ですが、
Copilot Editsはなぜかワークスペース全体の解析が苦手そうだったので、
いったんチャット画面を挟み、追加フォルダを確認した方がいいです。
ここで「src/app」配下へのファイル追加が妥当そうだったことがわかるので、
Copilot Editsに移動して、ファイルを追加してもらいます。
ポイントは明示的に追加先を記載することです。
ログイン画面を追加したいので、まずは「ログイン」という文字が表示される画面用のファイルをsrc/app配下に追加してください。
表示できました。
実際のデザインを作成（生成AI/V0）
今回はV0にデザイン画像を張り付けてコード生成をお願いしました。
（素晴らしい精度です。cursorではこうはならな・・おっと誰か来たようだ）
※V0ってなに？
作成したデザインをたたき台に移植（GitHub Copilot）
※GitHub Copilottってなに？
とりあえずコードをコピーして、何も考えずそのまま先ほど追加したファイルにコピペしてみます。
アイコン等をもってきてないので、そこがエラーになるのは予想がついていたのでいいのですが、
他でエラーが出ていそうです。
せっかくなので、修正機能を使ってみます。
モジュールが足りないようです。
ちなみに何それ？を聞いてみます。
心配なのでGoogle先生にも聞いてみましたが、大丈夫そうなので、インストールしてみようと思います。
※参考にした記事
提示されたコマンドを実行したらエラーになった
shadcn-ui@latest がエラーになりました。
npx shadcn-ui@latest initコマンドでインストールしたshadcn-uiのバージョンが0.9.0だったのですが、どうやらこのバージョンだと本エラーが発生するようです。
とのことなので、上記の方の手順の通り実行します。
初期化時にいろいろ聞かれるので、以下の方の手順を参考に設定していきます。
とりあえず動くバージョンでインストール
表示できました！
おわりに
同じ手順でログイン画面の後の画面を必要な数作りましょう。
まとめ
楽ちんだ～～