SlugGenerator.app

URLスラッグの特殊文字の扱い方：開発者ガイド

6 分で読了

ほとんどのスラッグジェネレーターは、素の英語テキストなら問題なく動きます。しかし現実にはアクセント付き文字、非ラテン文字、絵文字、記号があります。本ガイドでは、URLスラッグ生成時にそれらすべてを扱う方法を解説します。

問題: URLが使える文字は限られている

URLが安全に含められるのはASCII文字だけです。英字（a-z）、数字（0-9）、ハイフンやアンダースコアなどわずかな記号に限られます。それ以外は変換するかパーセントエンコード（é なら %C3%A9）する必要があります。パーセントエンコードされたURLは見栄えが悪く、読みにくく、SEOにも不利です。その解決策が音訳です。

音訳: 中心となる手法

音訳は、ある文字体系の文字を最も近いASCII相当に変換します。よくある例:

入力音訳後言語
é, è, ê, ëeフランス語・ポルトガル語
ü, ö, äue, oe, aeドイツ語
ñnスペイン語
ßssドイツ語
çcフランス語・ポルトガル語

当サイトのスラッグジェネレーターは、「音訳」オプションを有効にすると自動で音訳を行います。

Unicode正規化

音訳の前に、Unicodeテキストを正規化する必要があります。文字 é はUnicodeで2通りに保存できます。

  • 合成済み (NFC): 単一のコードポイント（U+00E9）
  • 分解 (NFD): 文字「e」の後に結合用アクセント記号（U+0065 + U+0301）

どちらも画面上は同じに見えますが、バイト列は異なります。NFKD（互換分解）に正規化すると、基本文字とアクセント記号が分離され、アクセントを簡単に除去できます。

// JavaScript
function removeAccents(text) {
  return text
    .normalize('NFKD')
    .replace(/[\u0300-\u036f]/g, '');
}

removeAccents('Café Résumé');
// Output: Cafe Resume

CJK文字（中国語・日本語・韓国語）

CJK文字は、意味のある形でラテン文字に音訳できません。一般的なアプローチは2つあります。

  1. ローマ字化を使う（中国語はピンイン、日本語はローマ字）。pinyin（npm）や kuroshiro などのライブラリで可能ですが、結果がユーザーの期待と合わないことがあります。
  2. 文字をそのまま残す。現代のブラウザと検索エンジンはUnicode URLを問題なく扱います。GoogleはCJK文字を含むURLをインデックスできます。アドレスバーではパーセントエンコードされますが、検索結果では正しく表示されます。

多くのケースでは選択肢2のほうが安全です—ローマ字化したCJKテキストはネイティブには読みにくいことがあります。

URLの絵文字

技術的には可能（絵文字はパーセントエンコードされる）ですが、スラッグに絵文字を使うのは悪手です。

  • 非常に長いパーセントエンコード文字列になる
  • 多くのシステムやAPIで壊れる
  • 検索エンジンが正しくインデックスできないことがある
  • 手で入力できない

スラッグ生成時には常に絵文字を取り除きましょう。簡単な正規表現で除去できます。

text.replace(/[\u{1F600}-\u{1F6FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}]/gu, '')

よくある特殊文字

良いスラッグジェネレーターがよくある特殊文字をどう扱うかを示します。

文字処理理由
&「and」に置換、または削除URLで特別な意味を持つ
@, #, ?, =削除URLの予約文字
“ ” ‘ ’削除句読点、スラッグに意味がない
— –ハイフンに置換用途が近く、区切りに正規化
/ \ハイフンに置換スラッシュはパスのセグメントを作る

スラッグジェネレーターのテスト

エッジケースを正しく処理できるか、次のような厄介な入力でテストしましょう。

  • "Café Menu — Special Édition!" → cafe-menu-special-edition
  • "100% Free & Open Source" → 100-free-and-open-source
  • " Lots of spaces " → lots-of-spaces
  • "---triple---hyphens---" → triple-hyphens
  • 空文字列 → 空、またはフォールバックを返すべき

これらの例を当サイトのスラッグ化オンラインツールで直接試して、各ケースの処理を確認してみてください。

ライブラリのサポート

各言語のスラッグライブラリのより詳しい比較は、JavaScript・Python・PHPでのテキストのスラッグ化のガイドをご覧ください。ライブラリごとに特殊文字の扱いは異なるので、用途に合うものを選びましょう。