JavaScript → XML コンバーター
JavaScript のオブジェクト、クラス、インスタンスを貼り付ければ、きれいな XML が返ってきます。
このツールの役割
SOAP サービス、RSS フィード、サイトマップ、テストフィクスチャ——JavaScript オブジェクトに合わせた XML ペイロードを手書きで組んだことがあれば、あの辛さはご存知でしょう。XMLSerializer は DOM が必要で、DOMParser は逆方向、要素を手で組めば最初の 3 回は子要素を忘れます。JS をここに貼り付ければ、一発で well-formed な XML が返ってきます。素のオブジェクト、ES6 クラス+new インスタンス、深くネストしたものでも動きます。
JS の値が XML にどうマップされるかをちゃんと理解しています。数値と真偽値は文字列形式になります。Date オブジェクトは ISO-8601 で出力。BigInt は 10 進文字列(末尾の n なし)として出力します。null や undefined のフィールドは捨てられずに空要素になるので、出力の形が崩れません。配列はコンテナ要素になり、各アイテムが子要素になります。名前は親キーの単数形——Order の items 配列は <items><item>...</item></items> になります。配列が型付きのクラスインスタンスを含む場合は、代わりにクラス名が使われます。
クラス定義にも対応します。class Order { constructor(...) { this.x = ...; } } と const order = new Order(...) を書けば、コンストラクターで代入されたすべてのプロパティを持つ <Order> ルートが得られます。ネストしたクラスインスタンスはネストした要素として展開されます。メソッド、getter、シンボルキーのプロパティ、# で始まるプロパティ(プライベートフィールド)はスキップされます。素のオブジェクトリテラルを貼り付けた場合は、適切なルート要素名で直接シリアライズされます。
使い方
3 ステップ。短いリテラルでもモジュール全体でも、やり方は同じです。
JavaScript を貼り付け(サンプルを試すのもあり)
JS を左のエディターにそのまま入れます。素のオブジェクトリテラル、ES6 クラス+インスタンス、ファクトリ関数の戻り値、Node.js のモジュールエクスポート——どれでも OK です。Load Sample を押すと現実的な Order / OrderItem / Address の例が見られます。
const、let、import 文はそのまま残して構いません——パーサーは包んでいる構文を無視して実際の値だけを読みます。
Convert を押す
緑の Convert ボタンをクリック。ツールが JS を読み取り、クラス、配列、ネストしたオブジェクトをすべて保ったまま、一発で XML を出力します。処理中は短いローディング表示が出ます。
XML をコピー
右のパネルにインデント付きで整形された well-formed な XML が入ります。標準準拠の XML パーサーならどれでも受け付けます。そのまま SOAP リクエスト、RSS テンプレート、テストフィクスチャにコピーしてください。
実際に役立つ場面
SOAP リクエストボディを組み立てる
SOAP リクエストを映した素の JS オブジェクトがあり、SoapUI、Postman、<code>fetch</code> 呼び出しに放り込む XML ボディが欲しい。オブジェクトを貼り付けて XML をコピーして、終わり。
RSS / Atom フィードを生成
title、link、items を持つフィードオブジェクトを、適切な RSS エンベロープで包める well-formed な <a href="https://www.w3.org/TR/xml/" target="_blank" rel="noopener">XML</a> スケルトンに変換——要素を手書きしなくて済みます。
sitemap.xml の骨組みを作る
URL オブジェクトの配列を貼り付ければ、<code><urlset></code> サイトマップに必要な足場が返ってきます。適切な namespace に差し替えれば完成です。
統合テストのシードデータ
Jest や Vitest のセットアップで使っているフィクスチャオブジェクトを、レガシーシステム、モックサーバー、いまだに XML を話すコンシューマー向けの XML シードデータに変換します。
よくある質問
素のオブジェクト、ES6 クラス、配列すべてに対応していますか?
はい、全部です。素のオブジェクトリテラルはキーがそのまま要素名として直列化されます。ES6 クラス+new インスタンスはクラス名がルート要素になります。配列はコンテナ要素になり、アイテムごとに子要素が 1 つ——要素がクラスインスタンスならそのクラス名、そうでなければキーの単数形——という名前になります。
Date、BigInt、null はどう扱われますか?
Date オブジェクトは ISO-8601 文字列として出力。BigInt は 10 進文字列(末尾の n は落とす)で出力します。null や undefined のプロパティは黙って消えるのではなく空要素(<field/>)になるので、その要素があることを期待する下流の XSD でもバリデーションが通ります。
メソッド、getter、プライベートフィールドは?
クラスのメソッドや getter はスキップされます——実際にインスタンスに代入されたデータプロパティだけがシリアライズされます。# で宣言されたプライベートフィールド、シンボルキーのプロパティ、プロトタイプ側(インスタンスではない)のプロパティもスキップ。これは JSON.stringify と同じ挙動です。
クラスなしで素のオブジェクトリテラルだけ貼り付けてもいい?
はい。素の const data = { ... } で問題なく動きます——外側の変数名がルート要素に、束縛がなければ汎用の <root> が使われます。中のネストしたオブジェクトや配列は同じようにネストした要素として展開されます。
&、<、> のような特殊文字はエスケープされますか?
はい。&、<、>、"、' を含むテキストコンテンツは、対応する XML エンティティにエスケープされるので、出力は常にきれいに再パースできます。Unicode 文字はそのまま残り、出力は UTF-8 です。
コードは保存されますか?
コードは変換のためにバックエンドへ送られ、保存はしません——ペイロードのログも取りません。オンラインツール全般と同じく、本当に機微なコードなら貼る前に一度目を通してください。
合わせて使えるツール
JavaScript → XML はパズルの一ピースです。相性のいいツールはこちら: