Diff Checker

2つのテキストを比較して、差分を視覚的に表示します。追加は緑色、削除は赤色で強調表示されます。すべてブラウザで実行され、データはどこにも送信されません。

動作方法: 下の両方のパネルにテキストを貼り付けるか入力します。このツールはテキストを行ごとに比較し、追加（緑色）、削除（赤色）、変更なし（グレー）を強調表示します。オプションを切り替えて、空白文字または大文字小文字の違いを無視できます。データはサーバーに送信されません。

7行追加7行削除6行変更なし
1-function greet(name) {
2- console.log("Hello, " + name);
1+function greet(name, greeting = "Hello") {
2+ console.log(greeting + ", " + name);
3 return true;
4 }
5
6-const users = ["Alice", "Bob", "Charlie"];
6+const users = ["Alice", "Bob", "Charlie", "Diana"];
7
8-for (let i = 0; i < users.length; i++) {
9- greet(users[i]);
8+for (const user of users) {
9+ greet(user);
10 }
11
12-// Old comment
13-console.log("Done!");
12+// Updated comment
13+console.log("All done!");

Diff（差分）とは

Diff（差分の略）は、2つのテキストの比較で何が変わったかを示すものです。Diff ツールは追加、削除、変更された行を識別し、2つのファイルバージョン間で何が正確に変わったかを簡単に確認できます。Diff は Git などのバージョン管理システム、コードレビュープロセス、ドキュメント比較ワークフローの基本です。

Diff アルゴリズムの仕組み

Diff アルゴリズムは、2つのテキスト間の最長共通部分列（LCS）を見つけ、最小限の変更セットを決定します。最も一般的なアルゴリズムは Myers のアルゴリズム（Git で使用）と patience diff アルゴリズムです。元のテキストに存在するが修正後のテキストにない行は削除として標記され、新しい行は追加として標記されます。変わらない行はコンテキストを提供します。

一般的なユースケース

Diff ツールはコミット前にコードバージョンを比較、pull request の変更をレビュー、環境間で設定ファイルを比較、ドキュメントの変更を検索、動作するコードと破損したコードを比較してデバッグ、フォーマット変更が内容を変えないことを確認する際に使用されます。これらはあらゆる協調開発ワークフローに必須です。

Diff のベストプラクティス

  • コミット前に diff をレビューして予期しない変更をキャッチする
  • 再フォーマットされたコードを比較する際は ignore-whitespace を使用
  • 前のコミットだけでなく、ベースブランチと比較
  • diff を小さく焦点を絞る — 小さな変更ほど審査しやすい
  • 複雑な変更の場合はサイドバイサイドビューを使用
  • 完全な理解のため、変更周辺のコンテキスト行に注意を払う