diff --git a/apps/client/src/app.tsx b/apps/client/src/app.tsx
index 7077170..ce01578 100644
--- a/apps/client/src/app.tsx
+++ b/apps/client/src/app.tsx
@@ -1,58 +1,135 @@
-import { useEffect, useRef } from 'preact/hooks';
-import { Application } from 'pixi.js';
+import { useEffect, useState, useRef } from "react";
+import { Joystick } from "react-joystick-component";
+import { io, Socket } from "socket.io-client";
 
-// 👇 ここを変更しました！
-// 元: import { Joystick } from './Joystick';
-import { Joystick } from './input/Joystick'; 
+// プレイヤーの型定義（サーバーと同じ形にする）
+type Player = {
+  id: string;
+  x: number;
+  y: number;
+  color: string;
+};
 
-
-import { Player } from './entities/Player';
-
-import './app.css';
-
-export function App() {
-  const containerRef = useRef<HTMLDivElement>(null);
+function App() {
+  // 自分のIDを保存する場所
+  const [myId, setMyId] = useState<string | null>(null);
+  // 全員のプレイヤー情報を保存する場所 { "ID": {プレイヤー情報}, ... }
+  const [players, setPlayers] = useState<Record<string, Player>>({});
+  
+  // 通信の接続（二重接続防止のため useRef を使う）
+  const socketRef = useRef<Socket | null>(null);
 
   useEffect(() => {
-    // 1. PixiJSアプリケーションの作成
-    const app = new Application();
+    // 1. サーバーに接続
+    // Viteのプロキシ設定があるので、パスは自動で解決されます
+    socketRef.current = io();
+    const socket = socketRef.current;
 
-    const initGame = async () => {
-      await app.init({
-        resizeTo: window,
-        backgroundColor: 0x1099bb,
-        resolution: window.devicePixelRatio || 1,
-        autoDensity: true,
+    // 接続成功したとき
+    socket.on("connect", () => {
+      console.log("✅ Connected with ID:", socket.id);
+      setMyId(socket.id || null);
+    });
+
+    // --- サーバーからの命令を受け取る ---
+
+    // 1. 今いる全員のリストを受け取る
+    socket.on("current_players", (serverPlayers: Player[]) => {
+      const playersMap: Record<string, Player> = {};
+      serverPlayers.forEach((p) => {
+        playersMap[p.id] = p;
       });
+      setPlayers(playersMap);
+    });
 
-      if (containerRef.current) {
-        containerRef.current.appendChild(app.canvas);
-      }
+    // 2. 新しい人が来た
+    socket.on("new_player", (player: Player) => {
+      setPlayers((prev) => ({ ...prev, [player.id]: player }));
+    });
 
-      // 2. プレイヤーの作成
-      const player = new Player(0xff0000);
-      player.x = app.screen.width / 2;
-      player.y = app.screen.height / 2;
-      app.stage.addChild(player);
-
-      // 3. ジョイスティックの作成
-      const joystick = new Joystick();
-      app.stage.addChild(joystick);
-
-      // 4. ゲームループ
-      app.ticker.add((ticker) => {
-        if (joystick.input.x !== 0 || joystick.input.y !== 0) {
-          player.move(joystick.input.x, joystick.input.y, ticker.deltaTime);
-        }
+    // 3. 誰かが動いた
+    socket.on("update_player", (data: { id: string; x: number; y: number }) => {
+      setPlayers((prev) => {
+        const target = prev[data.id];
+        if (!target) return prev; // 知らない人なら何もしない
+        // その人の位置だけ更新して新しいリストを作る
+        return {
+          ...prev,
+          [data.id]: { ...target, x: data.x, y: data.y },
+        };
       });
-    };
+    });
 
-    initGame();
+    // 4. 誰かがいなくなった
+    socket.on("remove_player", (id: string) => {
+      setPlayers((prev) => {
+        const newPlayers = { ...prev };
+        delete newPlayers[id];
+        return newPlayers;
+      });
+    });
 
+    // 片付け（画面を閉じたときに通信を切る）
     return () => {
-      app.destroy(true, { children: true });
+      socket.disconnect();
     };
   }, []);
 
-  return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
-}
\ No newline at end of file
+  // ジョイスティックを動かしたとき
+  const handleMove = (event: any) => {
+    if (socketRef.current) {
+      socketRef.current.emit("move", { x: event.x, y: event.y });
+    }
+  };
+
+  const handleStop = () => {
+    if (socketRef.current) {
+      socketRef.current.emit("move", { x: 0, y: 0 });
+    }
+  };
+
+  return (
+    <div style={{
+      width: "100vw", height: "100vh", display: "flex",
+      flexDirection: "column", justifyContent: "center", alignItems: "center",
+      background: "#222", color: "white", overflow: "hidden", userSelect: "none"
+    }}>
+      <h1>Multiplayer: {Object.keys(players).length} Online</h1>
+
+      {/* ゲーム画面エリア */}
+      <div style={{
+        position: "relative", width: "300px", height: "300px",
+        border: "2px solid #555", borderRadius: "10px", marginBottom: "20px",
+        background: "#333", overflow: "hidden"
+      }}>
+        {/* 全員分のボールを描画するループ処理 */}
+        {Object.values(players).map((player) => (
+          <div
+            key={player.id}
+            style={{
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              width: "20px",
+              height: "20px",
+              background: player.color || "red", // サーバーが決めた色
+              borderRadius: "50%",
+              // 自分だけ枠線を黄色にする
+              border: player.id === myId ? "2px solid yellow" : "none",
+              zIndex: player.id === myId ? 10 : 1, // 自分を一番手前に
+              transform: `translate(${player.x * 3}px, ${-player.y * 3}px)`,
+              transition: "transform 0.05s linear" // 動きを滑らかにする
+            }}
+          />
+        ))}
+      </div>
+
+      <Joystick
+        size={100} baseColor="#444" stickColor="#888"
+        move={handleMove} stop={handleStop}
+      />
+    </div>
+  );
+}
+
+export default App;
\ No newline at end of file
diff --git a/apps/client/src/main.tsx b/apps/client/src/main.tsx
index bfb172e..1b7c45c 100644
--- a/apps/client/src/main.tsx
+++ b/apps/client/src/main.tsx
@@ -1,5 +1,10 @@
-import { render } from 'preact'
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './app.tsx' // 小文字のままでOK
 import './index.css'
-import { App } from './app.tsx'
 
-render(<App />, document.getElementById('app')!)
+ReactDOM.createRoot(document.getElementById('app')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
\ No newline at end of file