共同コード編集とは？

共同コード編集を使うと、複数の開発者がそれぞれのブラウザーから、同じコードを同時に編集できます。共有の統合開発環境を用意したり、ファイルをやり取りしたりすることなく、ペアプログラミング、面接、指導、コードの一部を一緒にデバッグするときに便利です。

全員の画面に同じ内容を表示するため、変更はファイル全体ではなく小さな編集内容として送信され、サーバーが適用順を決定します。同時に行われた編集は互いに調整されるため、どちらの変更も反映されます。

ツールの説明

このツールは、構文強調表示に対応した共有TypeScriptエディターです。エディターを開いてリンクを共有すると、参加者全員が同じコードをリアルタイムで編集でき、互いのカーソルを確認できます。また、ワンクリックで全員のコードを検証したり、フォーマットしたりできます。

検証ではBabelパーサーとそのTypeScriptプラグインを使って構文をチェックするため、型注釈、インターフェース、ジェネリクス、列挙型も認識されます。フォーマットではPrettierのTypeScriptパーサーを使い、フォーマット後のコードのうち変更された行だけを置き換えます。そのため、処理中にほかの参加者が入力した内容はそのまま保持されます。

機能

  • リアルタイム編集 - 全員の変更がすぐに反映され、同時に入力された内容もマージされます
  • カーソルと選択範囲 - 各参加者の位置を、名前の横に表示される色で確認できます
  • 検証 - TypeScriptの構文をチェックし、最初のエラーの行と列を表示します
  • フォーマット - Prettierを使って、ルーム内の全員のコードを整形します
  • コピーとダウンロード - コードを.tsファイルとして保存できます

仕組み

ページを開くと、同期サーバー上にルームが作成され、そのリンクがアドレスバーに表示されます。リンクを開いた全員が同じルームに参加し、同じドキュメントを確認できます。

変更内容は、テキスト全体ではなく、どの位置にどの文字が挿入または削除されたかを示す小さな情報としてサーバーに送信されます。サーバーは全員の変更を一つの順序に並べ、古いバージョンをもとに行われた変更を先に届いた変更の後に適用してから、その結果をほかの全員に送信します。自分の入力はすぐに表示され、ほかの参加者の変更はその内容と調整されて反映されるため、二人が同時に編集しても入力内容が失われることはありません。

ドキュメントは、ルームが開いている間だけサーバーのメモリーに保存されます。ページを再読み込みすると、テキストがそのまま残った状態でルームに戻れます。全員が退出すると、ルームとそのテキストは削除されます。

制限事項

  • 1つのルームに参加できるのは最大20人で、文字数は最大100,000文字です。
  • ルームが閉じると、内容は保存されません。最後の参加者が退出する前にテキストをダウンロードしてください。
  • ドキュメント全体を何度も連続して貼り付けるなど、非常に速い変更や大きな変更は拒否され、エディターにルームのテキストが再読み込みされます。
  • ルームのリンクを別の共同編集エディターで開くと（たとえば、JavaScriptエディターでSQLのルームを開くと）、「ルームが見つかりません」と表示されます。各ルームで使用できる言語は1つだけです。
  • 検証でチェックされるのは構文のみで、型はチェックされません。そのため、型エラーでコンパイルできないコードでも検証を通過します。JSX（.tsx）には対応していません。