自分で実装したくないので、Cursor（AI搭載エディタ）にReact開発全部してもらった結果

# はじめに

Cursorのインストールまではこちらの方の記事を参考にしました
https://qiita.com/railgun-0402/items/717f44df9d68d77309f1

vueで触った時の記事はこちら
https://qiita.com/Jasmine_teeeeee/items/b443c90f37a10276ff53

Reactのインストール～起動まではこちらの方の記事を参考にしました
https://qiita.com/y_kato_eng/items/68e6c971358ddffbc5ff

使用しているAIモデルは、Claude 3.5 Sonnetです。

# ゴール

Amazonのセール画面のデザイン再現

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/8a58c210-57e8-30d1-b372-805dd3d6d44d.png)

実務で、デザイン部隊が持ってきた画面デザインを実装するときに、
Cursorを使えば爆速だと思ったので、手順を残しておきます。

デザインはキャプチャでも大丈夫でした。
今度figumaとの連携方法も記事にできたらいいなと思っています。

# 初回生成

Reactを起動している状態
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/f27beb1c-006a-9aeb-b61e-8792631e043f.png)

Cursorエディタの左側に色々出ているようであれば、クリアしましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/e7321c91-7604-7f26-f0cd-d8d8fb491fb9.png)

「Open Folder」ボタンからReactのプロジェクトを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/28f65219-c2e5-2041-2fc6-b25de58d13e1.png)

新規ファイル作成が度々発生するので、ターミナルを開いておく
rootフォルダで右クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/1590fc2a-8936-3d0a-db2c-67b48fbdb6b2.png)

ターミナルが開きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/b6decc89-f698-3f52-ef5b-3fb07e2ade4e.png)

AIさんにディレクトリ構成を理解してもらう
rootフォルダで右クリック→パスをコピー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/64e11079-026c-f779-ab65-cd17816a7caf.png)

このフォルダ構成を把握して的なプロンプトで自動的になんの言語なのか理解しておいてもらう
（ここはもっといい方法がありそう）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/5a82cb9f-7865-f1a5-4a15-dc63c60b0db4.png)

デザイン画像をコピペして、目的を伝える
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/ea37a4e1-34bb-93ae-fbff-d32cc9faa2b9.png)

色々提案してくれるので、コードを以下アイコンで選択して、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/8b388b11-43f7-2914-f44b-4a42b0f8cb6e.png)

何すりゃいいんじゃいと質問
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/a66ba674-90ee-5753-8643-342126641639.png)

フォルダを作って、ファイルを作って
とのことなので、先ほど開いたターミナルでフォルダを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/ff97d64c-5130-9a0a-2cc5-d24c142ea56b.png)

一つづつ進めて、都度質問しても優しく教えてくれます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/45358f32-55ee-b802-58ee-00661842b7cb.png)

提案されたコードを適用するには以下アイコンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/7e9b6adf-b3f0-6f56-f914-1f77d7f2c422.png)

自動でコードを書き込んでくれるので、以下ボタンが表示されたら押下し、保存（Ctrl+S）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/6945f528-148d-aac3-6b49-458149b7dfb5.png)

基本的には、次は？と聞いていけばアテンドしてくれます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/d025604b-d7c1-c185-08a0-2e748ab5b29a.png)

手順に沿って、
先ほど開いておいたターミナルで再起動（npm start）するとブラウザが自動的に起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/4d5b19c9-7ac9-9ab0-28af-928a893fee59.png)

１発で完全一致したことがないです。
やり方ご存じの方いらっしゃいましたら是非ともコメント頂けるとありがたいです。

# チューニング

画面中央にあるのは画像だと思うので、差し替え依頼
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/e3c8df14-e59e-b256-ab86-7d350dfdcd8a.png)

手順に従うとこんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/3bba6595-2878-d98c-6751-32141f58fef4.png)

横いっぱいにしてもらう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/8dd22a44-1dec-31c3-4270-5624a5d06669.png)

なりました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/310e76ce-ad6c-03de-6f8d-fdde768e7f17.png)

検索用テキストボックスも配置してみましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/8297b59f-fdb3-f06f-90f0-981ae89b337c.png)

ちょっと位置がずれていますが、画像から属性を判断していい感じのテキストボックスを配置してくれました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/40c9717e-7157-2cc8-0b4b-0ddf6ac98428.png)

こんな感じで一つ一つ指摘すると対応してくれます

# デグレ、エラー対応

たまに前の依頼をすっかり忘れて、画面が初期状態に戻ってしまうことがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/8e2d32f5-43b7-3e4b-f438-15707eca92a5.png)

色々やり方があるのですが、

以下のようにファイルを指定してチャットに追加し、ここを直してと依頼もできますし、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/4b8e2d91-02dc-fa9b-e96c-0197584bca98.png)

チャットの履歴から、当時依頼したチャットをクリックして、
以下ボタンから再度依頼をすることもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/4267ea19-4de7-1004-c205-fa6c05461445.png)

# 感想

まだ「全部お願い！」とすることは出来なそう。
私のプロンプト技術が上達するのが先か、このツールがバージョンアップするのが先か、乞うご期待ｗ

所感としては、0からコードを生み出すのであれば、圧倒的に出力スピードが速いので役に立ちそうですが、
通常業務で0からゴリゴリ処理を書く事ってほぼ無く、
エディタの補完機能や、ネットで検索したロジックを改変する事の方が多いので、
総工数的に早くなるのか、といったら怪しいです。
局所的に修正依頼を出したりしても結局ネットで正しいか調べに行きそうなので、まだ全部をお願いすることを前提とした実用化はできなそうだなと思っています。

次回は、出力されたコードの信憑性？を見てみたいと思います。