JavaScript - History Object
こんにちは、未来のプログラマーたち！今日は、JavaScriptのHistoryオブジェクトの興味深い世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、この旅をガイドするのが楽しみです。プログラミングが新しい方でも心配しないでください。基本から始めて、段階的に進めます。では、コーヒー（またはお気に入りの飲み物）を用意して、始めましょう！
Window History Object
HistoryオブジェクトはJavaScriptのWindowオブジェクトの一部です。ブラウザの履歴をナビゲートすることができ、ブラウザのバックとフォワードボタンをクリックするのと同じです。ウェブブラウジングのタイムマシンだと思ってください！
簡単な例から始めましょう：
console.log(window.history.length);このコードは、現在のタブのブラウザ履歴のページ数を表示します。新しいタブを開いてこのコードを実行すると、おそらく1が表示され、現在のページを示します。
では、これはどのように役立つのでしょうか？ウェブアプリケーションを構築していると、ユーザーがどれだけのページを訪れたかを知りたいと思うかもしれません。この情報は、ユーザーが多くのページをナビゲートした場合に「スタートに戻る」ボタンを提供するなど、より良いユーザー体験を作成するのに役立ちます。
History Object Methods
Historyオブジェクトには、ブラウザの履歴を操作するいくつかのメソッドが含まれています。最もよく使われるものを見てみましょう：
| メソッド | 説明 |
|---|---|
| back() | 履歴の前のページをロード |
| forward() | 履歴の次のページをロード |
| go() | 履歴の特定のページをロード |
これらのメソッドは、ブラウザの履歴の历史を案内する個人的なガイドのようです。それぞれを詳細に見てみましょう！
JavaScript History back() Method
back()メソッドは、ブラウザのバックボタンを押すのと同じです。履歴の前のページに移動します。
以下のように使用します：
function goBack() {
window.history.back();
}ウェブページにボタンがあるとします：
<button onclick="goBack()">戻る</button>ユーザーがこのボタンをクリックすると、前の訪れたページに移動します。まるでユーザーに「タイムトラベル」ボタンを提供して、先ほどいたページに戻れるようにするのです！
しかし、前のページが存在しない場合（例えば、これが最初のページの場合）、何も起こらないことを覚えておきましょう。ユーザーインターフェースを設計する際に、これは常に考慮に入れてください。
JavaScript History forward() Method
forward()メソッドはback()の逆です。ブラウザのフォワードボタンをクリックするのと同じで、履歴の次のページに移動します（もしあれば）。
以下のように使用します：
function goForward() {
window.history.forward();
}そして以下のようなボタンがあります：
<button onclick="goForward()">進む</button>これは、複数ステップのフォームやチュートリアルなどで、ユーザーが誤ってバックした場合に進むオプションを提供するのに役立ちます。
JavaScript History go() Method
go()メソッドは履歴ナビゲーションのスイスアーミーナイフです。履歴の特定のポイントに進むことも戻ることもできます。
基本的なシンタックスは以下の通りです：
window.history.go(number);numberパラメータはブラウザにどれだけのページを移動するかを指示します：
- 正の数は前に進む
- 負の数は後ろに戻る
- ゼロは現在のページをリロードする
いくつかの例を見てみましょう：
// 1ページ後ろに戻る（back()と同じ）
window.history.go(-1);
// 1ページ前に進む（forward()と同じ）
window.history.go(1);
// 2ページ後ろに戻る
window.history.go(-2);
// 現在のページをリロードする
window.history.go(0);ウェブアプリケーションでの実用的な例：
function navigateHistory(steps) {
window.history.go(steps);
}そしてHTMLでは：
<button onclick="navigateHistory(-2)">2ページ戻る</button>
<button onclick="navigateHistory(1)">1ページ進む</button>
<button onclick="navigateHistory(0)">ページをリロード</button>これにより、ユーザーはブラウジング体験をより多くのコントロールでき、複数ページを一度にジャンプするか、現在のページを迅速にリロードすることができます。
go()メソッドは、履歴にページがある場合にのみ動作します。最新のページにいる場合に前に進もうとしたり、最初のページにいる場合に後ろに戻ろうとした場合、何も起こらないことを覚えておいてください。
結論として、Historyオブジェクトは、よりインタラクティブでユーザーフレンドリーなウェブアプリケーションを作成するための強力なツールです。これらのメソッドを理解し、活用することで、ユーザーにブラウジング体験のコントロールを与え、スムーズで直感的なナビゲーションを作成することができます。
ウェブ開発の旅を続ける中で、JavaScriptのさらに興味深い機能が多くあります。練習を続け、好奇心を持ち続け、忘れてはならないのは、すべての専門家もかつては初心者だったことです。ハッピーコーディング！
Credits: Image by storyset