ClaudeのArtifactで使ったReactをローカルで動かすには？

はじめに

ClaudeのArtifactで生成したReactコードをローカルで動かす方法を説明します。

DevContainerで開発をするためこのDockerfileを使ってコンテナを作成してください。

FROM node:20-bullseye

# 開発用ツールのインストール
RUN apt-get update && apt-get install -y \
    git \
    curl \
    && rm -rf /var/lib/apt/lists/*

# 作業ディレクトリの設定
WORKDIR /app

# Node.jsの開発ツールをグローバルにインストール
RUN npm install -g \
    create-react-app \
    typescript \
    eslint \
    prettier \
    nodemon

# 開発用パッケージをインストール
RUN npm install --save-dev \
    eslint \
    prettier \
    typescript \
    @types/react \
    @types/react-dom

# プロジェクト作成用の作業ディレクトリを作成
RUN mkdir -p /app

# 作業ディレクトリに移動
WORKDIR /app

# コンテナ起動時のデフォルトコマンド
CMD ["/bin/bash"]

基本的な実装手順

1. Viteプロジェクトの作成：

npm create vite@latest your-project-name -- --template react
cd your-project-name
npm install

1. 必要なパッケージのインストール：

npm install lucide-react@0.263.1 @tailwindcss/typography tailwindcss postcss autoprefixer

1. src/App.jsxの内容をすべて削除し、Artifactで生成されたコードをそのまま貼り付け

2. 開発サーバーの起動：

npm run dev

複数ページの実装方法

複数のページを作成する場合は、パス（例：/dashboard、/analytics）を分けて実装します。これにより、CloudFrontなどのCDNサービスを使用して各ページを独立して配信できます。

注意点

• ページごとに独立したHTMLファイルとして実装することを推奨

メリット

• シンプルな実装
• CDNによる効率的な配信が可能
• 各ページが完全に独立して動作
• 個別のカスタマイズが容易