はじめに (対象読者・この記事でわかること)

この記事は、Webアプリケーション開発に興味があり、特にユーザー入力に基づいた動的なページ表示の仕組みについて学びたい方を対象としています。Node.jsとJavaScriptの基本的な知識がある方を前提としますが、一つずつ丁寧に解説していきますのでご安心ください。

この記事を読むことで、ユーザーが入力した英数字をURLパスとして利用し、そのパスに応じた独自のコンテンツを表示するWebページの生成方法を理解し、実際にシンプルなアプリケーションを実装できるようになります。SEOに強く、ユーザーフレンドリーな動的なWebサイトを構築するための基礎を身につけることができるでしょう。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - HTML/CSSの基本的な知識（フォームの作成など） - JavaScriptの基本的な構文（DOM操作、イベントハンドリング、関数など） - Node.jsとnpmの基本的な使い方（プロジェクトの初期化、パッケージのインストールなど） - HTTPリクエスト/レスポンスの概念

ユーザー入力と動的なURLパスの重要性

現代のWebアプリケーションにおいて、コンテンツを動的に生成し、それぞれに固有のURLを割り当てることは非常に一般的です。例えば、ブログ記事、ECサイトの商品詳細ページ、ユーザープロフィールページなどがこれに該当します。ユーザーが特定のキーワードやIDを入力することで、それに対応する情報を持つページが生成され、アクセスできるようになる仕組みです。

静的なURL（例: /about.html）とは異なり、動的なURLパス（例: /products/smartphone-x や /users/kousukei）は、URL自体がコンテンツの内容をある程度示しているため、ユーザーにとって理解しやすく、検索エンジン最適化（SEO）の観点からも有利です。

ユーザーが入力した英数字をURLパスにする場合、いくつかの課題が生じます。例えば、スペースや特殊文字の扱い、URLの長さ制限、セキュリティ上の考慮事項などです。これらを解決するために、入力値をURLに適した形式に「スラッグ化」する処理や、サーバーサイドでの動的なルーティング設定が必要になります。本記事では、Node.jsのWebフレームワークであるExpress.jsとクライアントサイドJavaScriptを連携させ、これらの課題を克服しながら動的なページ生成を実現する方法を具体的に解説していきます。

Express.jsとJavaScriptで実現する動的ページ生成

このセクションでは、ユーザー入力からURLパスを生成し、そのパスに対応するコンテンツを表示するWebアプリケーションを構築する具体的な手順を解説します。

全体像の理解

私たちが目指すアプリケーションの基本的な流れは以下の通りです。

  1. ユーザー入力: ユーザーがWebページ上の入力フォームに任意の英数字（例: 検索キーワードやID）を入力します。
  2. クライアントサイド処理: JavaScriptが入力値を取得し、URLパスとして適切に利用できるよう整形（スラッグ化、URLエンコード）します。整形後、新しいURLパスを構築し、そのパスへブラウザをリダイレクトします。
  3. サーバーサイド処理: サーバー（Node.js + Express.js）は、リダイレクトされた新しいURLパスを受け取ります。このパスにはユーザーが入力した情報が含まれており、Express.jsの動的ルーティング機能を使ってその情報を抽出します。
  4. コンテンツ生成と表示: サーバーは抽出した情報に基づき、専用のコンテンツを生成（またはデータベースから取得）し、HTMLテンプレートに埋め込んでクライアントに返します。クライアントのブラウザは、返されたHTMLを表示します。

ステップ1: プロジェクトの初期設定とExpress.jsのセットアップ

まずは、Node.jsプロジェクトを初期化し、Express.jsとテンプレートエンジン（EJS）をインストールします。

Bash

mkdir dynamic-url-app
cd dynamic-url-app
npm init -y
npm install express ejs

次に、サーバーアプリケーションのエントリーポイントとなる app.js を作成します。

Javascript

// app.js
const express = require('express');
const path = require('path');
const app = express();
const PORT = 3000;

// EJSをテンプレートエンジンとして設定
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// 静的ファイルの配信設定 (CSSやクライアントサイドJSファイル用)
app.use(express.static(path.join(__dirname, 'public')));

// ルートパスへのアクセス
app.get('/', (req, res) => {
    res.render('index', { title: '動的URLパス生成アプリ' });
});

// サーバー起動
app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});

