文章を kebab-case に変換 dash-case 無料 オンライン 安全

テキストを kebab-case に変換する理由

手入れの行き届いたほとんどどんなウェブサイトのアドレスバーを見ても、ハイフンでつながれた単語が見つかります。how-to-repot-a-fern、annual-report-2026、contact-us。スタイルシートの中を見ても、クラス名は同じことをしています。main-menu、card-title、button-primary。コマンドラインツールのフラグを見れば、--dry-run や --no-cache があります。これが kebab-case で、串に刺した肉のように、小文字の単語がハイフンに沿って連なったもので、ウェブが人の目に見える名前のために採用した形です。テキストを kebab-case に変換するとは、言うとおりの句を、アドレス、クラス、ブランチ、ファイルで機能する名前に変えることです。

一行を貼り付けて、kebab-case で読み返してください。変換はお使いのブラウザー内で行われ、入力したものはどこにも送られず、規則はこのページの言語に従い、英語には従いません。行を単語に切り、小文字にして、ハイフンでつなぎます。すでに camelCase で書かれた行もそこで切られるので、fooBar は foo-bar になります。以下では、ページが正確に何をして何をしないか、異なる言語の厄介な文字をどう扱うか、ウェブがなぜアンダースコアよりハイフンを好むのか、kebab-case が慣習である場所、そして急いでテキストを kebab-case に変換する人が引っかかる罠を説明します。

変換が行うこと

切る、小文字にする、つなぐ

ページはまず行を単語に切り、それぞれを小文字にして、ハイフンでつなぎます。Crème brûlée for 2 — straße 17, fooBar という行は、crème-brûlée-for-2-straße-17-foo-bar として戻ってきます。アクセントは保たれ、数字は独立した単語として残り、ダッシュとカンマはなくなり、fooBar は大文字のところで二つに切られます。

切れ目が入る場所

単語の境界は、空白、句読点、ダッシュ、記号、あるいは単語内の小文字から大文字への移り変わりです。したがって Main Menu、mainMenu、main_menu、main--menu はすべて main-menu になります。変換はほぼどんな出発点も受け付け、常に同じ形に至るので、名前がスタイルシートやアドレスに入る前の、安全な最後の段階になります。

余計なハイフンはなし

繰り返された区切りは一つにまとめられ、先頭と末尾にハイフンは残りません。...Hello, World!! のような乱雑な句は、hello-world として出てきて、両端に何もぶら下がりません。

変換が行わないこと

句読点は保たれない

カンマ、ピリオド、ダッシュは、単語間の境界であって、引き継ぐべき文字ではありません。CSS のクラスやファイル名にはそれが望むものですが、散文には望むものではありません。ページに通した文は名前として戻り、元の句読点はなくなります。

アクセントは取り除かれない

行はアクセント付きの文字を保ちます。crème-brûlée。現代のブラウザーとサーバーは名前とアドレスにそれらを受け付けますが、古いツールは受け付けないかもしれず、アクセント付きのアドレスは、コピーするとパーセントコードにエスケープされます。プレーンな文字が必要なら、URL スラッグのページがラテン文字の記号も取り除きます。

名前が空いているかは確認されない

二つの異なる句が同じ名前を生むことがあり、ページは、名前がすでにサイトやプロジェクトで使われているかを知りません。公開する前に、衝突がないか確認してください。

言語が重要

空白なしで書かれる文字体系

単語に切るには境界が必要です。中国語と日本語は空白なしで書かれるので、それらの文字体系の行は一つの単語として戻ります。ページは、推測した場所で切るより、そう伝えることを選びます。

トルコ語と点つきの i

小文字化はページの言語の規則に従います。トルコ語では、I の小文字は点のない ı で、İ の小文字は i です。英語の規則を適用するコンバーターは、単語を変えてしまいます。このページは、書かれている言語に従います。

ドイツ語とエスツェット

