JavaScript - History API

こんにちは、若手プログラマーさんたち！今日は、時間の旅に出かけましょう...いや、ブラウザの時間の旅です！JavaScriptのHistory APIという魅力的な世界に飛び込みます。プログラミングが初めての方でも心配しないでください。あなたの親切なガイドとして、私はすべてをステップバイステップで説明します。では、シートベルトを締めて、始めましょう！

Web History API

想像してみてください、最近の休暇の写真アルバムをめくっているところです。前のページに戻ったり、後ろのページに進んだりできます。Web History APIも似たようなものですが、ブラウジング体験用です。JavaScriptがブラウザの履歴と対話し、バックとフォワードのナビゲーションを制御できるようにします。

これをウェブページのタイムマシンと考えてください。クールですね？

JavaScript History APIの使い方

History APIを使うのは、ブラウザの履歴のリモコンを持っているようなものです。簡単なステップに分解してみましょう：

APIにアクセスする
履歴をナビゲートする
履歴に新しいエントリを追加する

コードに進む前に、ちょっとした話を共有します。初めてこの内容を生徒たちに教えたとき、本にブックマークを挟むAnalogyを使いました。History APIは、ページをめくる（ナビゲート）、ブックマークを追加する（新しい状態をプッシュ）、そしてページを書き換える（状態を置き換える）ことができます。これで彼らはすぐに概念を理解できました。あなたにも同じように助けになることを願っています！

文法

では、History APIの基本的な文法を見てみましょう。心配しないでください。各部分を詳細に説明します。

// Historyオブジェクトにアクセスする
window.history

// 使用できるメソッド
history.back()
history.forward()
history.go()
history.pushState()
history.replaceState()

これらを一つずつ見ていきましょう：

メソッドテーブル

メソッド	説明
back()	履歴の前のページをロード
forward()	履歴の次のページをロード
go()	履歴の特定のページをロード
pushState()	履歴に新しい状態を追加
replaceState()	現在の履歴エントリを修正

履歴リストの前のページをロード

先ほど写真アルバムのページを戻す話をしましたが、history.back()はまさにその動作です。以下のように使います：

function goBack() {
window.history.back();
}

例えば、ページに「バック」ボタンがある場合、こんな風に使えます：

<button onclick="goBack()">Go Back</button>

ユーザーがこのボタンをクリックすると、ブラウザのバックボタンを押したのと同じです。魔法のようですね？

履歴リストの次のページをロード

では、前に進む場合はどうでしょうか？history.forward()が役立ちます：

function goForward() {
window.history.forward();
}

「フォワード」ボタンを使う場合はこんな風になります：

<button onclick="goForward()">Go Forward</button>

このボタンをクリックすると、ブラウザのフォワードボタンを押したのと同じです。写真アルバムで次のページに進むようなものです。

履歴リストの長さを取得

ブラウザの履歴にどれだけのページがあるのか気になりますか？history.lengthプロパティがそれを教えてくれます：

console.log(history.length);

これで、現在のセッションの履歴のページ数が表示されます。写真アルバムにどれだけの写真があるかを数えるようなものです。

ページに表示する楽しい方法もあります：

function showHistoryLength() {
document.getElementById('historyLength').innerHTML = 'You have ' + history.length + ' pages in your history.';
}

<button onclick="showHistoryLength()">Check History Length</button>
<p id="historyLength"></p>

では、History APIのさらに高度な機能を見ていきましょう。

履歴に新しいエントリを追加

新しい「ページ」を実際にロードすることなく履歴に追加したい場合があります。そのときに便利なのがpushState()です：

function addToHistory(state, title, url) {
history.pushState(state, title, url);
}

// 使用例
addToHistory({ page: 'home' }, 'Home Page', '/home');

これで新しいエントリが履歴に追加されます。写真アルバムに新しい写真を追加するのと同じですが、実際には写真を撮ることなくです！

現在の履歴エントリを修正

現在の履歴エントリを変更したい場合はreplaceState()が役立ちます：

function updateCurrentState(state, title, url) {
history.replaceState(state, title, url);
}

// 使用例
updateCurrentState({ page: 'updated home' }, 'Updated Home Page', '/updated-home');

これは、写真アルバムの現在の写真のキャプションを編集するようなものです。

履歴の変更をリスン

最後のcoolな技：履歴の変更をpopstateイベントでリスンできます：

window.addEventListener('popstate', function(event) {
console.log('Navigation occurred');
console.log(event.state);
});

これは、写真アルバムで誰かがページをめくったときに友達に教えてもらうようなものです。

そして、ここまでがJavaScriptのHistory APIの旅です。基本的なナビゲーションから履歴の追加や修正までをカバーしました。実践で練習すれば、プロのようにブラウザの履歴をナビゲートできるようになります！

このチュートリアルが役立つことができて、少しでも楽しかったことを願っています。codingとlearningを続け、旅を楽しんでください。毕竟、ウェブ開発では、私たちはみんな自分自身のタイムトラベラーなのですから！

Credits: Image by storyset

前のチュートリアル:

JavaScript - ウェブAPI

次のチュートリアル:

JavaScript - ストレージAPI