【React×Socket.io】リアルタイムチャットアプリを自作!初心者向け完全ガイド

プログラミング

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

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

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


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というライブラリがよく使われます。

1
npm install socket.io-client

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

1
npm install express socket.io

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

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

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

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

  • メッセージ表示欄(相手と自分のメッセージが並ぶ)
  • テキスト入力欄(フォーム)
  • 送信ボタン
  • ユーザー名の設定欄
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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のemitonを使うだけで、メッセージの送受信が実現します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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行ほどでリアルタイム通信サーバーは作れます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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');
});

チャットアプリの改善ポイント

実務でも使えるアプリにするには?

以下のような機能を追加することで、さらに実用的になります。

  • 送信時刻の表示
  • メッセージの並び順ソート
  • 管理者のみが見られる通知欄の追加
  • 過去の履歴を保存するためのデータベース接続

完成形コードまとめ

フロントエンド(React)

App.js に以下のように記述します。

(ChatApp と ChatUI を1ファイルに統合)

バックエンド(Node.js)

先ほど紹介した server.js の内容をそのまま使えます。


まとめ

本記事では、ReactとSocket.ioを活用してリアルタイムチャットアプリを一から構築する方法を解説しました。

重要なポイントは以下です:

  • WebSocketを使えば双方向通信が可能
  • Reactの状態管理とuseEffectで動的な画面制御
  • Socket.ioで簡単にリアルタイム通信を実装

誰でも簡単にリアルタイムアプリを作れるこの方法を、ぜひご自身でも試してみてください。


関連リンク:

タイトルとURLをコピーしました