ドイツ語の ß はすでに小文字で、そのまま残ります。straße-17。大文字の STRASSE は strasse として戻ります。大文字の形は、ß から来たのか二つの文字から来たのかを覚えていないからです。

右から左へ書く文字体系とインド系文字体系

アラビア語、ヘブライ語、インド系の文字体系には、単語の間に空白があり、大文字小文字はありません。ページはそれらの単語をハイフンでつなぎ、文字には手を加えません。

ウェブがハイフンを好む理由

検索エンジンはハイフンを空白として読む

検索エンジンは、アドレス内のハイフンを単語間の区切りとして扱うので、how-to-repot-a-fern は五つの単語として理解されます。対照的に、アンダースコアは一般に結合子として読まれ、how_to_repot_a_fern は一つの長い単語として読まれるかもしれません。人が検索するアドレスには、ハイフンのほうが良い選択で、その習慣はウェブ全体に広がりました。

読みやすさ

リンクに下線が引かれると、アンダースコアは消えることがあります。線がちょうどアンダースコアの位置にあるからです。ハイフンは見えたままです。小さな点ですが、この形がアドレスで定着した理由を説明します。

大文字小文字を区別しないこと

アドレスは小文字が最も安全です。一部のサーバーでは、その一部が大文字小文字を区別するかもしれないからです。kebab-case は定義上小文字で、一群の間違いをなくします。

kebab-case が慣習である場所

ウェブアドレス

ページアドレスの最後の部分、スラッグは、ほぼ常に kebab-case です。アクセントも含まないアドレスが必要なら、URL スラッグのページを使ってください。

CSS と HTML

CSS のプロパティは kebab-case で（background-color、font-size）、ほとんどのクラス名とカスタムプロパティ（--brand-color）もそうです。data-user-id のような HTML 属性も同じスタイルに従います。コンポーネントのクラス名を考案するとき、kebab-case はスタイルシートの読み手が期待するものです。コンポーネントがサイズ付きで描かれているなら、長さにはpx を rem に変換が役立ちます。

ファイル名とフォルダー名

ハイフンでつながれた小文字の単語は、どのシステムでも安全なファイル名であり、そのため静的サイトジェネレーターや多くのフレームワークが、ページと資産にそれを使います。

コマンドラインのオプションとパッケージ名

--dry-run のようなフラグ、npm のようなレジストリのパッケージ名、feature/login-form のような Git のブランチは、すべて kebab-case に従います。この形にした句は、使うツールに受け入れられやすいです。

Lisp とその仲間

この形は Lisp から来ました。Lisp では、言語が周りに空白のない減算記号としてハイフンを必要としないので、名前にハイフンが許されています。kebab-case という名前は串についての冗談で、それが定着しました。

慣習ではない場所

Python、Ruby、データベース

これらはアンダースコアを好みます。ハイフンはマイナスと読まれるからです。それらには、snake_caseを使ってください。

JavaScript の変数と Java

変数名のハイフンは減算です。これらの言語はcamelCaseを使います。kebab-case は、それらの文字列値、ファイル名、CSS には今も現れます。

散文とタイトル

kebab-case は名前のためのものです。タイトルと文は、空白と大文字を保つべきです。見出しには、Title Caseを検討してください。

ここでテキストを kebab-case に変換する方法

テキストを貼り付けるか入力する

最初の欄に句を入力してください。結果は二番目の欄にすぐ現れるので、入力するにつれて変わるのを見られます。

名前を確認する

自然に読め、長すぎないことを確かめてください。約六十文字を超えるアドレスは、検索結果で切り取られます。良いスラッグは短く、ページが何かを伝えます。

コピーする

コピーボタンを押して、結果を必要な場所に貼り付けてください。同じ行のほかの形については、下をご覧ください。

同じ行の七つの書き方すべて

形の一覧表

コンバーターの下の表は、例の行を、サイトが提供する七つの形すべてで示します。大文字、小文字、Title Case、snake_case、kebab-case、camelCase、URL スラッグです。同じ単語がそれぞれでどう見えるかを見る手早い方法です。

