オンラインでペアプロできるエディタを作った話

おはようございます、Tlapesiumです。

今回の記事では自身が制作した

• オンラインで共同編集可能
• 環境構築無しで即座に実行可能
• チャット機能付き

なテキストエディタについて紹介したいと思います。

もしよろしければ、この記事を LGTM 、GitHubリポジトリ の Star よろしくお願いします！

制作物

以下のリンクからアクセス可能です！
CodingChat

制作の背景

Web版のVSCodeを使えばオンラインで共同編集可能です。が、誰かがサーバーを立てたり、サーバーを立てる人が環境構築する必要があり、少々手間がかかります。

そこで、手軽に使えるオンラインで共同編集可能なコードエディタとして CodingChat を制作しました。

機能

• オンラインで共同編集可能

言わずもがなです。一つのコードを複数人で同時に編集することができます。¹
他のユーザーのカーソルが表示されるので、誰がどこを編集しているかが一目瞭然です。

• 環境構築無しで実行可能

オンラインでコードが実行可能です。もちろん、与える入力を変更したり、出力を見ることもできます。
現在は C++ と Python のみに対応していますが、今後、対応する言語を増やしていきたいと考えています。

• チャット機能付き

文字によるチャットが可能です。ボイスチャットができないときや、見知らぬ相手とペアプロするときに便利かもしれません。

• 部屋の非公開機能

公開設定の部屋はトップ画面に表示されますが、非公開設定にするとトップ画面に表示されなくなります。
チャットルームのURLを共有することで非公開設定の部屋を仲間内で共有可能です。

技術的なお話

CodingChatのバックエンドは FastAPI 、フロントエンドは React を使用しています。
共同編集やチャットについては WebSocket を利用し、リアルタイム通信を可能としています。

終わりに

いかがでしたでしょうか。
初めて個人で制作したWebアプリですが、たくさんの人に使ってもらえたら幸いです。
個人的にはチーム参加可能な競技プログラミングのコンテストや、プログラミングを教える際に便利かなと思っています。

また、このエディタは GitHubリポジトリ にてすべてのコードを公開しています。
改善点があれば Issue を立ててもらったり、プルリクエストを送ってもらえると大変ありがたいです。

もしよろしければ、この記事を LGTM 、GitHubリポジトリ の Star よろしくお願いします！

1. サーバーの状況によっては壊れることがありますが、リロードで直ります。 ↩