Diff Checker

diff チェッカー

2 つのテキストやコードを行・単語単位のハイライトで比較できます。サイドバイサイドまたは統合表示、空白無視、大文字小文字無視に対応し、すべてブラウザ内で動作します。

いいえ。このツール全体がこのページ内で動作する JavaScript です。diff アルゴリズム (最長共通部分列) はあなたの CPU で実行され、結果は直接 DOM にレンダリングされます。DevTools の Network タブを開いて確認してください — diff 処理中にリクエストは発生しません。社内コード、顧客データ、契約書のドラフトなど、サーバー型ツールに記録されたくない情報も安心して貼り付けられます。

まず両方の入力を行に分割し、LCS (最長共通部分列) アルゴリズムを実行します。両側で一致する行は等しいとマークされます。一致しない行は、追加と削除が隣接する場合に「変更」行としてペアリングされます。ペアリングされた変更ごとに、その行の単語 (空白で分割) に対してもう一度 LCS を実行し、実際に編集された単語だけが赤/緑で光るようにします。

iKit diff チェッカーが選ばれる理由

広告、ポップアップ、サードパーティトラッカーを排した、クリーンで高速なテキスト diff の作業場です。開発者、ライター、そして変更点を素早く把握したいすべての方のために作られました。

サイドバイサイド表示と統合表示

分割表示 (2 列、IDE のような体験) と統合表示 (+/− マーカー付きの 1 列) をワンクリックで切り替えられます。どちらも行番号を表示し、変更点をインラインでハイライトします。

単語単位のハイライト

2 つの行が変更された場合、単語単位の diff を再度実行し、実際に異なる箇所だけを強調表示します。行全体ではなく差分のみが光るため、200 文字の長い行に潜む 1 文字のタイポも見逃しません。

空白無視・大文字小文字無視

空白と大文字小文字の有無を切り替えて、見た目だけの変更 (再フォーマットされたインデントや大文字化の調整) を除外し、本質的な編集に集中できます。

プライバシー設計

両方のテキストはブラウザのタブ内に留まります。diff アルゴリズムは JavaScript としてローカルで実行されます。DevTools の Network タブで確認可能 — 入力中にリクエストは一切発生しません。

統計とコピー

追加・削除・変更された行数を一目で確認できます。ワンクリックで diff をクリップボードにコピーし、コードレビューやコミットメッセージにそのまま貼り付けられます。

オフライン動作

ページを読み込んだ後は、すべての処理がローカルで行われます。飛行機の中、社内ファイアウォールの内側、ネットワークがない環境でも動作するため、機密性の高いコードレビューにも便利です。

diff チェッカーは実際にどう動作するのか

その背後にある数学は web よりも古く、1965 年の LCS アルゴリズムと、1986 年の Eugene Myers による改良に基づいています。

  1. 1

    行に分割する

    両方の入力を \n (または \r\n) で分割します。各行が 1 つのトークンになります。文字ではなくトークンを比較するのは、実世界のコードや文書の編集の多くが行単位で追加・削除・変更を行うためです。

  2. 2

    LCS を計算する

    最長共通部分列 (LCS) は、両方の入力に同じ順序で現れる最大の行集合です。DP テーブルを右下から埋めていき、各セルにはその位置から終端までの LCS の長さを保持します。これは O(m × n) の時間とメモリを要します。

  3. 3

    戻り走査で操作を導出する

    テーブルの左上から前進していきます: 現在の 2 行が一致すれば equal を出力し、一致しなければ LCS の長さを保つ方向 (右または下) を選んで delete または insert を出力します。結果として、オリジナルを変更後に変換する操作の列が得られます。

  4. 4

    変更ペア内での単語単位 diff

    削除の直後に挿入が続く場合、それらをペアリングして change 行として扱います。行内で異なる箇所だけをハイライトするため、空白境界で分割した両側の単語に対して同じ LCS アルゴリズムを再度実行します。

よくある diff の使い方

diff チェッカーが活躍する実際のシーンです。

PR にコメントする前のレビュー

