【JavaScript】サーバーレスWiki 履歴表示の機能追加

【JavaScript】サーバーレスWiki 履歴表示の機能追加

サーバーレスWiki（ファイルベースや単一ページで動作するWikiシステム）において、URLハッシュやJavaScriptによる動的なコンテンツ書換を行っている場合、単純にブラウザの「戻る」ボタンが機能しない課題があります。

この記事では、過去に閲覧したコンテンツへ簡単に戻れるようにするための「簡易的な表示履歴機能」の追加方法と実装のポイントを解説します。

機能の目的と背景

画面遷移を伴わずに動的にコンテンツを書き換える仕様のアプリケーションでは、ユーザーが過去に表示したページに戻りたいときに不便を感じることが多々あります。

これを解消するため、画面下部などに直近で閲覧したページのタイトルやリンクをリストとして保持・表示する簡易履歴エリアを設置します。

実装の考え方とサンプルコード

以下は、コンテンツ切り替え時に訪問したページの履歴を配列で保持し、DOMへ動的に反映させるための最小限のJavaScriptサンプルコードです。

// 履歴を保持する配列と最大保持数
const historyList = [];
const MAX_HISTORY = 5;

// コンテンツを切り替えて履歴に追加する関数
function loadContent(pageTitle, pageUrl) {
    // 実際のコンテンツ読み込み処理がここに入ります
    console.log(pageTitle + " を読み込みました");

    // 履歴に追加（重複を防ぐ、または最新を先頭にする処理）
    addHistory(pageTitle, pageUrl);
}

function addHistory(title, url) {
    // 既存の同一エントリがあれば削除して最新を先頭にするなどの調整が可能
    historyList.unshift({ title: title, url: url });
    
    // 最大数を超えたら古いものを削除
    if (historyList.length > MAX_HISTORY) {
        historyList.pop();
    }

    renderHistoryUI();
}

function renderHistoryUI() {
    const historyContainer = document.getElementById('history-container');
    if (!historyContainer) return;

    let html = '
';
    historyList.forEach(item => {
        html += `<li><a href="#" onclick="loadContent('${item.title}', '${item.url}')">${item.title}</a></li>`;
    });
    html += '</ul>';

    historyContainer.innerHTML = html;
}

使い方と今後の課題

• 使い方: 画面下部に <div id="history-container"></div> などの要素を配置し、コンテンツ切り替え時に loadContent 関数を呼び出します。
• 今後の工夫: 単純なページ閲覧だけでなく、検索結果一覧や動的なフィルタリング状態なども履歴として復元できるようにするには、履歴データに状態（state）を含めるもう一工夫が必要になります。

注意事項

ブラウザ標準の履歴機能（History API: history.pushState など）を利用できるモダンな環境であれば、JavaScriptで独自に履歴リストを作るよりもHistory APIを活用する方がスマートに解決できる場合もあります。プロジェクトの要件に合わせて実装方法を選択してください。