JavaScriptでURLスラッグを生成する3つの方法

2024-06-28

jQuery でタイトルを URL スラグに変換する方法

このチュートリアルでは、jQuery を使ってタイトルを URL スラグに変換する方法を説明します。URL スラグとは、ウェブサイトの URL に使われる、短くてわかりやすい文字列です。例えば、ブログ記事のタイトルが「SEO のための最良の方法」であれば、スラッグは「seo-best-practices」のようになります。

必要なもの

jQuery ライブラリ
基本的な JavaScript の知識

手順

まず、プロジェクトに jQuery ライブラリをロードする必要があります。これは、CDN から直接ロードしたり、ローカルファイルからロードしたりすることができます。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

タイトルを取得する

次に、変換したいタイトルを取得する必要があります。これは、getElementById や querySelector などの JavaScript メソッドを使って行うことができます。

var title = document.getElementById('my-title').textContent;

タイトルをスラグに変換する

以下の関数は、タイトルを URL スラグに変換します。

function convertToSlug(title) {
  var slug = title.toLowerCase();
  // 特殊文字を置換する
  slug = slug.replace(/[^a-zA-Z0-9-\s]/g, '-');
  // 空白をハイフンに置き換える
  slug = slug.replace(/\s/g, '-');
  // ハイフンを連続させる
  slug = slug.replace(/-+/g, '-');
  // 先頭のハイフンと末尾のハイフンを削除する
  slug = slug.replace(/^-|-$/g, '');
  return slug;
}

この関数は、以下の処理を行います。

タイトルを小文字に変換します。
特殊文字をハイフンに置き換えます。
続くハイフンを 1 つにまとめます。
先頭のハイフンと末尾のハイフンを削除します。

スラグを出力する

変換されたスラグを出力するには、以下のようにします。

var slug = convertToSlug(title);
console.log(slug);

このコードは、コンソールにスラグを出力します。

例

以下の例は、上記のコードをすべてまとめたものです。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery でタイトルを URL スラグに変換する</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1 id="my-title">SEO のための最良の方法</h1>
  <script>
    var title = document.getElementById('my-title').textContent;
    var slug = convertToSlug(title);
    console.log(slug);
  </script>
</body>
</html>

このコードを実行すると、コンソールに seo-best-practices というスラグが出力されます。

補足

上記のコードはあくまで一例です。必要に応じてカスタマイズすることができます。
タイトルをスラグに変換する方法は他にもあります。
URL スラグは、必ずしも SEO に最適とは限りません。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery でタイトルを URL スラグに変換する</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1 id="my-title">SEO のための最良の方法</h1>
  <script>
    function convertToSlug(title) {
      var slug = title.toLowerCase();
      slug = slug.replace(/[^a-zA-Z0-9-\s]/g, '-');
      slug = slug.replace(/\s/g, '-');
      slug = slug.replace(/-+/g, '-');
      slug = slug.replace(/^-|-$/g, '');
      return slug;
    }

    var title = document.getElementById('my-title').textContent;
    var slug = convertToSlug(title);
    console.log(slug);
  </script>
</body>
</html>

説明

このコードは、HTML、CSS、JavaScript で構成されています。
HTML 部分では、タイトル (<h1>) 要素と、jQuery ライブラリをロードするための <script> 要素を定義しています。
CSS 部分は、この例では必要ありません。
JavaScript 部分では、以下の処理を行っています。
- convertToSlug 関数: タイトルを URL スラグに変換します。
- メイン部分: タイトルを取得し、convertToSlug 関数を使ってスラグに変換し、コンソールに出力します。

使い方

このコードを以下の手順で使用できます。

コードを HTML ファイルに保存します。
ブラウザで HTML ファイルを開きます。
コンソールを開くと、seo-best-practices というスラグが出力されていることを確認できます。

カスタマイズ

このコードは、必要に応じてカスタマイズすることができます。例えば、以下のことができます。

convertToSlug 関数を変更して、変換規則をカスタマイズする。
出力されるスラグの形式を変更する。
他の要素からタイトルを取得する。

他の方法

JavaScript ライブラリを使う

URL スラグを生成するのに役立つ JavaScript ライブラリがいくつかあります。例えば:

これらのライブラリは、convertToSlug 関数のような関数を提供しており、タイトルを URL スラグに変換することができます。

正規表現を使って、タイトルから特殊文字を削除し、空白をハイフンに置き換えることができます。以下の例は、正規表現を使ってタイトルを URL スラグに変換する方法を示しています。

function convertToSlug(title) {
  var slug = title.toLowerCase();
  slug = slug.replace(/[^a-zA-Z0-9-\s]/g, '-');
  slug = slug.replace(/\s/g, '-');
  slug = slug.replace(/-+/g, '-');
  slug = slug.replace(/^-|-$/g, '');
  return slug;
}