webflow-code-component:local-dev-setup

ローカル開発環境のセットアップ

新しい Webflow Code Components プロジェクトをゼロからセットアップします。

このスキルを使うタイミング

次の場合に使用します：

• 新しいコードコンポーネントプロジェクトを始めるとき
• ユーザーから新しいプロジェクトのセットアップ、初期化、作成を依頼されたとき
• 既存の React プロジェクトにコードコンポーネントを追加するとき
• 初めて開発環境をセットアップするとき

次の場合は使用しないでください：

• プロジェクトがすでに存在し、設定済みの場合（質問に直接回答してください）
• 個々のコンポーネントを作成するとき（代わりに component-scaffold を使用してください）
• コンポーネントをデプロイするとき（代わりに deploy-guide を使用してください）

手順

フェーズ 1：現在の状態を確認する

1. プロジェクトが存在するか確認します：

   • 既存の package.json はありますか？
   • 既存の webflow.json はありますか？
   • 現在のプロジェクト構成はどうなっていますか？

2. セットアップの種類を判断します：

   • ゼロから新しいプロジェクトを作成する
   • 既存の React プロジェクトに追加する
   • 既存の Next.js/Vite プロジェクトに追加する

フェーズ 2：プロジェクトを初期化する

3. （新規の場合）プロジェクト構成を作成します：

   • npm プロジェクトを初期化する
   • TypeScript をセットアップする
   • フォルダー構成を作成する

4. 依存関係をインストールします：

   • コア：React、TypeScript
   • Webflow：CLI、data-types、react utils
   • オプション：スタイリングライブラリ

フェーズ 3：設定する

5. webflow.json を作成します：

   • ライブラリ名を設定する
   • コンポーネントの glob パターンを設定する
   • 必要に応じて globals を設定する

6. TypeScript を設定します：

   • tsconfig.json をセットアップする
   • JSX サポートを有効にする

フェーズ 4：スターターファイルを作成する

7. サンプルコンポーネントを作成します：

   • シンプルな Button コンポーネント
   • 定義ファイル
   • 基本的なスタイル

8. （オプション）globals ファイルを作成します：

   • 共有スタイル用
   • デコレーター用

フェーズ 5：セットアップを検証する

9. バンドルがコンパイルされることを確認します：

   • npx webflow library bundle --public-path http://localhost:4000/ を実行して、ローカルでビルドエラーを確認します
   • これにより、コンポーネント、インポート、設定が正しいことを確認できます
   • Webflow Designer で完全にテストするには、npx webflow library share を実行してデプロイする必要があります

10. 次の手順を案内します：

    • コンポーネントを追加で作成する方法
    • デプロイ方法
    • 開発ワークフロー

例

手順を追った詳しい例については、references/EXAMPLES.md を参照してください。

利用できる例：

1. ゼロから新しいプロジェクトを作成する - React、TypeScript、CSS Modules を使った完全なセットアップ
2. 既存の React プロジェクトに追加する - 既存のコードベースにコードコンポーネントを統合する
3. Tailwind CSS を使う - Tailwind CSS のサポートを含むセットアップ

クイックスタート（新規プロジェクト）：

# 1. Create project
mkdir my-webflow-components && cd my-webflow-components
npm init -y

# 2. Install dependencies
npm install react react-dom
npm install -D typescript @types/react @types/react-dom
npm install -D @webflow/webflow-cli @webflow/data-types @webflow/react

# 3. Create webflow.json
echo '{"library":{"name":"My Library","components":["./src/**/*.webflow.tsx"]}}' > webflow.json

# 4. Create component directory
mkdir -p src/components/Button

次に、コンポーネントファイル（.tsx、.webflow.tsx、.module.css）を作成します。コンポーネント、定義、CSS ファイルを含む完全な内容については、references/EXAMPLES.md の例 1 を参照してください。

次のコマンドでデプロイします：

npx webflow library share

検証

セットアップ後、プロジェクトが正しく設定されていることを確認します：

チェック項目	確認方法
プロジェクトルートに webflow.json がある	cat webflow.json
依存関係がインストールされている	npm list @webflow/webflow-cli
エラーなしでバンドルがコンパイルされる	npx webflow library bundle --public-path http://localhost:4000/
少なくとも 1 つのコンポーネントが見つかる	バンドル出力に「Found N component(s)」と表示されることを確認する

ガイドライン

最低要件

コードコンポーネントプロジェクトには、次のものが必要です：

1. 依存関係を含む package.json
2. ライブラリ設定を含む webflow.json
3. tsconfig.json（TypeScript を使用する場合）
4. 少なくとも 1 つの .webflow.tsx ファイル

推奨される構成

project/
├── src/
│   ├── components/
│   │   └── [ComponentName]/
│   │       ├── [ComponentName].tsx
│   │       ├── [ComponentName].webflow.tsx
│   │       └── [ComponentName].module.css
│   ├── hooks/           # Custom hooks
│   ├── utils/           # Utilities
│   ├── declarations.d.ts # CSS module types
│   ├── globals.ts       # Decorators/global imports
│   └── globals.css      # Global styles
├── package.json
├── tsconfig.json
├── webflow.json
└── .gitignore

開発ワークフロー

1. コンポーネントを作成する：component-scaffold スキルを使用します
2. ローカルで開発する：React プロジェクトを実行して反復します（例：npm run dev）
3. 検証する：pre-deploy-check スキルを使用します
4. デプロイする：deploy-guide スキルを使用するか、npx webflow library share を実行します
5. Webflow でテストする：Designer でページにコンポーネントを追加します