JavaScriptでカスタムURL短縮関数を自作する方法

課題

今回は、以下の役割を持つ2つのJavaScript関数を実装することを求められます。

• 1つ目の関数は、長いURL（long URL）を受け取り、それに対応する短いURL（short URL）を返します。
• 2つ目の関数は、短いURLを受け取り、元のURLへリダイレクト（復元）します。

これはいわゆるURL短縮サービス（bit.lyなど）の仕組みを簡易的に再現するもので、短縮キーの生成と元URLとのマッピング管理がポイントになります。

コード例

以下がその実装コードです。

const url = 'https://www.google.com/search?client=firefox-b-d&q=google+search';
const obj = {};
const urlShortener = (longURL = '') => {
    let shortURL = "short.ly/" + longURL.replace(/[^a-z]/g,'').slice(-4);
    if(!obj[shortURL]){
        obj[shortURL] = longURL;
    };
    return shortURL;
}
const urlRedirector = (shortURL = '') => {
    return obj[shortURL];
};
const short = urlShortener(url);
const original = urlRedirector(short);
console.log(short);
console.log(original);

仕組みの解説

urlShortener関数では、正規表現 /[^a-z]/g を使ってURLから英小文字以外の文字をすべて除去し、残った文字列の末尾4文字を切り出して短縮キーとしています。生成したキーを接頭辞「short.ly/」と組み合わせて短縮URLを作成し、obj オブジェクトに「短縮URL → 元URL」のマッピングとして保存しています。

urlRedirector関数は、受け取った短縮URLをキーとして obj を参照し、対応する元のURLを返します。実際のサービスではここでHTTPリダイレクトを行うことになります。

実行結果

コンソールには以下のように出力されます。

short.ly/arch
https://www.google.com/search?client=firefox-b-d&q=google+search