ステップ2: ユーザー入力フォームの作成 (HTML/EJS)

ユーザーがキーワードを入力するためのフォームを作成します。EJSを使って views/index.ejs ファイルを作成しましょう。

Html

<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <h1>キーワードで専用ページを生成</h1>
    <p>入力したキーワードがURLパスになります。</p>

    <div class="input-section">
        <input type="text" id="keywordInput" placeholder="例: JavaScriptの基礎" aria-label="キーワード入力欄">
        <button id="generateButton">ページを生成</button>
    </div>

    <script src="/js/main.js"></script>
</body>
</html>

そして、簡単なスタイルシートも public/css/style.css として追加します。

Css

/* public/css/style.css */
body {
    font-family: Arial, sans-serif;
    margin: 40px;
    background-color: #f4f4f4;
    color: #333;
    text-align: center;
}

h1 {
    color: #0056b3;
}

.input-section {
    margin-top: 30px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: inline-block; /* センター寄せのため */
}

input[type="text"] {
    padding: 10px 15px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 300px;
    font-size: 16px;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

.detail-page {
    margin-top: 40px;
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

ステップ3: クライアントサイドJavaScriptでURLを構築

ユーザーがボタンをクリックした際に、入力値をスラッグ化し、新しいURLへ遷移するJavaScriptを作成します。public/js/main.js ファイルとして作成します。

Javascript

// public/js/main.js
document.addEventListener('DOMContentLoaded', () => {
    const keywordInput = document.getElementById('keywordInput');
    const generateButton = document.getElementById('generateButton');

    // 日本語や記号を含む文字列をURLフレンドリーなスラッグに変換する関数
    function generateSlug(text) {
        if (!text) return '';
        return text
            .toString()
            .normalize('NFD') // Unicode正規化 (結合文字を分離)
            .replace(/[\u0300-\u036f]/g, '') // アクセント記号を除去
            .toLowerCase() // 小文字に変換
            .trim() // 前後の空白を除去
            .replace(/\s+/g, '-') // スペースをハイフンに置換
            .replace(/[^\w-]+/g, '') // 英数字、ハイフン以外の文字を除去
            .replace(/--+/g, '-'); // 連続するハイフンを1つに置換
    }

    generateButton.addEventListener('click', () => {
        const keyword = keywordInput.value;
        if (keyword) {
            const slug = generateSlug(keyword);
            // URLエンコードで特殊文字を安全に扱う
            const encodedSlug = encodeURIComponent(slug);
            window.location.href = `/topic/${encodedSlug}`; // 新しいURLパスへ遷移
        } else {
            alert('キーワードを入力してください。');
        }
    });

    // Enterキーでも生成できるようにする
    keywordInput.addEventListener('keypress', (event) => {
        if (event.key === 'Enter') {
            generateButton.click();
        }
    });
});

generateSlug 関数は、ユーザーの入力（日本語を含む可能性も考慮）をURLパスに適した形に変換するための重要な部分です。encodeURIComponent を使用することで、スラッグ化された文字列に含まれる可能性のあるURLにとって問題となる文字（例: スペースがハイフンに変換されなかった場合など）を安全にエンコードします。

ステップ4: Express.jsで動的ルーティングを設定

app.js に動的なURLパスを受け取るルーティングを追加します。

Javascript

// app.js (既存のコードに追加)

// ... (省略) ...

// 動的URLパスを受け取るルート
// :keyword の部分がパスパラメータとして取得できる
app.get('/topic/:keyword', (req, res) => {
    const encodedKeyword = req.params.keyword;
    // URLデコードして元のキーワードを取得
    const keyword = decodeURIComponent(encodedKeyword);

    // ここでキーワードに基づいたコンテンツを準備（例: DBから取得、API呼び出しなど）
    // 今回は簡単なメッセージを表示
    const content = `「${keyword}」に関する詳細情報ページです。`;

    res.render('detail', {
        title: `${keyword} - 詳細ページ`,
        keyword: keyword,
        content: content
    });
});

// ... (省略) ...

ステップ5: 動的コンテンツ表示用のテンプレート (EJS)

views/detail.ejs ファイルを作成し、サーバーから渡されたキーワードとコンテンツを表示します。

Html

<!-- views/detail.ejs -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div class="detail-page">
        <h1>トピック: <%= keyword %></h1>
        <p><%= content %></p>
        <p>現在のURL: <code><%= req.originalUrl %></code></p>
        <a href="/">トップページに戻る</a>
    </div>
</body>
</html>

これで、一連の動的ページ生成の仕組みが完成しました。

ハマった点やエラー解決

1. URLエンコーディング/デコーディングの欠如

問題点: ユーザーが入力したキーワードに / や ?、& などのURL予約文字や、日本語などのマルチバイト文字が含まれる場合、そのままURLパスに含めると、URLが壊れたり、意図しないルーティングになったりします。 例えば、「JavaScriptとは？」という入力を /topic/JavaScriptとは？ とすると、? がクエリパラメータと認識されてしまう可能性があります。

解決策: クライアントサイドでURLパスに含める値を設定する際に encodeURIComponent() を使用し、サーバーサイドでそれを受け取った際に decodeURIComponent() を使用します。

  • クライアントサイド (public/js/main.js): javascript const slug = generateSlug(keyword); const encodedSlug = encodeURIComponent(slug); // ここでエンコード window.location.href = `/topic/${encodedSlug}`;
  • サーバーサイド (app.js): javascript const encodedKeyword = req.params.keyword; const keyword = decodeURIComponent(encodedKeyword); // ここでデコード

これにより、URLに含めることのできない文字が安全な形式に変換され、サーバー側で正確に元の値に戻すことができます。

2. スラッグ生成ロジックの不備

問題点: generateSlug 関数が不十分な場合、生成されるURLが長すぎたり、読みにくかったり、一意性が保てなかったりすることがあります。特に日本語対応が考慮されていないと、URLが文字化けしたり、不正なパスになったりします。

解決策: より堅牢な generateSlug 関数を実装します。上記の public/js/main.js で示した関数は、日本語やアクセント記号の除去、連続するハイフンの整形など、多くのケースに対応できるように設計されています。 - 小文字化する - スペースをハイフンに置換する - 英数字とハイフン以外の文字を除去する - 連続するハイフンを一つにする - （オプション）Unicode正規化を行い、アクセント記号などを除去する

3. Expressでパスパラメータが取得できない

問題点: app.get('/topic/:keyword', ...) のようにルーティングを設定しているにも関わらず、req.params.keyword が undefined になる。

解決策: ルーティングの定義が、実際にリクエストされたURLパスと正確に一致しているか確認します。 - Expressのルーティングでは、コロン : の後に続く文字列がパラメータ名になります。例: /topic/:keyword であれば req.params.keyword。 - もし /topic/search?q=keyword のようにクエリパラメータを使っている場合は、req.query.q で取得します。今回はURLパスを利用しているので req.params が適切です。 - また、Expressのミドルウェアの順序も重要です。ルーティングを定義する前に app.use(express.static(...)) や他のミドルウェアがある場合は、そのミドルウェアがリクエストを処理してしまっていないか確認することも有効です。

まとめ

本記事では、Webアプリケーションにおいてユーザー入力に基づいた動的なURLパスを生成し、それに対応する専用のページを表示する仕組み を解説しました。

  • 要点1: クライアントサイドJavaScriptでユーザー入力からURLフレンドリーな「スラッグ」を生成し、encodeURIComponent() を使って安全にURLパスを構築しました。
  • 要点2: Node.jsのExpress.jsフレームワークを用いて、:param の記法で動的なURLパスを受け取るルーティングを設定し、req.params からユーザー入力を抽出する方法を学びました。
  • 要点3: サーバーサイドで decodeURIComponent() を使ってURLエンコードされたパスを元の値に戻し、その情報に基づいてEJSテンプレートを使って動的なコンテンツを生成・表示する一連の流れを実装しました。

この記事を通して、SEOに強く、ユーザーにとって分かりやすいURL構造を持つ動的コンテンツページを効率的に構築するための基礎的なスキルと理解を得られたことでしょう。ユーザー体験の向上と検索エンジンからの評価改善に役立つ、強力なWeb開発テクニックです。

今後は、History APIを使ったSPA（Single Page Application）での動的ルーティング実装、データベースと連携してより複雑なコンテンツを動的に表示する方法、セキュリティ強化（入力値のサニタイズなど）といった発展的な内容についても学習を進めていくと、さらに高度なWebアプリケーション開発が可能になります。

参考資料