Diff Checker（差分チェッカー）

Diff Checkerの使い方

1. 比較したい2つのテキストをそれぞれ入力欄に貼り付けます。
2. 必要に応じて空白文字の無視モードやコンテキスト行数（0～10行）を設定します。
3. 「差分を比較」ボタンを押すと、統一差分形式で追加・削除箇所がハイライト表示されます。
4. 差分の追加・削除数も画面に表示され、変更規模を把握できます。

Diff Checkerの仕組み

本ツールはJavaScriptのjsdiffライブラリを利用し、Myers diffアルゴリズムを実装しています。このアルゴリズムはGitで使われているもので、2つの文字列間の最小編集距離（挿入、削除、置換の最小回数）を効率的に求めます。計算結果は標準的な統一差分形式（unified diff）として出力され、ユーザーは行単位でどこが追加されたか、削除されたかを正確に理解できます。コンテキスト行数は0から10まで調整可能で、必要な前後のコード行を含めて差分を把握できます。ブラウザ内で全処理が完結するため、入力テキストは外部サーバーに送信されずプライバシーが保護されます。

差分の具体例

テキスト1:
function hello() {
  console.log('Hello World');
}

テキスト2:
function hello() {
  console.log('Hello, World!');
}

出力差分:
@@ -1,3 +1,3 @@
 function hello() {
-  console.log('Hello World');
+  console.log('Hello, World!');
 }

こんな時に使う

• 開発者がコードの修正点をレビューする時
• デザイナーがスタイルシートの変更を比較する時
• SEO担当者がHTMLの微細な変更を検証する時
• 学生がプログラミング課題の差分を確認する時
• 文章校正で誤字脱字の前後関係を把握する時

また、JSON形式のデータを比較する際はJson Formatterで整形してから差分を取ると見やすくなります。コードの変更に関連してはCss MinifierでCSSを最適化した後の差分確認も有効です。