data属性をcamelCaseに変換
HTMLのdata属性とJavaScriptのdataset名を、どちらの向きにも変換します。たとえばdata-user-profile-idはuserProfileIdになり、逆向きなら元の名前に戻ります。ブラウザと同じ規則に従い、ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- テキスト
- data-user-profile-id
- 方向
- Attribute to property
- 生産量
- userProfileId
- 入力
- data-user-profile-id
- data属性
- data-user-profile-id
- datasetプロパティ
- userProfileId
HTMLのカスタムデータ属性ではdata-user-profile-idのような名前を使いますが、JavaScriptでは同じ値をdatasetのcamelCaseプロパティであるuserProfileIdとして扱います。この変換ツールはブラウザーの命名規則を双方向に適用するため、ハイフンの位置を推測せずにマークアップとDOMコードを行き来できます。方向と名前を指定すると、両方の表記が返されます。正方向では必須のdata-接頭辞がない入力を明確に拒否し、不完全な名前がアプリケーションに入る前に検出します。
HTMLのdata属性をdatasetプロパティへ変換します
マークアップ、テンプレート、または開発者ツールからコピーした属性が出発点の場合は、属性からプロパティへの方向を選択してください。入力はdata-で始まる必要があり、たとえばdata-user-profile-idはuserProfileIdになります。この処理は一般的な大文字・小文字変換ではなく、DOMの命名アルゴリズムに従います。
まず属性内のASCII大文字を小文字に正規化します。次にdata-を取り除き、ASCII小文字の直前にあるハイフンを削除して、その小文字を大文字にします。アンダースコア、ピリオド、連続するハイフン、数字、非ASCII文字などは保持されます。
そのためdata-build-2-idはbuild-2Idになります。2の前のハイフンは残り、iの前だけが削除されます。接頭辞がなければ、もっともらしい誤変換ではなく入力エラーを返します。
datasetプロパティをHTML属性へ戻します
element.dataset.userProfileIdのようなJavaScript名から、HTML、CSSセレクター、テスト、サーバー側テンプレート用の属性名を作る場合は、プロパティから属性への方向を選択してください。変換ではdata-を追加し、ASCII大文字の前にハイフンを挿入して、その文字を小文字にします。数字や句読記号の位置は変わりません。
DOMの逆変換には重要な前提があります。プロパティ名にASCII小文字が続くハイフンを含めることはできません。user-profileを正方向へ戻すとハイフンが消えてuserProfileとなり、元の名前に戻らないためです。
本ツールはこの場合を安全に可逆であるとは扱わず、無効な入力として通知します。数字、大文字、非ASCII文字が続くハイフンは利用できます。結果には比較とコピーに便利な両方の表記が含まれます。
一般的なケース変換ではなく正確なDOM規則を使います
一般的なcamelCase整形ツールは、空白、アンダースコア、連続する記号、ハイフンを同じ単語区切りとして扱うことがあります。しかしJavaScriptのdataset対応は異なり、HTML属性とDOMStringMapキーを結ぶ厳密な文字変換です。
正確な規則を使えば、セレクター、イベント処理、分析用フック、テスト、ハイドレーションコードで起きる細かな不一致を防げます。たとえばdata-release--channelはrelease-Channelになります。最初のハイフンには別のハイフンが続くため残り、2番目には小文字cが続くため削除されます。
この機能は決定的に動作し、ネットワークを使わず、データも保存しません。対話的な確認だけでなく、コード生成やビルド工程の検証にも利用できます。
活用例
マークアップからDOMアクセスを記述します
コピーしたdata-*属性を、JavaScriptのelement.datasetの後に置く正確なキーへ変換します。
サーバー側で属性を生成します
アプリケーションスキーマのdatasetプロパティをHTMLテンプレート用の属性名へ変換します。
テストとセレクターを検証します
HTML属性、datasetのアサーション、CSSセレクターをブラウザー規則に合わせます。
よくある質問
一般的なkebab-caseからcamelCaseへの変換と同じですか？
いいえ。 DOMのdataset文字規則に従い、一般的な変換が削除する可能性のある記号を保持します。
逆変換でハイフン付きプロパティが拒否されるのはなぜですか？
ASCII小文字が続くハイフンはDOMの前提に反し、同じプロパティ名へ往復できないためです。
数字とアンダースコアには対応していますか？
はい。 これらは保持され、ASCII大文字と条件に合うハイフン・小文字の組だけが変わります。
data-で始まらない名前が拒否されるのはなぜですか？
datasetに対応するプロパティを持つのは、data-で始まる属性だけだからです。それ以外を拒否することで、クラス名や通常の属性、途中で切れた断片がコードに入り込む前に気づけます。
ハイフンが2つ続くとどうなりますか？
取り除かれるのは、小文字の直前にあるハイフンだけです。data-release--channelでは、最初のハイフンは次もハイフンなので残り、cの前のハイフンだけが消えてrelease-Channelになります。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/web/data-attribute-camel-convert \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"text":"data-user-profile-id","direction":"attribute_to_property"}'const res = await fetch("https://api.kit.forhosting.com/web/data-attribute-camel-convert", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"text": "data-user-profile-id",
"direction": "attribute_to_property"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/data-attribute-camel-convert",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"text": "data-user-profile-id",
"direction": "attribute_to_property"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/data-attribute-camel-convert", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"text":"data-user-profile-id","direction":"attribute_to_property"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"text":"data-user-profile-id","direction":"attribute_to_property"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/data-attribute-camel-convert", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"text": "data-user-profile-id",
"direction": "attribute_to_property"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.data_attribute_camel_convert",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
timeout_sec | 30 |
max_crawl_pages | 25 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
HTMLのdata属性をdatasetプロパティへ変換します
応答にはoutputに加えてdata_attributeとdataset_propertyも含まれ、どちらの表記かを明確に確認できます。
datasetプロパティをHTML属性へ戻します
したがってuserProfileIdはdata-user-profile-idに、apiV2Endpointはdata-api-v2-endpointになります。
一般的なケース変換ではなく正確なDOM規則を使います
ブラウザーとAPIで同じ結果になります。自動処理ではtextとdirectionを送り、invalid_inputを接頭辞の誤りまたは可逆でない逆変換の通知として扱ってください。APIは1回$0.002です。
技術的な質問
属性がdata-で始まらない場合はどうなりますか？
data-*属性だけがdatasetプロパティに対応するため、正方向の変換はinvalid_inputを返します。
APIの料金はいくらですか？
1回のリクエストは$0.002です。単発の変換はブラウザーでも実行できます。