# HTMLのみで作る戻るボタンの作り方

###### tags: `WebCamp/F`

検索KW：html 戻るボタン

## ブラウザの戻るボタンの仕組み

Webブラウザはページ閲覧の履歴を持っており、
戻ると進むボタンを使うことで直前に閲覧していたページに戻ることが可能です。

このブラウザの動作をHTMLでも実現することができます。

## HTMLで前のページに戻る方法

ブラウザではなく、HTMLのボタンを押したら前のページに戻るためには、
JavaScriptを活用することで実現できます。

### サンプルコード

buttonを利用した戻るボタンの作成例を紹介します。

<button type="button" onclick="history.back()">前のページへ戻る</button>

#### onclick属性

onclickは、ボタンクリック時に実行するJavaScriptを指定するために利用します。

#### history.back()コマンド

historyオブジェクトはJavaSiptからブラウザの閲覧履歴へアクセスするために利用します。

#### 複数回のバックを一度に行う方法

history.backの引数に数値を入れることで、直前だけでなく、別のページへも遷移できます。

たとえば、``history.back(-2)``だと2ページ戻ります。

## リンク（aタグ）を使って戻るボタンを実現するには

aタグはリンクを実現するために利用しますが、同様に戻るボタンの実現も可能です。

<a href="#" onclick="history.back(); return false;">前のページへ戻る</a>

ただし、button要素で実行するのと異なり、すこし注意が必要です。

注意すべきポイントは次の2点です。

- hrefに``#``を指定する
- onclickに``return false;``を追加する

aタグは、ブラウザに対してページ遷移を行うために利用します。

リンクがクリックされた場合には、

1. onclickイベントがあればそれを実行する
2. hrefに指定したリンクへ遷移する

の順番で処理が実施されるため、1の処理結果に関わらず2のリンク遷移が起動してしまいます。

``onclick``の最後に``return false;``を記載することで、2の処理が行われるのを防止します。

このテクニックは様々な場合に応用できますので、ぜひ覚えておくと良いでしょう。

## ブラウザの戻るボタンを無効にするには？

さいごに、ブラウザの戻るボタンを無効にし、HTMLのボタンを使わないと戻れないようにする方法を紹介します。

ブラウザによるバックを防止するにはJavaScriptをうまく活用することで実現できます。

HTMLの任意の場所に以下のコードをコピペするだけで簡単に戻るボタンを無効化できます。

<script>
// 偽の履歴を注入
history.pushState(null, null, null);

// ブラウザの戻るボタンが押された場合の処理
$(window).on('popstate', (e) => {
  // 偽の履歴を注入
  history.pushState(null, null, null);
});
</script>

``history.pushState``を利用することで、ブラウザが表示していない履歴をブラウザに強制的に認識させます。

ただし、この方法を使うとブラウザの挙動を制限することになり、結果的にユーザビリティに悪影響を及ぼします。
ブログなどの一般向けのサイトでは多用しないよう注意しましょう。

## さいごに

HTMLを用いた戻るボタンの実現方法を紹介しました。

Webブラウザの操作をHTMLからも実現できますので、ぜひ活用してみてください。