なぜすべてがブラウザ内で動くのか
このサイトを始めたのは、2018年当時に私たちが信頼して使っていたほぼすべてのJSONフォーマッターが、ペイロードをサーバーに送信していたからです。社内APIのレスポンスを整形しようとしただけでした。貼り付けた瞬間、ページが1秒ほど固まり、顧客レコードの半分のコピーを今や誰か他人が持っているという事実に突然気づきました。実害はありませんでしたが、頭にこびりつく類の瞬間でした。
私は一度、ヘッダーまでご丁寧にログに残す『無料』のJWTデコーダーにJWTを貼り付けて、本番環境のAWSアクセスキーを漏らしたことがあります。そのトークンは同じ時間のうちにLambda呼び出しに紐づけられていました。15分以内にキーをローテーションし、デプロイパイプラインを作り直しました。その経験こそがこのサイトが存在する理由のすべてであり、ここにあるすべてのツールが静的なSvelteKitページとして動き、処理を私たちのインフラではなくあなたのブラウザで行う理由です。
私たちのネットワークログは退屈です。ページへのGETが1回、フォントとスクリプトバンドルへのリクエストが数回、それで終わりです。あなたの入力をこっそり受け取れるPOSTエンドポイントは存在しません。確認したければDevToolsを開き、200KBのテキストをエンコードしながらNetworkタブを見てください。外向きのリクエストはきっかり0件のはずです。
実際に計測したパフォーマンス
Chrome 130を動かす2024年のM2 MacBook Proで、私たちのJSONフォーマッターは50MBのペイロードをエンドツーエンドで約1.18秒で処理し、レンダリングされたツリーはさらに240ミリ秒後に表示されます。テストにはGitHubイベントアーカイブを使っています。私たちがベンチマークで比較したフォーマッターのうち3つを打ち負かした類のネストされた配列が含まれているからです。
同じマシンで100MBのバイナリデータのBase64エンコードには380ミリ秒かかります。同じペイロードのデコードは410ミリ秒 — 入力長のサニティチェックを行うため少し遅くなります。Chrome 130を動かすPixel 8では、同じ数値が1.4秒と1.6秒になります。私たちはベストケースではなくワーストケースを記載します。ベストケースは嘘をつくからです。
ハッシュ計算はWebCrypto APIを直接使います。100MBに対するSHA-256はM2で220ミリ秒、Pixelで480ミリ秒です。MD5（互換性のために含めているレガシー）は純粋なJSで自作しており、SHA-256の約4倍遅い — その差はブラウザネイティブ実装がないことの代償です。セキュリティ目的で本当にMD5が必要なら、使うべきではありません。このツールを作ったのは、古いシステムのチェックサムがいまだにMD5を要求してくるからです。
このサイトはどう作られているか
全体はViteの上のSvelteKitです。2024年にReactではなくSvelteを選んだのは、ツールサイトのバンドルサイズは小さくなければならないからです — JSONフォーマッターは80KBではなく14KBのフレームワークコードとともにロードされます。トレードオフはSvelteのエコシステムが小さいことで、シンタックスハイライトのライブラリを選ぶときに本当にそれを実感し、結局diffツール用には自分たちで書くことになりました。
デプロイ先はCloudflare Pagesです。ビルドはたいてい30秒以内に終わり、ツールページのコールドスタート時間を支配するのはネットワークではなくSvelteKitのハイドレーションステップです。ハイブリッドのSSR + CSRモードを使っています。ページは検索クローラーやAI要約ツールが本物のコンテンツを見られるようマークアップが事前レンダリングされた状態で配信され、あなたが到着するとJavaScriptが実際のツールをハイドレートします。
リポジトリ全体は3,000行未満のTypeScriptです。読んだ人なら誰でも、既存のツールをコピーして約90分で新しいツールを追加できるはずです — これは意図的な設計上の制約でした。仕事でユースケースにぶつかるたびに新しいツールを出せるようにしたかったからです。ここにあるツールの約半分は、Slackメッセージの『これのプライベート版があればいいのに』から始まりました。
私たちが何でないか
私たちはSaaSではありません。アカウントも、利用枠も、APIトークンもありません。これらのツールをスクリプトから使いたいなら、ツールがラップしているnpmパッケージはたいてい検索一回の距離にあります — 各ツールのドキュメントページからリンクしています。
PIIの保存も扱いません。すべてがローカルで動くとはいえ、デフォルトではlocalStorageにも何も保存しません。いくつかのツール（カウンター、カラーピッカー）は最後の値を記憶するようオプトインしていますが、ページ上にその旨が書かれており、自分で消去できます。
世の中に存在するすべてのツールを追いかけてはいません。ツールを追加するのは、知り合いの開発者に頼まれたときか、同じ週に2回必要になったときです。この文章を書いている時点で23個のツールがあります。今後も増えますが、ゆっくりです。
見た目より時間のかかった小さな選択
ダークテーマはシステム設定ではなくダークがデフォルトです。1か月間システム設定連動を試したところ、Windowsがライトモード既定なのに画面が白飛びする安価なノートPCのユーザーの直帰率が上がるのを目にしました。分かりやすいトグル付きのダーク既定のほうが結果的に良好でした — 『良好』とは、人々がツールを使うだけの時間ページに留まったという意味です。
入力フィールドには等幅フォント、それ以外にはプロポーショナルフォントを選びました。当たり前に聞こえますが、以前のバージョンはどこでも単一のフォントを使っており、長いURLやJWT文字列が壊れて見えるという報告が絶えませんでした。修正は15分のCSS変更でした。正しい診断にたどり着くまでには、ヒートマップの録画を何週間も見つめる必要がありました。
すべてのツールに、代表的な入力をロードする『サンプル』ボタンがあります。ユーザーがツールを開き、空の入力ボックスを10秒眺めて、去っていくセッションリプレイを見た後に追加しました。サンプルはわざと完全にきれいにはしていません。実際には壊れた入力をデバッグしたいことが半分だからです。