トップレベルナビゲーション(Top-Level Navigation)とは？分かりやすく解説！

ウェブサイトを閲覧していると、リンクをクリックしたり新しいページに移動したりすることがあります。こうしたナビゲーションは『トップレベルナビゲーション』と呼ばれます。

この記事では『トップレベルナビゲーション』について、

• トップレベルナビゲーションとは
• トップレベルナビゲーションの具体例
• トップレベルナビゲーションでない場合の具体例

などを分かりやすく説明するように心掛けています。ご参考になれば幸いです。

トップレベルナビゲーションとは

トップレベルナビゲーション(Top-Level Navigation)とは、ウェブブラウザのアドレスバーに表示されているURLが変更されるナビゲーションのことです。具体的には、ユーザーがリンクをクリックすることで、新しいページに移動し、ウェブブラウザのアドレスバーに新しいURLが表示される場合を指します。

トップレベルナビゲーションの特徴

トップレベルナビゲーションの特徴を以下に示します。

• URLの変更
  • ウェブブラウザのアドレスバーに表示されるURLが新しいページのURLに変わります。これにより、ユーザーは現在表示しているページのアドレスを確認できます。
• ブラウザ履歴の更新
  • 新しいURLがブラウザの履歴に追加されます。これにより、ユーザーは「戻る」ボタンを使って前のページに簡単に戻ることができます。
• 完全なページリロード
  • トップレベルナビゲーションは通常、完全なページリロードを伴います。つまり、新しいページ全体が読み込まれ、表示されます。

トップレベルナビゲーションでない場合の具体例

例えば、現在「http://hogehoge.com/」のページを見ているとします。このページで以下のようなJavaScriptのコードが実行された場合を考えてみましょう。

fetch("http://foofoo.com/")
  .then(response => response.json())
  .then(data => console.log(data));

上記のコードは「http://foofoo.com/」にリクエストを送りますが、ウェブブラウザのアドレスバーのURLは「http://hogehoge.com/」のままなので、トップレベルナビゲーションではなく、ページのコンテンツだけがバックグラウンドで取得されます。

本記事のまとめ

この記事では『トップレベルナビゲーション』について、以下の内容を説明しました。

• トップレベルナビゲーションとは
• トップレベルナビゲーションの具体例
• トップレベルナビゲーションでない場合の具体例

お読み頂きありがとうございました。