保育園、幼稚園向けの連絡帳サイトを生成AIの力を駆使してマイクロサービスで作ってみたい～フロンドエンド開発～

# はじめに

https://qiita.com/Jasmine_teeeeee/items/e65e6e41f1eaced9d71d

これの続きです。

# STEP
・[要件整理（画面デザイン作成）](https://qiita.com/Jasmine_teeeeee/items/e65e6e41f1eaced9d71d)　
・フロンドエンド開発
　・[静的画面](https://qiita.com/Jasmine_teeeeee/items/d087b0b309508c7ceaec) ←いまここ
　・[表示切り替え（useState）](https://qiita.com/Jasmine_teeeeee/items/71d5caa3f1d54ccf8918)　
　・[画面遷移（useRouter）](https://qiita.com/Jasmine_teeeeee/items/6848f94dcec817d3e04f) 
　・[APIモック作成](https://qiita.com/Jasmine_teeeeee/items/76294bb468a065400b0e)
・バックエンド開発

## 今回のやることとゴール

このSTEPではひとつ前の工程で決まった画面の、フロンドエンド側の開発を行います。
１から作成するのではなく、生成AIを使用して画面側（バックエンド処理を含まない）を作成します。

## 目次

１\. 初期プロジェクトを作成（Next.js）
２\. 追加するページのたたき台を作成
３\. 実際のデザインを作成（生成AI/V0）
４\. 作成したデザインをたたき台に移植（GitHub Copilot）

# 開発開始

## 初期プロジェクトを作成（Next.js）

https://zenn.dev/naoji/articles/nextjs-10minitues-installation-0010

こちらの方の手順を参考に、「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　を選択してファイルの説明をしてもらいましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/a0ef5dca-10a7-8113-a17d-0afdf596e3c8.png)

こんな感じ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/485b3edb-06d0-8544-202f-70ff49ff5b2f.png)

では起動したいので、どうしたらいいの？（Readmeに書いてありますがｗ）と聞いてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/2f878990-b3a6-f190-0e5d-4007c1c9216f.png)

成功時のメッセージがちょっと違いましたが、起動はできました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/1ea3f788-ffb9-ce68-6f12-c16d4eb480d3.png)

## 追加するページのたたき台を作成

ページを追加するためのページ用ファイルを作成します。

完全に個人的な体感ですが、
Copilot Editsはなぜかワークスペース全体の解析が苦手そうだったので、
いったんチャット画面を挟み、追加フォルダを確認した方がいいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/ad47158b-c618-2162-067a-d8f2deb8e280.png)

ここで「src/app」配下へのファイル追加が妥当そうだったことがわかるので、
Copilot Editsに移動して、ファイルを追加してもらいます。

ポイントは明示的に追加先を記載することです。

>ログイン画面を追加したいので、まずは「ログイン」という文字が表示される画面用のファイルをsrc/app配下に追加してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/165ed4fb-3f21-e623-c7ac-89b7b509d94d.png)

表示できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/98408360-b28c-52ca-95c2-510e3c698ef9.png)

## 実際のデザインを作成（生成AI/V0）

今回はV0にデザイン画像を張り付けてコード生成をお願いしました。
（素晴らしい精度です。cursorではこうはならな・・おっと誰か来たようだ）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/ced418c0-fb41-7c35-33b9-676f4925a93c.png)

※V0ってなに？

https://qiita.com/Jasmine_teeeeee/items/10bb58371daa0113acb4

https://qiita.com/Jasmine_teeeeee/items/e98b2021ae7fd910e064

## 作成したデザインをたたき台に移植（GitHub Copilot）

※GitHub Copilottってなに？

https://qiita.com/Jasmine_teeeeee/items/742b077c0640be94405f

https://qiita.com/Jasmine_teeeeee/items/3c0bb56f400ff7fee517



とりあえずコードをコピーして、何も考えずそのまま先ほど追加したファイルにコピペしてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/0397aa4b-5b62-e3fc-369b-0ba44da9708a.png)

アイコン等をもってきてないので、そこがエラーになるのは予想がついていたのでいいのですが、
他でエラーが出ていそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/cc9e792b-6a08-448f-414f-54d8dd73264f.png)

せっかくなので、修正機能を使ってみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/1af0b986-3d88-e90a-a6d2-0ef1b2f8422f.png)

モジュールが足りないようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/59377c4f-17d8-64f8-beaa-97c420cd6da0.png)

ちなみに何それ？を聞いてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/bd199521-d758-33a2-5102-a634af093ab3.png)

心配なのでGoogle先生にも聞いてみましたが、大丈夫そうなので、インストールしてみようと思います。

※参考にした記事

https://qiita.com/twrcd1227/items/d4a67bb155503fde30f5

### 提示されたコマンドを実行したらエラーになった

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/920bcbee-b803-7d0a-90f4-2fb0101f6349.png)

shadcn-ui@latest　がエラーになりました。

https://shun-studio.com/next-js/shadcn-ui-command-error/

>npx shadcn-ui@latest initコマンドでインストールしたshadcn-uiのバージョンが0.9.0だったのですが、どうやらこのバージョンだと本エラーが発生するようです。

とのことなので、上記の方の手順の通り実行します。
初期化時にいろいろ聞かれるので、以下の方の手順を参考に設定していきます。

https://qiita.com/ta-hiro/items/8fc1e48e04d356977463

とりあえず動くバージョンでインストール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/0b3ddc54-a64e-4196-724a-27f213105bab.png)

表示できました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/40143c38-2881-4abe-6281-09038a031c45.png)

# おわりに

同じ手順でログイン画面の後の画面を必要な数作りましょう。

# まとめ

楽ちんだ～～