More than 1 year has passed since last update.

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

Last updated at 2022-02-20Posted at 2022-02-20

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

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

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

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

制作物

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

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

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

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

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

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

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

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

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

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

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