開発のきっかけ：ある夜の「ヒヤリハット」
エンジニアとして働いていると、コードの微細な変更や設定ファイルの差分を確認する作業は日常茶飯事です。
ある日の深夜、デバッグ作業に追われていた私は、手元にある2つの大きなログファイルを比較しようとしていました。いつものようにブラウザで「Diff ツール オンライン」と検索し、最初に出てきたサイトを開いて、テキストを貼り付けようとしたその瞬間。
マウスを止める、冷たい汗が背中を伝いました。
「待てよ、今から貼り付けようとしているこのログ、顧客のメールアドレスや認証トークンが含まれていないか……？」
多くのオンラインツールは、入力されたデータを一度サーバーサイドに送り、そこで差分アルゴリズムを回して結果を返しています。悪意はないにせよ、そのデータがサーバーのログに残ったり、キャッシュされたりする可能性はゼロではありません。
「便利だけど、怖い」。このエンジニア特有の心理的な障壁を、技術の力で取り除きたい。
そう思ったのが、DevToolKits のDiffツールを開発した最大の動機です。
技術的な工夫：ブラウザに「知能」を詰め込む
「データは一歩も外に出さない」を実現するためには、通常はサーバーで行う差分計算のすべてを、ユーザーのブラウザ上で完結させる必要があります。
1. 安定性と「エンジニアの目」の両立
差分アルゴリズムは意外と奥が深く、自前で実装してもエッジケースでバグが出がちです。そこで、実績のある jsdiff ライブラリを採用しました。
ただし、ライブラリをそのまま使うだけでは不十分です。エンジニアが「見やすい」と感じるDiffにするためには、改行の扱いや空白の意味を細かく制御する必要がありました。
import { diffLines } from 'diff';
// 改行を単なる文字としてではなく、行の区切りとして確実に処理
// 直感的な「行ベース」の比較を実現するための設定
const changes = diffLines(oldText, newText, { newlineIsToken: false });この微調整を繰り返すことで、GitHubのPull Requestのような、私たちが最も信頼している比較体験をブラウザ上で再現することができたのです。
2. 「引き算」のデザイン
開発中、最初は多くの装飾的な機能を盛り込もうとしました。しかし、最終的には「入力して、比較するだけ」という、思考を妨げないシンプルさに立ち返りました。
色使い一つとっても、長時間のデバッグ作業で目が疲れないよう、あえて少し彩度を落としたエメラルド（追加）とローズ（削除）を採用しています。派手さよりも、数時間使い続けても苦にならない「道具」としての質感を大切にしました。
こだわり抜いた「サーバーへの不信」
本ツールの開発で一番こだわったのは、**「1バイトも外に漏らさない」**という点です。
ネットワークを介さず、メモリ上だけで完結する安心感。
「データは常に自分の手元にある」。この確信があるからこそ、プロの開発者は安心して仕事に集中できる。それこそが、ツールが提供できる最高のUXだと信じています。
最後に
Diffツールは非常にシンプルなものですが、その裏側には「エンジニアの不安を解消したい」という私自身の強い思いが詰まっています。
機密性の高いファイルの比較や、商用環境へのデプロイ直前の最終チェック。
あなたの「安全な道具箱」のひとつとして、このツールが役立てばこれほど嬉しいことはありません。