これらの形の由来

二つのアルファベット

大文字と小文字は、かつては二つの別のアルファベットでした。大文字はローマのもので、のみで石に刻まれ、小文字はカロリング小文字体に由来し、羊皮紙の上を素早く動くペンで形づくられました。印刷工は二つを別々の箱、上のケースと下のケースに入れており、箱がなくなってからも長く、その名前は残りました。

空白のない名前

プログラミングの形ははるかに新しく、一つの問題を解くために発明されました。名前には空白を含められないという問題です。snake_case は初期の C から、camelCase は Smalltalk から、kebab-case は Lisp から、URL スラッグは、空白とアクセントが許されないアドレスに人間のタイトルを入れる必要から生まれました。

実際にうまく機能する名前

短くて説明的

良い kebab-case の名前は、できるだけ少ない単語で、それが何かを伝えます。contact-us は please-get-in-touch-with-our-team より優れています。テキストを kebab-case に変換するときは、まず句を切り詰めてください。

時間がたっても安定している

アドレスの名前は約束です。ほかのサイトがそこにリンクするからです。リニューアルのあとでも真実であり続ける名前を選び、日付とバージョン番号は、それが要点でない限り避けてください。

プロジェクト全体で一貫している

すべてのページアドレス、クラス名、ファイル名が同じ規則に従うなら、新しく来た人は名前を正しく推測できます。新しいページのためにテキストを kebab-case に変換するときは、隣のものにパターンがないか確認してください。

お望みなら、ストップワードなしで

短く保つために、アドレスから the、a、of のような語を省く人もいます。好みの問題です。短いアドレスは整っていて、長いものは声に出して読みやすいです。

実際のプロジェクトでの kebab-case

CSS のクラスに名前をつける

スタイルシートのコンポーネント名は、短いハイフンでつないだ句として読むのが最良です。card、card-title、card-footer。BEM のような方法論は、バリエーションのためにダブルハイフンとアンダースコアを加えますが、すべてのクラスの基本は、今もハイフンでつないだ小文字の名前です。クラスのためにテキストを kebab-case に変換するとき、次の開発者に、推測できる名前を与えています。

サイトのファイルとフォルダーに名前をつける

サイトの構造は、what-to-plant-in-april.html というファイルや garden-guides というフォルダーのように、アドレスを映すことがよくあります。一貫したハイフンつきの名前は、構造を閲覧しやすく、リンクしやすく、システム間で移しやすくします。ページにデータファイルが必要なら、CSV を JSON に変換とサイトのほかのコンバーターがそれを用意でき、同じ命名規則が結果にも当てはまります。

バージョン管理のブランチとタグに名前をつける

作業ごとにブランチを使うチームは、fix-login-redirect や add-search-filter のように名前をつけます。ブランチ名は、一覧、プルリクエスト、チャットで読まれ、短いハイフンつきの句はざっと見やすいです。多くのチームは、種類とスラッシュを前につけます。feature/add-search-filter。スラッシュのあとの部分を作るには、作業のタイトルからテキストを kebab-case に変換してください。

属性とカスタムプロパティに名前をつける

--space-large や --brand-primary のような CSS のカスタムプロパティは、慣習的に kebab-case で、HTML の data 属性もそうです。色も扱うなら、そのような名前の背後にある値のために、HEX を RGB に変換の表記が必要かもしれません。

古い名前と新しい名前の記録を残す

ファイルやクラスの一括の名前を変えるときは、古い名前と新しい名前の二列のリストを残してください。検索と置換、リダイレクト、同僚に何が起きたかの説明に役立ちます。コンバーターは新しい名前を一貫させ、リストは変更を監査可能にします。

長続きするアドレスを作る

まず読み手のことを考える

