無料登録不要サイドバイサイド表示 SVG/PDF出力

🔀 Diff ビューアの使い方

2つのテキストを入力するだけで、追加・削除・変更された行を緑・赤で色分けしてサイドバイサイド表示します。行番号付きで変更箇所を一目で把握でき、差分サマリーで変更規模も確認できます。コードレビューの事前確認・設定ファイルの変更チェック・文書バージョン比較など幅広い用途に対応しています。比較結果は SVG や PDF としてエクスポートでき、記録・共有にも役立ちます。

🚀 今すぐ差分を確認する →

📌 このツールでできること

2つのテキストを左右に並べて差分を一目で確認
追加された行を緑、削除された行を赤でハイライト表示
行番号付きで変更箇所をピンポイントで把握
追加・削除の件数をまとめて表示する差分サマリー
2つのテキストが完全に一致している場合も明示
差分結果を SVG 形式でベクターダウンロード
差分結果を PDF 形式でドキュメントとしてダウンロード・印刷
入力テキストはサーバーに保存されないため機密コードも安心
改行・インデント・空白のみの差分も行単位で検出

🚀 使い方

「変更前」エリアに比較元のテキストを貼り付けます。
ヒント：Git の旧バージョン・デプロイ前のファイル・議事録の前版などを貼り付けます。
「変更後」エリアに比較先のテキストを貼り付けます。
ヒント：Git の新バージョン・デプロイ後のファイル・議事録の最新版などを貼り付けます。
「🔍 比較」ボタンをクリックします。
下部に差分テーブルが表示されます。緑行は追加、赤行は削除です。
ヒント：変更された行は「削除（旧）＋追加（新）」のペアで表示されます。
上部の差分サマリーで追加・削除の件数を確認できます。
「📥 SVG」または「📄 PDF」ボタンで差分結果をダウンロードできます。
ヒント：PDF はランドスケープ（横向き）に最適化されるため、広い差分テーブルも見やすく出力されます。

💡 活用例

設定ファイルの変更確認

デプロイ前後の config.yaml や .env を貼り付けて、意図しない変更がないか素早く確認できます。本番環境と開発環境の設定ファイルを比較し、環境差異を洗い出すのにも有用です。

変更前:
LOG_LEVEL=info
DB_HOST=localhost
DB_PORT=5432

変更後:
LOG_LEVEL=debug
DB_HOST=prod-db.example.com
DB_PORT=5432

→ LOG_LEVEL と DB_HOST の変更が赤・緑で即座に確認できます。

コードレビューの補助

PR のコードをローカルで編集した後、変更前後をそれぞれ貼り付けて変更箇所を視覚的に把握できます。チームメンバーへのレビュー依頼前に自己チェックする際にも役立ちます。差分の PDF をレビューコメントに添付する使い方もあります。

文書・議事録の差分確認

前回版と今回版のドキュメントを比較して、追記・削除された箇所を特定するのに便利です。仕様書や要件定義書のバージョン管理、契約書の修正確認など、テキストベースの文書管理に幅広く使えます。

SQL クエリの変更確認

最適化前後の SQL クエリを比較して、どの部分が変わったか確認するのに活用できます。JOIN 条件や WHERE 句の変更点を素早く把握でき、意図しないクエリ変更による本番障害を防ぐ事前チェックとして有効です。

🔍 技術的な背景 / 仕組み

diff の仕組み：最長共通部分列（LCS）アルゴリズム

diff の核心は 最長共通部分列（LCS: Longest Common Subsequence） アルゴリズムです。2 つのテキストのうち「両方に共通して存在する行のまとまり」の中で最長のものを求め、そこから外れた行が「追加」または「削除」として分類されます。動的計画法で計算されるため、テキストの長さに応じた時間計算量が必要です。

unified diff（統一差分）形式の読み方

Git や UNIX の diff コマンドの標準出力は unified diff 形式と呼ばれます。@@ で囲まれた行範囲情報（ハンク）と、+（追加）・-（削除）・スペース（変更なし）の 3 種類の行マーカーで構成されています。本ツールはこの形式の視覚的な表現をサイドバイサイドで提供します。

git diff との違いと使い分け

git diff はリポジトリの履歴やステージングエリアと現在の作業ツリーを比較する Git コマンドです。本ツールとの主な違いは、Git リポジトリが不要で、任意のテキストをコピー＆ペーストするだけで使える点です。Git 管理外のファイルや、外部から受け取ったテキストを比較する際に特に便利です。一方、ファイル履歴の追跡や大規模なプロジェクト全体の差分管理には Git が適しています。

コードレビューでの活用方法

コードレビューでは差分の量と質の両方を把握することが重要です。本ツールの差分サマリー（追加・削除行数）を見ることで、変更の規模を素早く掴めます。また、SVG や PDF にエクスポートした差分をコメントやドキュメントに貼り付けることで、非エンジニアのステークホルダーへの変更説明にも活用できます。

📥 ダウンロード機能

比較結果は SVG または PDF 形式でダウンロードできます。差分を記録・共有したいときに便利です。

🖼 SVG ダウンロード: 差分データからベクター形式の SVG を直接生成します。ファイルサイズが非常に小さく（数十〜数百 KB）、どれだけ拡大しても文字が鮮明なままです。ブラウザや画像ビューアで開けます。
📄 PDF ダウンロード: 差分テーブルを PDF に出力します。印刷や書類への添付に適しています。横長のテーブルは自動でランドスケープ（横向き）に最適化されます。

ダウンロードボタンは比較結果が表示された後、結果エリアの右上に現れます。

❓ よくある質問

Q. 大きなテキストの diff も処理できますか？: 明示的な文字数制限はありませんが、数万行以上の非常に長いテキストの場合はブラウザのパフォーマンスに影響が出る場合があります。大規模なファイル比較には git diff や diff コマンドなど CLI ツールの使用をお勧めします。
Q. 空白やインデントの違いだけも検出されますか？: はい。行単位の比較のため、スペースやタブのインデント変更・末尾の空白の追加・削除もすべて「差分あり」として検出されます。コードのフォーマット変更（linter の自動整形など）の確認にも使えます。
Q. バイナリファイルは比較できますか？: テキスト入力のみ対応しています。バイナリファイルの比較には diff コマンド（-a オプションでテキストとして扱う）や専用の diff ツールをご利用ください。画像ファイルなどの視覚的な差分確認には ImageMagick の compare コマンドが有用です。
Q. 差分を HTML や CSV でエクスポートできますか？: 現在は SVG と PDF 形式でのダウンロードに対応しています。HTML や CSV 形式でのエクスポートは現時点では未対応です。テキストとして差分を保存したい場合は、diff コマンドの unified 形式出力を活用するか、画面表示の内容をコピーしてご利用ください。
Q. 行番号は表示されますか？: はい。差分テーブルには左側（変更前）・右側（変更後）それぞれの行番号が表示されます。変更箇所の特定と元ファイルへの対応付けが容易になります。
Q. 入力データはサーバーに保存されますか？: 入力されたテキストはサーバーで差分計算のみに使用され、保存・記録は一切行いません。機密性の高いコードや文書でも安心してご利用いただけます。

📚 関連書籍・商品 PR

※ 本リンクはアフィリエイト広告を含みます。

🔀 Diff ビューア の使い方