ReactとSocket.ioでチャットアプリを自作！リアルタイム通信の基本と実装方法を徹底解説

「Reactでチャットアプリを作ってみたい」
「リアルタイム通信って難しそう」と思っていませんか？

実はReactとSocket.ioなどの通信ツールを使えば、誰でも簡単にリアルタイムでやりとりできるチャットアプリが作れます。

本記事では、メッセージ送受信・表示・送信者名の管理・サーバーとの接続までをわかりやすく解説。
コード付き・小学生にも理解できる表現で、完成形まで一気に構築可能な内容です。

Reactでチャットアプリを作る意味
1. なぜ今チャット機能が求められるのか？
Reactとリアルタイム通信の基本
1. WebSocketとSocket.ioとは？
チャットアプリの画面構成を作る
1. メッセージ入力欄と表示欄を設計
Socket.ioでリアルタイム通信を実装
1. サーバーとつないでメッセージを送る
サーバー側の構築（Node.js）
1. ExpressとSocket.ioでシンプルな構成
チャットアプリの改善ポイント
1. 実務でも使えるアプリにするには？
完成形コードまとめ
1. フロントエンド（React）
2. バックエンド（Node.js）
まとめ

Reactでチャットアプリを作る意味

なぜ今チャット機能が求められるのか？

結論：リアルタイムでつながる仕組みはあらゆるWebサービスで求められています。

たとえば以下のようなサービスに、チャットは活用されています。

オンライン相談・カスタマーサポート
教育サービスや家庭教師のやり取り
社内連絡ツール（Slackなど）
SNS・マッチングサービス・ゲーム内チャット

これらに共通するのは、ユーザー同士がリアルタイムでメッセージをやり取りできる環境です。

経済産業省もDX推進において、即時性の高い通信手段の導入を推奨しています
（参考：https://www.meti.go.jp/policy/it_policy/digital_transformation/index.html）。

Reactとリアルタイム通信を組み合わせれば、高速かつ柔軟なチャット機能を自分で実装できます。

Reactとリアルタイム通信の基本

WebSocketとSocket.ioとは？

結論：サーバーとリアルタイムにデータをやり取りできる仕組みです。

通常の通信は「リクエスト→レスポンス」という一方通行です。

しかしチャットでは、常に双方向でやり取りが行われる必要があります。

そのために使うのがWebSocketです。Reactでは、これを使いやすくしたSocket.ioというライブラリがよく使われます。

npm install socket.io-client

また、サーバー側にはNode.jsとSocket.ioが必要です。

npm install express socket.io

チャットアプリの画面構成を作る

メッセージ入力欄と表示欄を設計

結論：シンプルに「名前・テキスト・送信ボタン」の構成で十分です。

以下の構成でUIを整えます。

メッセージ表示欄（相手と自分のメッセージが並ぶ）
テキスト入力欄（フォーム）
送信ボタン
ユーザー名の設定欄

function ChatUI({ messages, sendMessage }) {
  const [text, setText] = useState('');
  const handleSubmit = (e) => {
    e.preventDefault();
    sendMessage(text);
    setText('');
  };
  return (
    <div>
      <div style={{ border: '1px solid gray', height: '300px', overflowY: 'scroll' }}>
        {messages.map((msg, i) => (
          <div key={i}><strong>{msg.user}:</strong> {msg.text}</div>
        ))}
      </div>
      <form onSubmit={handleSubmit}>
        <input value={text} onChange={(e) => setText(e.target.value)} />
        <button type="submit">送信</button>
      </form>
    </div>
  );
}

Socket.ioでリアルタイム通信を実装

サーバーとつないでメッセージを送る

結論：Socket.ioのemitとonを使うだけで、メッセージの送受信が実現します。

import io from 'socket.io-client';
const socket = io('http://localhost:4000'); // サーバーのURL
function ChatApp() {
  const [messages, setMessages] = useState([]);
  const [user, setUser] = useState('ゲスト');
  useEffect(() => {
    socket.on('chat-message', (msg) => {
      setMessages((prev) => [...prev, msg]);
    });
    return () => socket.off('chat-message');
  }, []);
  const sendMessage = (text) => {
    const msg = { user, text };
    socket.emit('chat-message', msg);
    setMessages((prev) => [...prev, msg]);
  };
  return (
    <div>
      <h2>リアルタイムチャット</h2>
      <input value={user} onChange={(e) => setUser(e.target.value)} placeholder="名前を入力" />
      <ChatUI messages={messages} sendMessage={sendMessage} />
    </div>
  );
}

サーバー側の構築（Node.js）

ExpressとSocket.ioでシンプルな構成

結論：10行ほどでリアルタイム通信サーバーは作れます。

const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server, {
  cors: {
    origin: '*'
  }
});
io.on('connection', (socket) => {
  console.log('ユーザーが接続しました');
  socket.on('chat-message', (msg) => {
    io.emit('chat-message', msg); // すべてのクライアントに送信
  });
});
server.listen(4000, () => {
  console.log('サーバー起動：ポート4000');
});