【ITニュース解説】I built 59 free browser-based dev tools in vanilla JS — here's what I learned

「Antigravity Tools」というプロジェクトは、全部で59種類もの無料開発者ツールを構築したというものである。これらのツールはすべてブラウザ上で動作し、システムエンジニアを目指す初心者から経験者まで、幅広い開発者の役に立つように作られている。特に注目すべきは、Reactのようなモダンなフレームワークや複雑なビルドプロセスを一切使わず、純粋なJavaScript、通称「Vanilla JS」のみで開発されている点だ。

このプロジェクトの設計思想は「ゼロ依存」という非常にシンプルなものだ。つまり、外部のライブラリやフレームワークに頼らず、サーバーも使わず、ユーザーの行動を追跡する仕組み（テレメトリー）も導入していない。なぜこのような制約を設けたのかというと、開発のシンプルさを追求し、同時にユーザーのプライバシーを最大限に保護するためである。一般的なウェブ開発では、開発効率を上げるためにNode.jsのバックエンド、npmで管理されるたくさんのパッケージ、そしてwebpackやViteといったビルドツールが使われることが多い。しかし、Antigravity Toolsではこれらを一切使わず、より直接的で軽量なアプローチを選んでいる。Google Analyticsのようなアクセス解析ツールやクッキーも使用しないため、ユーザーは安心してツールを利用できる。

この「ゼロ依存」の哲学が最も顕著に表れているのは、データの処理方法にある。例えば、オンラインで提供されている多くのJWT（JSON Web Token）デコードツールや正規表現テスターは、ユーザーが入力した情報を一度サーバーに送信してから処理を行う。この過程で、もしそのサービス提供者が悪意を持っていれば、入力された秘密性の高いデータ（例えばJWTトークンやテスト文字列）がログとして記録されたり、外部に漏洩したりするリスクがゼロではない。Antigravity Toolsは、このような潜在的なリスクを排除するために、すべての操作をユーザーのブラウザ内部だけで完結させる設計になっている。つまり、入力されたデータが外部のサーバーに送信されることは一切ない。これにより、開発者は個人情報や機密性の高いデータを扱う際にも、プライバシーが守られるという大きな安心感を得られる。

このような高度な機能をサーバーなしでブラウザ内部だけで実現できるのは、現代のウェブブラウザに標準で備わっている強力なネイティブAPIを活用しているからだ。具体的には、暗号化処理を行う「Web Crypto API」、グラフィック描画に使う「Canvas API」、音声処理を行う「Web Audio API」、そしてブラウザ内にデータを保存する「IndexedDB」といった技術が用いられている。これらは特別なプラグインやサーバーを必要とせず、ウェブブラウザさえあれば誰でも利用できる機能である。

Antigravity Toolsは、多岐にわたる開発者のニーズに応えるべく、8つのカテゴリにわたるツールを提供している。その一部を紹介しよう。

一つ目のカテゴリは「セキュリティ＆認証ツール」である。ここでは、ウェブアプリケーションのセキュリティに関連する便利なツールが揃っている。「JWT Inspector」は、JWTトークンのヘッダーやペイロードをデコードし、有効期限をブラウザ内で確認できる。これにより、トークンの内容を安全に検査できる。「RSA & ECC Key Generator」は、Web Crypto APIを使って2048ビットのRSA鍵ペアやECC鍵ペアを生成するツールで、暗号化通信に必要な鍵を安全に生成できる。「Hash & Password Generator」では、SHA-256やSHA-512といったハッシュ関数を用いてハッシュ値や強力なパスワードを生成できる。「PII Masker」は、テキストからメールアドレス、クレジットカード番号、社会保障番号、IPアドレスといった個人を特定できる情報（PII）を自動的に匿名化するのに役立つ。さらに、「Universal Encoder/Decoder」は、Base64、URL、Hex、HTMLエンティティ、Unicodeといった様々な形式のエンコード・デコードを柔軟に行える。

二つ目のカテゴリは「AI＆プロンプトツール」だ。これは近年急速に普及しているAI（人工知能）を活用した開発に特化したツール群である。「AI Token Counter」は、GPT-4o、Claude 3.5、Gemini 2.0、DeepSeek R1といった主要なAIモデルに対して、入力するプロンプトがどれくらいのトークン数になるかを推定し、API利用コストの目安を把握するのに役立つ。「System Prompt Builder」は、AIエージェントへの指示をXMLタグやツール定義を用いて構造化するための支援ツールだ。これにより、より効果的なプロンプトを作成できる。「AI Text Humanizer」は、AIが生成したテキストが人間らしくないと感じた際に、より自然な表現に書き換える手助けをする。「Prompt Cost Trimmer」は、プロンプトの内容を30～50%圧縮することで、AIのAPI利用料金を削減するための最適化ツールである。

三つ目のカテゴリは「開発＆コードツール」で、日常的なプログラミング作業を効率化するツールが多数含まれている。「JSON Workbench」は、JSONデータを整形（美しく表示）したり、文法を検証したり、さらにはJSONデータをTypeScript、Python、Goといったプログラミング言語の型定義に変換したりできる多機能ツールだ。「cURL Converter」は、コマンドラインツールであるcURLのコマンドを、JavaScriptのfetch、Pythonのrequests、Go、PHPといった様々な言語のリクエストコードに変換してくれる。これにより、APIテストでcURLを使った後、プログラムに組み込む際の変換作業が大幅に楽になる。「Regex Tester」は、正規表現をリアルタイムでテストし、一致する部分をハイライト表示し、キャプチャグループ（正規表現で括弧で囲んだ部分）の内容も確認できる。「Cron Builder」は、複雑なcron式を視覚的に編集し、その意味を平易な英語で表示してくれるため、スケジューリング作業を支援する。「Git Command Helper」は、バージョン管理システムGitでよく使う「undo（元に戻す）」、「squash（コミットの統合）」、「cherry-pick（特定のコミットを適用）」といったコマンドを視覚的に構築できるため、Gitの操作に不慣れな初心者でも安心して使える。

これらのツールは、すべて開発者の日々の作業をよりスムーズにし、安全性を高めることを目的として作られている。外部サーバーに依存せず、ブラウザのネイティブ機能のみで動作するため、高速であり、何よりもユーザーのデータを保護するという点で、現代の開発者にとって非常に価値のあるリソースとなるだろう。