kebabcase

URLでケバブ？

ブログにタグ機能をつけるために調べていたら、以下のようなコードが。

import kebabCase from 'lodash/kebabCase'
{group.map(tag => (
  <li key={tag.fieldValue}>
    <Link to={`/tags/${kebabCase(tag.fieldValue)}/`}>      {tag.fieldValue} ({tag.totalCount})
    </Link>
  </li>
))}

URLを/tags/（タグ名）とするところの「タグ名」をkababcase で変換をしている。

kebabcaseってなに？

kebabcaseだけでなく、camelcase、snakecaseもある

kebabcaseは、“This is a pen” を this-is-a-pen というように、大文字を小文字に変換して - （ハイフン）で串刺しでつなぎ合わせた表記の意味でした。

よくよく考えれば、タグで適当な言葉を使った場合に確かにそのままURLには使えない。

JavaScriptでは、lodashライブラリから使うことが可能。

• lodash

ちなみに、camelcase は thisIsAPen のように単語ごとに最初の文字を大文字にして縮める。 そして、snakecase は this_is_a_pen のようにアンダースコアで単語をつなげる。

参考

• ケバブケース（kebab-case）について調べた