リアルタイム共同編集比較：Yjs vs Automerge vs Liveblocks でリアルタイム共同編集を実装する
オープンソースラボ編集部 ・ 2026年6月14日
リアルタイム共同編集比較：Yjs vs Automerge vs Liveblocks でリアルタイム共同編集を実装する
Google Docs・Notion・Figmaのような**複数ユーザーが同時に同じドキュメント・コードを編集できるリアルタイム共同編集（Collaborative Editing）**を自前で実装するには、CRDTベースの同期ライブラリが必要です。Yjs（最大シェア・WebSocket/WebRTC対応）・Automerge（JSON CRDT・Rust製・GitHub製）・Liveblocks（フロントエンドSDK・SaaSベース・OSSコア）の3つが2026年のリアルタイム共同編集OSS主要選択肢です。
リアルタイム共同編集が必要な理由
- 同時編集の競合解決: 2人が同時に同じ場所を編集した時に自動的にマージする（Last Write Wins等では不十分）
- オフライン対応: ネットワーク切断中に編集→再接続時に自動マージ（CRDTの強み）
- プレゼンス機能: 誰がどこを編集中かをリアルタイムに表示（カーソル・ハイライト）
- undo/redo: 他ユーザーの編集を取り消さずに自分の操作のみをundo/redo
主要ツールの概要
Yjs
2015年公開（Kevin Jahns）、JavaScript製のOSSです。GitHubスター18k+。最もよく使われるCRDTライブラリで、Prosemirror・Quill・CodeMirror・Monaco等の主要エディタとの公式バインディングを持ちます。y-websocket（WebSocketサーバー）・y-webrtc（P2P）・y-indexeddb（ローカル永続化）でマルチプロバイダー同期が可能です。
# docker-compose.yml: y-websocket サーバー（Yjs同期サーバー）
version: "3.8"
services:
y-websocket:
image: node:20-alpine
restart: unless-stopped
ports:
- "1234:1234"
working_dir: /app
volumes:
- ./y-websocket:/app
command: sh -c "npm install y-websocket && HOST=0.0.0.0 PORT=1234 node node_modules/.bin/y-websocket-server"
environment:
PERSISTENCE: leveldb # ドキュメントをLevelDBに永続化
YPERSISTENCE: /app/db
// Yjs + Tiptap: リアルタイム共同編集エディタをReactで実装
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import Collaboration from '@tiptap/extension-collaboration';
import CollaborationCursor from '@tiptap/extension-collaboration-cursor';
import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';
function CollaborativeEditor({ documentId, user }) {
const ydoc = new Y.Doc();
const provider = new WebsocketProvider(
'wss://collab.example.com',
documentId,
ydoc,
{ connect: true }
);
const editor = useEditor({
extensions: [
StarterKit.configure({ history: false }), // YjsのundoManagerを使う
Collaboration.configure({ document: ydoc }),
CollaborationCursor.configure({
provider,
user: {
name: user.name,
color: user.color, // ユーザーごとのカーソル色
},
}),
],
});
return (
<div>
<div className="online-users">
{/* オンラインユーザー表示（Awarenessから取得） */}
{Array.from(provider.awareness.getStates().values()).map((state, i) => (
<span key={i} style={{ color: state.user?.color }}>
{state.user?.name}
</span>
))}
</div>
<EditorContent editor={editor} />
</div>
);
}
# Python: YjsドキュメントをサーバーサイドでPythonから読み書き（y-py使用）
# pip install y-py
import y_py as Y
def create_yjs_document() -> bytes:
'''YjsドキュメントをPythonで作成してシリアライズ（WebSocketで配布用）'''
doc = Y.YDoc()
text = doc.get_text('content')
with doc.begin_transaction() as txn:
text.insert(txn, 0, '# 共同編集ドキュメント
ここに内容を書いてください。')
return Y.encode_state_as_update(doc)
def merge_updates(update1: bytes, update2: bytes) -> bytes:
'''2つのYjs更新をサーバーサイドでマージ（CRDT自動マージ）'''
doc = Y.YDoc()
Y.apply_update(doc, update1)
Y.apply_update(doc, update2)
return Y.encode_state_as_update(doc)
Automerge
2017年公開（Martin Kleppmann/GitHub）、TypeScript/Rust製のOSSです。GitHubスター15k+。JSON互換のCRDTライブラリで、JSONドキュメント全体を自動マージできます。Rust製のコアにWASMバインディングでブラウザ高速動作、Automerge Repoで永続化・同期を管理します。
// Automerge: JSONドキュメントのリアルタイム共同編集
import * as Automerge from '@automerge/automerge';
import { Repo } from '@automerge/automerge-repo';
import { BrowserWebSocketClientAdapter } from '@automerge/automerge-repo-network-websocket';
import { IndexedDBStorageAdapter } from '@automerge/automerge-repo-storage-indexeddb';
// Repoの初期化（ネットワーク+ストレージアダプタ）
const repo = new Repo({
network: [new BrowserWebSocketClientAdapter('wss://sync.example.com')],
storage: new IndexedDBStorageAdapter(), // オフラインキャッシュ
});
// 新しいドキュメントを作成
const handle = repo.create({
title: '',
items: [],
metadata: { created_at: new Date().toISOString() },
});
// ドキュメントを更新（Automergeが自動的に変更を追跡・マージ）
async function addItem(handle, text) {
handle.change((doc) => {
doc.items.push({ id: Date.now().toString(), text, done: false });
});
}
// ドキュメントの変更を監視してUIを更新
handle.on('change', ({ doc }) => {
console.log('ドキュメント更新:', doc);
renderUI(doc);
});
Liveblocks
2021年公開（Liveblocks）、TypeScript製のOSSです（コアはOSS・クラウドSaaSあり）。GitHubスター4k+。Reactコンポーネント・hooks・CRDTストレージを統合したフロントエンドファーストのリアルタイムコラボレーションSDKで、useOthers・useMyPresence・useMutationのhooksで最小コードでプレゼンス・共同編集・Undo/Redoを実装できます。
// Liveblocks: React hooksでリアルタイム共同編集を最小コードで実装
import { createClient, LiveList, LiveObject } from '@liveblocks/client';
import { createRoomContext } from '@liveblocks/react';
const client = createClient({
publicApiKey: 'pk_your-liveblocks-public-key',
// セルフホスト: endpoint: 'https://liveblocks.example.com'
});
const {
RoomProvider,
useOthers,
useMyPresence,
useStorage,
useMutation,
} = createRoomContext(client);
// プレゼンス（カーソル位置の共有）
function CollabCursors() {
const [{ cursor }, updatePresence] = useMyPresence();
const others = useOthers();
return (
<div
onPointerMove={(e) => updatePresence({ cursor: { x: e.clientX, y: e.clientY } })}
style={{ position: 'relative' }}
>
{others.map(({ connectionId, presence }) =>
presence.cursor ? (
<div
key={connectionId}
style={{ position: 'absolute', left: presence.cursor.x, top: presence.cursor.y }}
>
👆
</div>
) : null
)}
</div>
);
}
// 共同編集リスト（Liveblocks Storage）
function CollabTodoList() {
const todos = useStorage((root) => root.todos);
const addTodo = useMutation(({ storage }, text) => {
storage.get('todos').push(new LiveObject({ text, completed: false }));
}, []);
return (
<ul>
{todos?.map((todo, i) => <li key={i}>{todo.text}</li>)}
<button onClick={() => addTodo('新しいタスク')}>追加</button>
</ul>
);
}
機能比較表
| 比較項目 | Yjs | Automerge | Liveblocks |
|---|---|---|---|
| エディタバインディング | ✅ 最多 | 中 | ✅（TipTap等対応） |
| JSON CRDT | ✅ | ✅ | ✅ |
| セルフホスト | ✅ | ✅ | △（SaaS推奨） |
| React hooks | △ | △ | ✅ 最強 |
| GitHub Stars | 18k+ | 15k+ | 4k+ |
リアルタイム共同編集はDevOpsカテゴリ/categories/devopsのプロジェクト管理ツール（Plane/Taiga）と組み合わせてタスク・ドキュメントの同時編集機能を追加します。その他カテゴリ/categories/miscのWiki・ナレッジベース（Wiki.js/Outline）にYjsの共同編集機能を統合して、Notionライクなリアルタイム共同ドキュメント編集を実現します。
FAQ
Q. YjsとProsemirrorを統合してSlackのような共同編集メッセージスレッドを実装するには？
A. y-prosemirrorプラグインでYjsとProsemirrorを統合してWebSocketサーバー（y-websocket）経由で同期します。実装: ①npm install y-prosemirror y-websocket prosemirror-*②const doc = new Y.Doc()→const provider = new WebsocketProvider('wss://collab.example.com', roomId, doc)③ProsemirrorのEditorState.createにplugins: [ySyncPlugin(doc.getXmlFragment('pm')), yCursorPlugin(provider.awareness), yUndoPlugin()]を追加④provider.awareness.setLocalStateField('user', {name: userName, color: '#FF0000'})でプレゼンス設定→他ユーザーのカーソルが自動表示。永続化: y-websocketのPERSISTENCE=leveldb環境変数でサーバー再起動後もドキュメントを保持→PostgreSQLへの永続化はy-postgresql（コミュニティ製）で対応。
Q. Automergeでオフラインファーストのモバイルアプリを実装するには？
A. Automerge RepoとIndexedDBStorageAdapterを組み合わせてオフライン中の変更をローカルに保存→オンライン時にWebSocket経由で自動マージします。実装: ①npm install @automerge/automerge-repo @automerge/automerge-repo-storage-indexeddb @automerge/automerge-repo-network-websocket②const repo = new Repo({network: [adapter], storage: new IndexedDBStorageAdapter()})→ネットワーク切断中もIndexedDBに変更を保存③オンライン復帰: BrowserWebSocketClientAdapterがWebSocketを再接続→保存されたupdateを自動送信→CRDTが自動マージ④ドキュメントのURLを共有: repo.find(docUrl)でドキュメントを取得→同じURLを持つデバイス全員が同期。競合: AutomergeのCRDTは文字単位のマージ→同じ段落を2人が編集しても意図しない削除なしに自動マージ。
Q. YjsとAutomergeのCRDT実装の違いは何ですか？
A. **YjsはSequence CRDT（テキスト・リスト特化・高速）、AutomergeはJSON CRDT（任意のJSONドキュメント・マップ・リスト対応）**という違いがあります。Yjs: ①YText（テキスト）・YArray（リスト）・YMap（マップ）の型付きデータ構造②Sequence CRDT（YATA: Yet Another Transformation Approach）→大規模テキスト編集に最適化③エコシステム: Prosemirror・Quill・CodeMirror・Monaco・TipTap・Lexicalの公式バインディング→即座に既存エディタと統合可能④y-webrtcでサーバーなしのP2P同期も可能。Automerge: ①JSONドキュメント全体をCRDTとして扱う→ネストしたオブジェクト・配列を自動マージ②Rust製WASMコア→ブラウザでの高速動作③GitHubが採用（GitHub Codespaces等の基盤）④Automerge Repo: ドキュメントURLベースの同期→URLを知る全デバイスが自動同期。選択: テキストエディタ・コードエディタ→Yjs、任意のJSONアプリデータ（タスクリスト・ホワイトボード・スプレッドシート）→Automerge。
Q. Liveblocksをセルフホストするための設定方法は？
A. Liveblocksはオープンソースコアを持ちますが、セルフホストサーバーの公式サポートは限定的です。セルフホストが必要な場合はYjsのy-websocketかPartyKitの活用を推奨します。Liveblocks OSS: @liveblocks/client・@liveblocks/reactはMITライセンスでOSS→クライアントSDKは自由に使用可能。Liveblocksクラウド: publicApiKeyをLiveblocks Cloud（liveblocks.io）に接続→サーバー運用が不要。セルフホスト代替: ①Yjs + y-websocket + @liveblocks/reactクライアント→公式バインディングあり②PartyKit（Cloudflare Workers上の分散リアルタイム）: partykit.jsonの設定のみでLiveblocksライクなリアルタイム同期③Hocuspocus（Tiptap製y-websocketサーバー・PostgreSQL永続化・認証付き）: @hocuspocus/serverで高機能なYjsサーバーをセルフホスト。
まとめ
| ユースケース | 推奨ツール |
|---|---|
| テキストエディタ・コードエディタ・大規模テキスト | Yjs |
| JSONドキュメント・タスクリスト・オフラインファースト | Automerge |
| React hooks・最小コード・フロントエンドファースト | Liveblocks |