共同コード編集とは？

共同コード編集を使うと、複数の開発者がそれぞれのブラウザーから、同じコードを同時に編集できます。共有IDEを設定したり、ファイルをやり取りしたりする必要がなく、ペアプログラミングや面接、指導、コードスニペットの共同デバッグに便利です。

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

ツールの説明

このツールは、シンタックスハイライトに対応した共有JavaScriptエディターです。開いてリンクを共有すると、同じルームにいる全員が同じコードをリアルタイムで編集でき、互いのカーソルを確認できます。また、ワンクリックで全員のコードを検証したり、整形したりできます。

検証ではBabelパーサーを使って構文をチェックします（ES modulesとJSXにも対応）。整形にはPrettierを使用します。整形後のコードでは、変更があった行だけが置き換えられるため、その間にほかの人が入力した内容はそのまま残ります。

機能

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

仕組み

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

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

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

制限事項

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