はじめに
InputManJSとは、テキスト、マスク、日付時刻、数値、コンボ、リッチテキストエディタ、コメントコンポーネントなど、Webアプリケーションにおけるあらゆる入力シーンを支援するJavaScriptライブラリです。
今回は、その中の「コメントコンポーネント（GcComment）」を用いて、リアルタイムに更新されるチャットUIを構築します。
また、リアルタイム通信にはSocket.IOを利用します。Socket.IOは、WebSocketをベースにした双方向通信ライブラリで、ブラウザとサーバー間でのリアルタイムなデータ交換を容易に実現できます。
この2つを中心に紹介しつつ、Node.jsとSQLiteを用いたサーバーサイドの実装も解説します。
技術スタック
今回のリアルタイムチャットアプリケーションは、Pure JavaScript（Vanilla JS）をベースに、主に以下の技術を組み合わせて構築しています。
| 技術 | 役割 |
|---|---|
| InputManJS | コメントUIのフロントエンドコンポーネント。ユーザー入力とスレッド表示を提供 |
| Socket.IO | クライアントとサーバーのリアルタイム通信を実現。イベント駆動で即時更新を行う |
| SQLite（better-sqlite3） | 軽量かつ高速なローカルDB。チャット履歴・ユーザー・リアクションを永続化 |
また、Node.jsのExpressフレームワークを用いて、APIエンドポイントを提供するつくりにしています。
サンプルコード
本記事で紹介するコードは、記事冒頭の「サンプルファイル」にて公開しています。
素のJavaScriptで動作するため、特別なビルドツールやフレームワークは不要です。リポジトリをクローンし、Node.js環境でサーバーを起動するだけで、すぐに動作を確認できます。
具体的には、npm installで依存パッケージをインストールし、npm startでサーバーを起動します。
Node.jsのバージョンは24.11.0を使っています。もしうまく動作しない場合はバージョンを確認してみてください。
完成イメージ
最初に完成イメージを紹介します。InputManJSのコメントコンポーネントを使うと、チャットUIがブラウザ上に表示されます。
ユーザーがコメントを入力すると、即座に他のクライアントにも反映されます。リアクション（絵文字）も同様にリアルタイムで同期されます。
あるユーザーが次のようにコメントを投稿したとします。
すると、別のユーザーの画面には次のように表示されます。
これはSocket.IOを使ってリアルタイムに更新されているため、ページの再読み込みは不要です。
また、データが揮発しないように、SQLiteに保存しています。サーバーを再起動してもチャット履歴が保持されます。一連の動作について、動画も用意しました。以下をご覧ください。
セットアップについて
今回のコード例では、InputManJSのCDN版を利用しています。メシウス株式会社の公式サイトから提供されているCDNリンクを使用することで、モジュールをローカル環境にインストールする手間を省くことができます。CSSとJavaScriptを簡単に読み込むことができるため、迅速に開発を始めることが可能です。
もしCDN版ではなく、ローカルにインストールして利用したい場合は、メシウス株式会社が公開している技術記事をご参照ください。
また、InputManJSはライセンス製品です。今回のようにCDNを利用することで、コードの動作確認自体はすぐに行えますが、継続的な利用や本番環境での運用を行う場合には、適切なライセンスが必要となります。トライアル版のダウンロードや詳細については、メシウス株式会社の公式サイトをご確認ください。
アプリの通信フロー
最初に、アプリ全体がどのようにデータをやり取りしているか、大まかな流れを示します。
ユーザー入力 ↓ InputManJS（GcComment） ↓ ExpressのAPI（/comments, users, reactions） ↓ SQLiteに保存 ↓ Socket.IOで他クライアントへ通知 ↓ 画面がリアルタイム更新
ユーザーがコメントを投稿・編集・削除すると、GcCommentがExpressのAPIにHTTPリクエストを送信します。サーバー側でSQLiteにデータを保存した後、Socket.IOを使って他のクライアントに通知します。各クライアントは通知を受け取り、画面を即座に更新します。
より詳細に図式化すると、次のようになります。
このようなデータの流れにより、コメント投稿・編集・削除、リアクション（絵文字）などの操作が、他のクライアントに即座に反映されます。
送信はHTTPリクエスト、受信はSocket.IOイベントという形で双方向の通信を実現しています。この方式はリアルタイム性を持つチャットアプリケーションでよく使われるパターンで、今回のGcCommentを使った実装では特に親和性が高いです。
それでは次の章から、各コンポーネントの実装と仕組みを具体的に解説していきます。
