Claude 3.5 sonnetで提案されるフロントのコードをそのまま動かしたい

Claude 3.5 sonnetがリリースされて久しいですが、みなさん利用されていますか？  
言語性能ではGPT-4oやClaude3 opusには劣る部分もあるとの指摘がありますが、コーディング能力には目を見張るものがあり、私もハッカソンなどでちょこちょことお世話になっています!

> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/ad23724f-51b1-4e0f-d554-efa90129db48.png" width="70%" />
>
> こんな感じのwebアプリケーションがサラッと作れてしまいます

## 出力されるコードをそのまま動かすことがむずかしい

ですが、これはあくまでフロントだけの機能であり、作ったUIを活用してデータベースと繋いで実際のアプリケーションとして運用してみたいと思う方も多いのではないでしょうか。
しかし、よくあるHTML, CSS, JSの形で出力されているわけではないので困ってしまう方もいらっしゃるかと思い、本記事を執筆しました。

### vanillaJSにすると多少レイアウトが崩れる

https://qiita.com/watanabe-tsubasa/items/99f0c95f39e334d43dec

こちらの記事で、sonnetにvanillaJSで出力させることで、CodePenのようなブラウザベースのwebエディターでも動かす方法を紹介しました。
しかしながら、この方法では当初出力したデザインとずれてしまったり、さらに機能を付け加えたいと思った時に結構困難となってきます。

### Claude3.5 sonnetはReactベースでshadcn/uiを利用したコードを生成してくる

このタイトルの意味がわかった方は、そういうことですのでそんな感じで動かしてください。お疲れ様でした。
ですが、多くの方には初見の話かなと思いますので、以下で解説していきます！

## Reactについて

調べれば出てくるので省略します。

- Node.js
- Deno
- Bun

この辺り使って動かしましょう。
個人的にはBunをお勧めしています。

https://bun.sh/

BunとViteで始めるのが簡単かと思います

https://bun.sh/guides/ecosystem/vite

## Shadcn/UIについて

この記事の本題です。
これを紹介したくて記事書いてるまであります。

https://ui.shadcn.com/

リンク先にある通り、ReactのUIコンポーネントです。
ChakraUIのように独自記法があるわけではなく、tailwindベースのUIコンポーネントライブラリ集といった感じです。
様々なサンプルがあるので、それをCLIで必要なものだけ落としながら使っていくので、ビルドのサイズが小さかったり、落としたUIをそのまま使いやすいように改変してみたり、何かと小回りが効く印象です。

2024年7月17現在 best of JSのランキングでも常連な感じで位置しています

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/3ad2113f-292e-bf12-a423-bb9274f1bf79.png" width="70%" />

## 実際のClaudeのコード見てみる

多くの場合次の画像のような感じです

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/58332b6a-da08-6728-d883-0fdb17db7ed1.png" width="70%" />

```tsx
import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Loader2 } from 'lucide-react';
```

このように`import {  } from @/components/ui/button`となっている部分は`Shadcn/UI`が利用されています。

## 使ってみよう！

https://ui.shadcn.com/docs/installation

このページにインストールして利用する方法が書かれています。
つい最近、Viteの`tsconfig.json`の仕様が変わって、`tsconfig.json`と`tsconfig.app.json`両方に設定を書き込まなければいけなかったため、その部分を記事に書こうとしていたのですが、今日見たら公式ドキュメントも修正されていたので書く必要がなくなりました。

まあ、古い情報を管理するのもしんどいので、公式を読みましょう。

https://ui.shadcn.com/docs/installation/vite

Viteのページがこれです。
書いてあることをそのまま実行するだけなので解説することがない😭

### Shadcn/UIを準備できた！

```shell
bunx shadcn-ui@latest add button
```

とCLIでインストールできるようになったら成功です。
利用されているコンポーネントをインストールしていきましょう。
`@/components/ui/<UIname>` のUInameをインストールします。

上の例で言えば

- button
- card
- alert
- select
- input
- tabs
- switch
- label
- dialog

をそれぞれ落としていきます。

```shell
bunx shadcn-ui@latest add button card alert
```

のような感じで複数落とすこともできるのですが、同時にやり過ぎるとエラーが出ました

## Claudeのコードのコピペ先

諸説あるとは思いますが、素人ながら私は次のようにやっています

![スクリーンショット 2024-07-17 17.50.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/ebc18770-ecd2-8b4f-6583-6d3538a614b6.png)

`src/components`フォルダが自動で生成されますので、その配下に適当なtsx形式のファイル（今回はPicker.tsx）を作成してその中に貼り付けています

そして、App.tsxを次のように

```tsx: App.tsx
import PickingRateApp from "./components/Picker"

function App() {


  return (
    <>
      <PickingRateApp />
    </>
  )
}

export default App
```

改変して、Claudeのコードを呼び出して実行しています

## Shadcn/UIを使おう！

別に私はReactをそんなに良いとも思っていないですし、適当なdivタグをRootにして仮想DOM動的にサクッと動かせるところが好きだったのですが、最近はvercelとべったりで、別にそういう方向でやるんだったら違うの使うんだよなあ・・・という感じで微妙な気持ちなのですが、まあClaudeがReactのコード提案してきて簡単なので、しばらくは使うのでしょう