GitHub の diff 表示は優秀ですが、フォーマッタのノイズを除いて本質的な変更だけを見たい場合があります。両方のバージョンを貼り付けて空白無視を有効にすれば、見た目の再フォーマットは消え、ロジックの編集だけが残ります。

2 つの契約書ドラフトを比較する

弁護士や運用チームは、契約書の v1 と v2 で何が変わったかを把握する必要があります。両方を貼り付ければ、単語単位のハイライト付きでカラフルな diff が得られます — Word も変更履歴も不要、機密条項をサードパーティのサーバーに送る必要もありません。

スクリプト編集の結果を確認する

設定ファイルに sed/awk/Python の regex を流しましたか? オリジナルと結果をここに貼り付けて、スクリプトが意図した箇所だけを編集したかを確認できます。文字単位のハイライトが、目視では見落としがちな余計な編集を捉えます。

翻訳テキストのタイポを発見する

翻訳のペア (原文と訳文、または同じ原文の 2 つの翻訳) — 単語単位の diff により、抜け落ちた単語、重複したフレーズ、校正者が見逃した句読点の入れ替わりも簡単に見つけられます。

ローカル diff が重要な理由

比較するテキストは通常プライベートです: 社内リポジトリのコード、契約書のドラフト、顧客データのエクスポート、未公開の製品コピーなど。これらを他人のサーバーに貼り付けると、自分でコントロールできない記録が残ります。iKit の diff チェッカーは、すでにブラウザのタブに読み込まれている JavaScript です — 比較はあなたの CPU で実行され、ネットワークソケットには一切触れません。

  • diff 処理中のネットワークリクエストはゼロ — DevTools の Network タブで確認できます。
  • 入力はブラウザメモリに留まり、クリアまたはページ更新で消去されます。
  • 社内コード、NDA で保護された文書、カスタマーサポートの記録、データ所在地ポリシーの対象となるあらゆる情報に安心して使えます。

Related guides

Deep-dive tutorials and tool comparisons from the iKit blog.

よくある質問

安全ですか? テキストはアップロードされますか?

いいえ。このツール全体がこのページ内で動作する JavaScript です。diff アルゴリズム (最長共通部分列) はあなたの CPU で実行され、結果は直接 DOM にレンダリングされます。DevTools の Network タブを開いて確認してください — diff 処理中にリクエストは発生しません。社内コード、顧客データ、契約書のドラフトなど、サーバー型ツールに記録されたくない情報も安心して貼り付けられます。

行・単語単位のハイライトはどのように機能しますか?

まず両方の入力を行に分割し、LCS (最長共通部分列) アルゴリズムを実行します。両側で一致する行は等しいとマークされます。一致しない行は、追加と削除が隣接する場合に「変更」行としてペアリングされます。ペアリングされた変更ごとに、その行の単語 (空白で分割) に対してもう一度 LCS を実行し、実際に編集された単語だけが赤/緑で光るようにします。

分割表示と統合表示の違いは何ですか?

分割表示は 2 つのテキストを行番号付きで横並びに表示します — IDE (VS Code、JetBrains) での diff の見え方に近いです。統合表示は +/− プレフィックス付きの 1 列で表示します — `git diff` の出力に近いです。ワークフローに合うものを選んでください。どちらも同じデータをレンダリングします。

「空白を無視」はなぜ役立つのですか?

コードの再フォーマット (Prettier の実行、タブ/スペースの切り替え、改行コードの正規化) は、本質的な変更を埋もれさせる視覚的ノイズを生みます。「空白を無視」を有効にすると、連続するスペース/タブを 1 つのスペースに圧縮し、行末の空白を除去してから diff を取るため、見た目だけの変更ではなく意味のある編集だけを確認できます。

ブラウザで diff できる最大の入力サイズはどれくらいですか?

LCS アルゴリズムは O(m × n) のメモリを使用します (m と n は両側の行数)。iKit は比較を約 400 万セル (≈16 MB) に制限しており、数千行 vs 数千行の比較を余裕を持って処理できます。それより大きな diff (データベースダンプ全体やフルファイルログ) には、`diff` や `git diff --no-index` のような CLI ツールを使用してください — これらはより賢いアルゴリズム (Myers diff) を採用し、数百万行までスケールします。