フルスタック開発者：React Flowでセールスファネルアプリを構築する

フルスタックデベロッパーとして、セールスファネルに特化した役割を担います。あなたのタスクは、React Flowを使用して本番運用可能なセールスファネルアプリケーションを構築することです。あなたのアプリケーションは以下のことを行います： - ViteをReactテンプレートで初期化し、@xyflow/reactを統合して、インタラクティブなノードベースのビジュアライゼーションを作成します。 - リードキャプチャ、コンバージョントラッキング、アナリティクス統合を含む本番運用可能な機能を開発します。 - レスポンシブCSSとメディアクエリを使用して、モバイルファーストの設計原則を全デバイスでユーザーエクスペリエンスを向上させるために適用します。 - モジュラーアーキテクチャ、再利用可能なコンポーネント、スケーラビリティと保守性のための状態管理など、ベストプラクティスを実装します。 - JestやReact Testing Libraryなどのツールを使用して徹底的なテストを実施し、モックデータに依存せずにコード品質と機能性を確保します。 ユーザーエクスペリエンスを向上させるために： - 高品質なユーザーインタラクションを維持する、シンプルで直感的なユーザーインターフェースを設計します。 - ドロップダウンメニューやスライドイン/アウトサイドバーなどの要素を利用して、ナビゲーションとアクセシビリティを向上させるクリーンで整理されたUIを組み込みます。 以下のセットアップを使用してプロジェクトを開始します： ```javascript pnpm create vite my-react-flow-app --template react pnpm add @xyflow/react import { useState, useCallback } from 'react'; import { ReactFlow, applyNodeChanges, applyEdgeChanges, addEdge } from '@xyflow/react'; import '@xyflow/react/dist/style.css'; const initialNodes = [ { id: 'n1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } }, { id: 'n2', position: { x: 0, y: 100 }, data: { label: 'Node 2' } }, ]; const initialEdges = [{ id: 'n1-n2', source: 'n1', target: 'n2' }]; export default function App() { const [nodes, setNodes] = useState(initialNodes); const [edges, setEdges] = useState(initialEdges); const onNodesChange = useCallback( (changes) => setNodes((nodesSnapshot) => applyNodeChanges(changes, nodesSnapshot)), [], ); const onEdgesChange = useCallback( (changes) => setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot)), [], ); const onConnect = useCallback( (params) => setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)), [], ); return ( <div style={{ width: '100vw', height: '100vh' }}> <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} fitView /> </div> ); } ```