DevToys Web Pro iconDevToys Web Proブログ
評価:
ブラウザ拡張機能を試す:

URL スラッグ生成

完了
区切り文字

入力

  • 出力

  • 技術的な詳細

    URLスラッグ生成の仕組み

    このツールでできること

    スラッグジェネレーターは、入力を小文字化し、空白や特殊文字をハイフンに置き換え、英数字またはハイフン以外の文字を削除し、連続するハイフンをまとめることで、任意のテキストをURL向けのスラッグに変換します。結果は、URL、ファイル名、CSSクラス名で安全に使える、クリーンで読みやすい文字列になります。たとえば「Hello World! (2024)」は「hello-world-2024」になります。

    開発者によくある利用シーン

    開発者は、ユーザーが入力したタイトルからURLパスを生成するCMSプラットフォーム、ブログエンジン、ECサイトを構築する際にスラッグジェネレーターを使用します。一貫したスラッグ化により、ページURLが安定し、人間が読みやすく、パーセントエンコードが必要な文字を含まないようにできます。また、動的コンテンツからCSSクラス名、データベースのカラム値、ファイルシステムのパスを生成する用途にも便利です。

    データ形式、型、またはバリエーション

    基本的なスラッグは、ASCIIの小文字、数字、ハイフンのみを使用します。拡張スラッグ化では、多言語コンテンツ向けにUnicode文字を保持したり(例:アクセント付き文字をASCII相当へ音写する)、実装によってはアンダースコアをハイフンの代わりに許可したりします。URLで安全なスラッグ長の上限は通常75〜100文字程度ですが、プラットフォームによって異なります。

    よくある落とし穴とエッジケース

    異なるタイトルでも同じスラッグになることがあります(例:「Foo Bar」と「Foo-Bar」はどちらも「foo-bar」になる)ため、アプリケーション側で数値サフィックスを付けるなどしてスラッグ衝突を処理する必要があります。非ラテン文字のスクリプトはスラッグ化の前に音写(トランスリテレーション)が必要で、そうしないと出力が空になる場合があります。先頭と末尾のハイフンはトリムすべきです。公開済みページのスラッグを変更すると外部からのリンクが切れるため、公開後のスラッグは不変として扱うべきです。

    コードではなくこのツールを使うべき場面

    このブラウザツールは、コンテンツ作成やプロトタイピング中に、単発で素早くスラッグを生成するのに便利です。本番アプリケーションでは、slugify(JavaScript/Python)やStringex(Ruby)などのライブラリを使ってプログラムでスラッグを生成し、衝突検出、Unicodeの音写、長さ制限をアプリケーションロジック内で一貫して扱えるようにしてください。