Web開発をしていると、「JSONを整形して」「型を起こして」「メタタグを設定して」みたいな定番作業が無限に出てきます。個々のツールは世の中に山ほどあるのに、いざ手を動かすと 「どの順番で、何を使えばいいか」 で地味に迷う——というのがずっと気になっていました。
そこで、単発ツールを並べるだけでなく、作業単位の「手順ガイド」 を付けた無料ツール集を作っています。
この記事では「手順ガイドって何？」を、実際の作業例で紹介します。
例：APIのJSONから型安全なコードを作る
「APIレスポンスのJSONから型を起こす」はよくある作業ですが、手書きするとタイプミス・optional の付け忘れ・配列とオブジェクトの取り違えが起きがちです。これを手順にすると、こうなります。
1. まずJSONを整形して構造を掴む
APIから返るJSONは1行に圧縮されていたり、インデントがバラバラだったりします。まず整形して「どこがオブジェクトで、どこが配列で、null になりうるのはどれか」を目で確認します。整形と同時に末尾カンマ・クォート漏れなどの構文エラーも弾けるので、後段でつまずく前に不正なJSONに気づけます。
2. TypeScript の型（interface）を生成する
構造が掴めたら、JSONから型定義を自動生成します。ネストしたオブジェクトは別 interface に分割され、null になりうる値は optional（?）として推論されます。手書きで数十フィールドを書くより速く、正確です。
3. Go の struct も生成する
Go で扱うなら struct と json:"..." タグが必要です。JSONから生成すれば、id→ID・url→URL などの頭字語も Go の慣習どおり大文字化され、gofmt を通せばそのまま使えます。
4. Zod でランタイム検証を足す
TypeScript の型は「コンパイル時」しかチェックできません。外部APIが想定外のデータを返しても検知できないので、Zod スキーマを生成して実行時に parse で検証すると、型と実データの乖離を実行時に捕まえられます。
この一連の流れが 1本のガイドになっていて、各ステップにそこで使うツールが紐づいているので、記事を上から読みながらツールをそのまま使って進められます。
ほかにもこんな手順ガイドがあります
- XMLをJSONに変換して扱う手順（SOAP/RSS/設定ファイル）
- OGP・メタタグを正しく設定する手順
- APIを叩いて動作確認する手順（リクエスト→コード化→ステータス→CORS）
- タイムゾーンをまたぐ日時を正しく扱う手順
- SVGを最適化してWebに載せる手順
- アクセシブルな配色を決める手順
方針
- 入力したファイル・テキストはサーバーに送りません（大半のツールはブラウザ内で完結）
- 例外は「OG Tag Preview」「画像URLからの色抽出」など外部URLを取得するツールだけ。その場合も送るのはURLだけで、取得したデータは保存しません（SSRF対策・レート制限・サイズ上限あり）
- 無料・登録不要：開いてすぐ使えます
- ツール単体でも使えるし、手順ガイドから辿ってもOK
おわりに
作業を「ツール単位」ではなく「手順単位」で並べ直すと、迷いがかなり減りました。よかったら触ってみて、「こういう作業の手順が欲しい」があれば教えてもらえると嬉しいです。