アドレスは、機械に読まれる前に、人に読まれます。短くわかりやすいものは、リンクがどこへ導くかを訪問者に伝え、クリックを促します。スラッグのためにテキストを kebab-case に変換するときは、ほかの説明なしにメッセージに貼り付けられたところを想像し、意味が通じるかを問うてください。

セクションを繰り返さない

アドレスにすでに recipes というフォルダーがあるなら、ページを best-recipes-for-summer と呼ぶ必要はありません。summer-salads のような名前で十分で、アドレスは重複なしに recipes/summer-salads と読めます。

テキストを kebab-case に変換するときの落とし穴

ハイフンがマイナスを意味する場所で使う

ほとんどのプログラミング言語では、名前の中のハイフンは減算です。そのような言語の変数に kebab-case を使わないでください。

名前がすでに存在するかもしれないことを忘れる

同じスラッグを持つ二つのページは衝突します。公開する前に、サイトやプロジェクトを確認してください。

公開されたアドレスを変える

アドレスがいったん公開されると、変えるとリンクが壊れます。どうしても必要なら、古いものからのリダイレクトを設定してください。

非常に長い名前

長いアドレスは共有しにくく、検索結果で短縮されます。変換する前に句を切り詰めてください。

変換する前によくある質問

句読点はどうなりますか？

単語間の境界として扱われ、引き継がれません。

数字は保たれますか？

はい、独立した単語として、ハイフンで区切られます。

camelCase の入力を扱えますか？

はい。単語内の大文字は切れ目を示すので、fooBar は foo-bar になります。

ほかの言語に使えますか？

はい、ページの言語の規則で。中国語や日本語のような空白のない文字体系は、一つの単語として戻ります。

テキストはアップロードされますか？

いいえ。ここで入力したものはどこにも送られないので、下書き、パスワード、顧客の名前は、テキストエディターと同じくらい安全です。

代わりにアンダースコアを得るには？

テキストを snake_case に変換を使います。

実例

ウェブサイトに新しいセクションを加えていて、編集者が Spring Garden: What To Plant In April (and Why) というタイトルをくれたとします。貼り付けて、spring-garden-what-to-plant-in-april-and-why を読みます。長いので、タイトルを What to Plant in April に短くして、もう一度変換します。what-to-plant-in-april。それをファイル名とアドレスとして、またスタイルシートの見出しのクラスとして、同じ言葉を同じ形で使います。三か所、一つの名前、一度の入力です。

短いチェックリスト

変換する前

名前が伝えなければならないものまで句を短くしてください。既存の名前に一致するものがないか確認してください。

変換している間

句を貼り付け、結果を読み、自然でほどよく短いことを確かめてください。

変換したあと

当てはまるすべての場所で同じ名前を使い、公開されたアドレスを変えることがあれば、リダイレクトを設定してください。

よくある間違い

変数名に kebab-case を使う

ほとんどの言語で、ハイフンはマイナスを意味します。

名前を長くしすぎる

短い名前のほうが、共有しやすく覚えやすいです。

公開されたアドレスを変える

リンクが壊れます。どうしても必要ならリダイレクトしてください。

テキストは端末の中にとどまる

変換はローカルで行われます。テキストはお使いのブラウザー自身が扱い、何もどこにも送られません。あとで削除するものも、作成するアカウントもありません。それがテキストを kebab-case に変換する素直な方法です。

まとめ

ここでテキストを kebab-case に変換するには、一行を貼り付けて、単語に切られ、小文字になり、ハイフンでつながれた形で読み返します。すでに camelCase で書かれた行もそこで切られるので、fooBar は foo-bar になります。ページは句読点を保ちません。カンマ、ピリオド、ダッシュは、単語間の境界であって、引き継ぐべき文字ではなく、それは CSS のクラスやファイル名には望むものですが、散文には望むものではありません。単語に切るには境界が必要なので、空白なしで書かれる中国語と日本語は、一つの単語として戻ります。小文字化はページの言語に従います。ウェブがハイフンを好むのは、検索エンジンがそれを空白として読むからです。何もアップロードされません。