【テクニカル・上級編】Penpotのリアルタイム共同編集における競合解決の仕組み：CRDTの概念と複数人同時作業時の安全な運用ルール – UI/UX・デザインツール活用バイブル

Penpotの深淵：CRDTがもたらす「非同期の同期」と、エンジニアが掌握すべき運用解像度

UI/UXデザインツールは、もはや単なる「お絵かきソフト」ではない。それはコードベースの一部であり、デザインシステムという名の「生きたデータ構造」を管理するデータベースだ。

PenpotがFigmaのような先行プロダクトと決定的に異なるのは、オープンソースであるという点だけではない。「ブラウザネイティブなマルチプレイヤー編集」を、CRDT（Conflict-free Replicated Data Types） という数学的な正解を持って実装した点にある。

本稿では、このアーキテクチャの裏側を解剖し、大規模チームが陥りがちな罠を回避するための「極限の運用指針」を提示する。

—

1. CRDT：Penpotを支える「競合なき」神話の正体

多くのデザインツールが採用する「Centralized Conflict Resolution（サーバー主導のロック制御）」は、レイテンシとオフライン耐性に致命的な弱点を持つ。対してPenpotは、CRDTを採用することで、各クライアントが状態を独立して更新し、最終的に「可換性（Commutative）」を担保する。

なぜCRDTが最強なのか？

CRDTには「強結果整合性（Strong Eventual Consistency）」がある。つまり、操作の実行順序がバラバラであっても、すべてのクライアントが最終的に同じ状態に収束する。

LWW-Element-Set（Last-Write-Wins）の罠: 単純なタイムスタンプ比較に頼ると、時計のズレでデータが消失する。Penpotの設計は、これを回避するために各オブジェクトに不変のUUIDとヒストリカルな変更ログを保持している。
運用上の解釈: 「同時に同じ座標を動かしても競合しない」のではなく、「操作の履歴が数学的にマージ可能である」という設計思想を理解せよ。これがPenpotにおける「安全な操作」の根本定義だ。

—

2. 現場で震えるほど役立つ「安全な運用ルール」

CRDTは魔法ではない。アーキテクチャ的に破綻しないだけで、意味論的な競合（セマンティック・コンフリクト）は防げない。

A. 「原子的な編集」の徹底

複数のエンジニア/デザイナーが同じコンポーネントを同時に編集する場合、コンポーネントの「メインインスタンス」を直接触るな。

ルール: 共通ライブラリの編集は、必ず「Dedicated Session（専任編集者）」を割り当てるか、ブランチ戦略（Penpotの今後の拡張を見据えた運用）を模倣した作業フローを構築せよ。

B. IDのライフサイクル管理

外部APIからPenpotのデータを操作する際、UUIDの生成タイミングを誤ると、CRDTの同期ログが断片化する。

ハック: Penpotの内部APIを叩く際、`id`の生成は必ずサーバー（またはPenpotのバックエンド）に委任せよ。クライアントサイドで生成したIDを強引に注入すると、キャッシュの不整合により「ゾンビ・オブジェクト」が発生する可能性がある。

—

3. 自動化と最適化：APIを掌握するCLIスクリプト

Penpotのポテンシャルを最大化するには、GUIを捨てろ。API/CLIによるパイプラインの構築こそが、真のDevOpsだ。

以下のNode.jsスクリプトは、Penpotの特定のプロジェクトからデザイントークンを抽出し、JSONとしてCI/CDパイプラインに流し込むための基礎となる。

Penpot API Connector – Token Exporter
実行環境: Node.js 18+
目的: デザインシステムの同期を自動化し、手動修正によるヒューマンエラーを排除する

const axios = require(‘axios’);

async function syncDesignTokens(projectId, apiKey) {
const instance = axios.create({
baseURL: ‘https://design.your-company.com/api’,
headers: { ‘Authorization’: `Token ${apiKey}` }
});

try {
// 1. プロジェクトのフルスナップショットを取得
// CRDTの不整合を防ぐため、編集が活発でない時間帯に叩くのが定石
const { data } = await instance.get(`/projects/${projectId}/view`);

// 2. 必要なコンポーネント/スタイルのみを抽出
const tokens = data.colors.map(c => ({
name: c.name,
value: c.color // HEX値をトークン化
}));

// 3. GitHub Actions等の環境へ出力
console.log(JSON.stringify(tokens, null, 2));
} catch (err) {
console.error(‘CRDT sync failure: ‘, err.message);
process.exit(1);
}
}

// 実行: 厳格な認証と環境変数管理を推奨
syncDesignTokens(process.env.PENPOT_PROJECT_ID, process.env.PENPOT_API_KEY);

—

4. パフォーマンス最適化の極致：メモリ消費との戦い

Penpotのクライアント（ブラウザ）は、複雑なデザインファイルを開くとメモリを喰い尽くす。これはCRDTが保持する「変更履歴」のオーバーヘッドが原因だ。

Canvasの断片化を避ける: 一つのページに数千のノードを置くな。`Page`を適切に分割し、ブラウザのDOM/Canvasリソースを解放せよ。
WebSocketの監視: デベロッパーツールで`socket`通信を監視せよ。頻繁に`delta`更新が飛んでいる場合、誰かの環境で「無限ループ的なイベント発火」が起きている可能性が高い。
セッションのクリーンアップ: 長時間放置されたタブは、メモリリークの温床になる。CI/CDの自動テストを走らせる際は、必ずクリーンなブラウザ環境（Playwright/Puppeteer）でセッションを確立し、完了後に破棄すること。

—

結びに代えて：ツールは「従順な奴隷」であるべきだ

Penpotを単なるデザインツールとして使うのは、フェラーリで近所のコンビニに行くようなものだ。

CRDTの特性を理解し、APIを叩き、デザインシステムとコードベースを完全自動で同期させる。この環境こそが、UI/UXエンジニアが到達すべき「真の生産性」である。ツールに使われるな。ツールをアーキテクチャの歯車として組み込み、支配せよ。

次回の考察では、Penpotのソースコードを直接フォークし、独自のカスタムプロパティを注入する「低レイヤの魔改造」について触れる予定だ。準備はいいか。