ウェブサイトに必須！HTMLの戻るボタンを実装するコードと書き方

By /

ウェブサイトに必須！HTMLの戻るボタンを実装するコードと書き方

ウェブサイトを訪れるユーザーが、目的地へスムーズにたどり着き、サイト内で快適に移動できるかどうかは、そのサイトの成功を大きく左右します。優れたナビゲーションは、ユーザー体験（UX）を向上させ、離脱率を低下させ、コンバージョン率を高めるための鍵となります。

ナビゲーション要素の中でも、特に重要でありながら、その実装やデザインに配慮が欠かせないのが「戻る」ボタンです。ブラウザには標準で戻る機能が備わっていますが、ウェブサイト独自に「戻る」ボタンを設置することで、ユーザーに対してより直感的で分かりやすい操作を提供できる場面が多く存在します。

この記事では、ウェブサイトに独自の「戻る」ボタンを実装するために必要なHTMLとJavaScriptの基本的なコードから、より高度な実装、デザイン、配置、アクセシビリティへの配慮、そしてよくある問題の解決方法まで、網羅的かつ詳細に解説します。約5000語に及ぶこの解説を通じて、「戻る」ボタン実装のすべてを理解し、あなたのウェブサイトのユーザビリティを飛躍的に向上させる一助となれば幸いです。

1. なぜ「戻る」ボタンがウェブサイトに必須なのか？その重要性

ブラウザに標準搭載されている「戻る」ボタンがあるにも関わらず、なぜウェブサイト運営者は独自の「戻る」ボタンを設置することを検討するのでしょうか？それにはいくつかの明確な理由があります。

1.1. ユーザーにとって分かりやすいナビゲーションの提供

ユーザーはウェブサイトを閲覧する際に、自分がどこにいて、どこから来たのかを常に把握したいと考えています。ブラウザの「戻る」ボタンは便利ですが、常に画面の同じ位置にあるとは限らず、特にモバイルデバイスでは操作しにくい場合もあります。また、特定の操作（例: フォーム入力、検索結果のフィルタリング）の直前に戻りたい場合など、サイト固有の文脈で「戻る」という操作を提供することで、ユーザーは迷うことなく目的のページや状態に戻ることができます。ウェブサイト内に明示的に「戻る」ボタンを配置することで、ユーザーは次に取るべき行動を容易に認識できます。

1.2. 離脱率の低下と回遊性の向上

ユーザーがウェブサイト内で迷子になったり、期待した情報が見つからなかったりすると、すぐにサイトから離脱してしまう可能性が高まります。特に複雑な構造を持つサイトや、購入プロセス、会員登録フローのようなステップが複数ある場合、明確な「戻る」手段がないと、ユーザーは簡単に諦めてしまいます。独自の「戻る」ボタンは、ユーザーが直前のページやステップに戻ることを容易にし、サイト内での移動をサポートします。これにより、ユーザーは安心してサイト内を探索できるようになり、結果として離脱率の低下と回遊性の向上に繋がります。

1.3. モバイルデバイスにおける操作性の改善

スマートフォンの普及により、ウェブサイトの閲覧はモバイルデバイスが主流となっています。モバイルブラウザの「戻る」ボタンは、ジェスチャー操作であったり、画面下部に表示されたりと、デバイスやブラウザによって位置や操作方法が異なります。また、画面の小さいモバイルデバイスでは、ブラウザのUI要素が画面の一部を占有することが、コンテンツ閲覧の妨げになることもあります。ウェブサイト内に大きく分かりやすい「戻る」ボタンを配置することで、モバイルユーザーはストレスなく前の画面に戻ることができ、操作性が格段に向上します。特に、アプリのような感覚で操作できるモバイルフレンドリーなUIを提供する上で、サイト内「戻る」ボタンは効果的です。

1.4. 特定のページからの意図的な遷移を促す

例えば、ある特集記事を読んだ後、ユーザーをその記事が掲載されているカテゴリ一覧ページに戻したい場合など、単に「一つ前のページに戻る」だけでなく、特定のページに誘導したいことがあります。ブラウザの「戻る」ボタンは文字通り直前のページに戻りますが、ウェブサイトが提供する「戻る」ボタンであれば、JavaScriptを使って「一つ前のページ」ではなく「指定したカテゴリページ」に戻るように実装することも可能です（これは厳密には「戻る」ではなく「リンク」ですが、ユーザーにとっては文脈的に「前の状態に戻る」と認識される場合があります）。このように、ユーザーの次の行動をある程度コントロールし、サイト運営者の意図した動線に乗せることが可能になります。ただし、これはユーザーの期待を裏切らないように慎重に設計する必要があります。

1.5. アクセシビリティへの配慮

ウェブサイトを誰でも利用できるようにすることは非常に重要です。独自の「戻る」ボタンを設けることは、キーボード操作やスクリーンリーダーを利用するユーザーにとっても有用です。ブラウザの「戻る」機能は、キーボードショートカットで利用できる場合が多いですが、視覚的に「戻る」ボタンが存在し、それがタブキーでフォーカス可能で、スクリーンリーダーがその役割（例:「戻るボタン」）を正しく読み上げることができれば、より多くのユーザーが迷うことなくサイトを利用できます。

これらの理由から、特に複雑なウェブサイトや、ユーザーに特定の行動を促したいサイト、モバイルからのアクセスが多いサイトにおいて、独自の「戻る」ボタンは、単なる装飾ではなく、ユーザー体験を向上させるための重要なナビゲーション要素として「必須」と考えられます。

2. 基本的な「戻る」ボタンの実装方法 (HTML & JavaScript)

ウェブサイトに独自の「戻る」ボタンを実装する最も一般的で簡単な方法は、HTML要素とJavaScriptのhistoryオブジェクトを組み合わせることです。ブラウザの履歴を操作するJavaScriptのhistoryオブジェクトには、いくつかの便利なメソッドがあります。その中でも、一つ前のページに戻る機能を持つhistory.back()メソッドが最も頻繁に利用されます。

ここでは、HTML要素としてbuttonとaを使用し、それぞれにhistory.back()を割り当てる基本的な方法を見ていきましょう。

2.1. button要素を使った実装

button要素は、クリック可能なインタラクティブな要素であり、ユーザーが何らかの操作を行うためのセマンティクス（意味合い）に適しています。「戻る」という操作はまさにインタラクティブなアクションなので、button要素は適切な選択肢の一つです。

コード例:

“`html






戻るボタン（button要素）の例


戻るボタン（button要素）の実装例

このページは例として表示しています。

以下のボタンをクリックすると、一つ前のページに戻ります。



“`

解説:

  1. HTML (<button id="backButton" type="button">前のページに戻る</button>):
    • button要素を作成しています。
    • id="backButton"を付与することで、JavaScriptからこの要素を簡単に特定できるようにしています。
    • type="button"を指定しています。これは非常に重要です。button要素のデフォルトのtypeはsubmitであることが多く、特にフォーム内に配置した場合、意図しないフォーム送信を引き起こす可能性があります。type="button"と明示することで、ボタンがフォーム送信以外の目的で使用されることを示します。
    • ボタンの表示テキストは「前のページに戻る」としています。ユーザーに分かりやすいラベルを付けることが重要です。
  2. JavaScript (<script>...</script>):
    • document.getElementById('backButton')を使って、先ほどHTMLで定義したIDを持つボタン要素を取得します。
    • 取得した要素（backButton）に対して、addEventListener('click', function() { ... });を使ってクリックイベントリスナーを設定しています。これは、「このボタンがクリックされたら、指定した関数を実行してください」という意味です。
    • イベントリスナーの中で実行される関数は、history.back();というコードを含んでいます。
  3. history.back():
    • これはJavaScriptのwindow.historyオブジェクトが提供するメソッドです。
    • このメソッドが呼び出されると、ブラウザは現在のセッション履歴の直前のエントリに移動します。これは、ユーザーがブラウザの「戻る」ボタンをクリックした場合と同じ挙動です。

メリット:

  • セマンティクス的に適切 (buttonはアクションを示す)。
  • デフォルトでキーボード操作（Tabキーでのフォーカス、Enter/Spaceキーでの実行）に対応しているため、アクセシビリティが高い。
  • JavaScriptを分離して記述できるため、保守性が向上する（後述）。

デメリット:

  • デフォルトのスタイルがブラウザによって異なるため、CSSでスタイルをリセット・調整する必要がある。

2.2. a要素を使った実装

a要素は本来、他のリソース（別のページやファイル）へのリンクを作成するために使用されます。しかし、CSSで装飾することでボタンのように見せることが可能であり、かつてはJavaScriptと組み合わせてインタラクティブな要素として利用されることもありました。

コード例（インラインJavaScript）:

“`html






戻るボタン（a要素 + インラインJS）の例


戻るボタン（a要素 + インラインJS）の実装例

このページは例として表示しています。

以下のリンクをクリックすると、一つ前のページに戻ります。


戻る


“`

解説:

  1. HTML (<a href="javascript:history.back()" class="back-link-button">戻る</a>):
    • a要素を作成しています。
    • href属性にjavascript:history.back()という擬似プロトコルを指定しています。これにより、このリンクがクリックされたときに、history.back()というJavaScriptコードが実行されます。
    • class="back-link-button"は、CSSでこのリンクをボタンのように装飾するためのクラスです。
  2. CSS (.back-link-button {...}):
    • display: inline-block;は、a要素をブロック要素のように扱いつつ、他の要素と横に並べるために使用します。パディングやマージンを上下左右に設定できるようになります。
    • text-decoration: none;は、リンクの下線を消すためによく使われます。
    • その他のスタイルは、リンクをボタンのように見せるための装飾です。
  3. javascript:history.back():
    • これはURIスキーム（擬似プロトコル）の一つで、ブラウザに指定されたJavaScriptコードを実行させます。
    • history.back()は、前述のとおりブラウザの履歴を一つ戻るメソッドです。

メリット:

  • CSSで比較的自由にデザインしやすい（ブラウザごとのデフォルトスタイルの影響がbuttonより少ない場合がある）。

デメリット:

  • セマンティクス的にはリンクであり、操作ボタンとしては不適切。
  • href="javascript:..."は現代のウェブ開発では非推奨とされています。主な理由として、Content Security Policy (CSP) によってブロックされる可能性があること、JavaScriptが無効な環境で何も機能しないこと、検索エンジンがリンクとして認識できないことなどが挙げられます。
  • キーボード操作やスクリーンリーダーでの扱いにbutton要素ほどの恩恵がない場合がある（role="button"などのARIA属性で補う必要が生じる）。

どちらを選ぶべきか？

特別な理由がない限り、button要素を使用し、JavaScriptのイベントリスナーでhistory.back()を呼び出す方法を強く推奨します。これはセマンティクス、アクセシビリティ、そして現代のウェブ開発のベストプラクティスに沿った方法だからです。a要素をボタンのように見せるのはCSSのテクニックであり、本来の用途とは異なります。デザインはCSSでbutton要素にも適用可能です。

以降では、主にbutton要素を使った、より洗練された実装方法を中心に解説を進めます。

3. JavaScript historyオブジェクトの詳細

「戻る」ボタンの実装において中心的な役割を果たすのが、JavaScriptのwindow.historyオブジェクトです。このオブジェクトは、現在のウィンドウまたはフレームにおけるセッション履歴（ユーザーが訪れたページのリスト）へのアクセスを提供します。セキュリティ上の制限から、個々の履歴エントリのURLに直接アクセスすることはできませんが、履歴内を移動する機能などが提供されています。

historyオブジェクトの主なメソッドとプロパティを見ていきましょう。

3.1. history.back()

前述の通り、現在のエントリの直前の履歴エントリに非同期的に移動します。これは、ユーザーがブラウザの戻るボタンをクリックした場合と全く同じ挙動です。

  • 構文: history.back();
  • 引数: なし
  • 戻り値: なし
  • 挙動: 履歴を1つ戻ります。もし履歴の先頭（つまり、現在のページがセッション履歴の最初のページ）である場合、back()を呼び出しても何も起こりません。エラーも発生しません。

このシンプルさが、最も一般的な戻るボタン実装にhistory.back()が使われる理由です。ユーザーは通常、直前に見ていたページに戻りたいと考えるため、このメソッドがユーザーの期待に最も合致します。

3.2. history.forward()

現在のエントリの直後の履歴エントリに非同期的に移動します。これは、ユーザーがブラウザの進むボタンをクリックした場合と同じ挙動です。

  • 構文: history.forward();
  • 引数: なし
  • 戻り値: なし
  • 挙動: 履歴を1つ進みます。もし履歴の末尾（戻る操作をした後などに存在する）である場合、forward()を呼び出しても何も起こりません。エラーも発生しません。

ウェブサイトによっては、「戻る」「進む」のペアでボタンを提供する場合があります。その際にhistory.forward()が利用されます。

3.3. history.go(delta)

指定した数だけ履歴内を移動します。deltaは整数で、正の値は未来（進む）、負の値は過去（戻る）を示します。

  • 構文: history.go(delta);
  • 引数: delta (整数) – 移動する履歴の数。
    • delta = 1 は history.forward() と同じ。
    • delta = -1 は history.back() と同じ。
    • delta = 0 は現在のページをリロードする (location.reload() と似ているが、履歴に新しいエントリは追加されない点が異なる)。
    • delta > 1 は複数ページ進む。
    • delta < -1 は複数ページ戻る。
  • 戻り値: なし
  • 挙動: 指定された履歴エントリが存在すればそこに移動します。存在しない場合（例えば、履歴の先頭からさらに戻ろうとした場合）、何も起こりません。エラーは発生しません。

history.go()を使うことで、単に一つ前に戻るだけでなく、「二つ前のページに戻る」（history.go(-2)）といった、より複雑な履歴操作が可能になります。ただし、ユーザーがどのページを訪れたかをウェブサイト側で完全に把握しているわけではないため、安易に-2や-3のような指定をすると、ユーザーの予期しないページに遷移する可能性があります。特別な理由がない限り、-1（history.back()）を使用するのが最も安全で一般的です。

コード例 (history.go)

“`javascript
// 2ページ前に戻るボタンの場合
document.getElementById(‘backTwoPagesButton’).addEventListener(‘click’, function() {
history.go(-2);
});

// 1ページ進むボタンの場合
document.getElementById(‘forwardButton’).addEventListener(‘click’, function() {
history.go(1); // または history.forward();
});
“`

3.4. history.length プロパティ

ブラウザのセッション履歴に含まれるエントリの数を示します。現在のページも含まれます。

  • 構文: history.length
  • 値: 履歴エントリの数を表す整数。最低1（現在のページ）です。

このプロパティは、戻る履歴が存在するかどうかを判断するために使えるように思えるかもしれません（例: if (history.length > 1)）。しかし、このプロパティの正確な値はセキュリティやプライバシーの観点から制限されることがあり、ブラウザやその設定によって実際の履歴数とは異なる値（例えば、常に一定の値や、制限された値）を返すことがあります。 したがって、history.lengthだけを使って「戻る履歴がない場合はボタンを無効にする」といった制御を正確に行うことは推奨されません。ほとんどの場合、戻る履歴がなければhistory.back()を呼び出しても何も起こらないという挙動に任せるのが最も堅牢な方法です。

3.5. history.pushState() / history.replaceState()

これらのメソッドは、現在の履歴エントリを変更したり、新しい履歴エントリを追加したりするために使用されます。これらは、ページ全体の再読み込みなしにコンテンツを動的に変更するSingle Page Application (SPA) などで、ブラウザの履歴を管理するために重要な役割を果たします。

  • pushState(state, title, url): 現在のURLを変更し、新しい履歴エントリを履歴スタックの一番上に追加します。ユーザーがブラウザの戻る/進むボタンを押すと、追加した履歴エントリの状態（state）が取得できます。
  • replaceState(state, title, url): 現在の履歴エントリを置き換えます。新しい履歴エントリは追加されません。

これらのメソッドは、単純な「一つ前のページに戻る」ボタンを実装する際には直接使用しません。しかし、SPA環境で戻るボタンを実装する場合や、より高度な履歴管理が必要な場合には、これらのメソッドと組み合わせて使用する可能性があります。

4. 実践的な戻るボタンの実装例とカスタマイズ

基本的なhistory.back()を使った実装方法を理解したところで、より実践的なコード構成やデザインカスタマイズの方法を見ていきましょう。

4.1. HTMLとJavaScriptを分離した実装（推奨）

セクション2.1で示したbutton要素を使った例では、JavaScriptコードをHTML内の<script>タグ内に直接記述していました。しかし、ウェブサイトが大きくなるにつれて、HTMLファイルとJavaScriptファイルを分離する方が、コードの管理、保守性、再利用性の観点から優れています。

HTML (index.htmlなど):

“`html






戻るボタン（分離JS）の例

戻るボタン（HTML/JS分離）の実装例

このページは例として表示しています。

以下のボタンをクリックすると、一つ前のページに戻ります。





“`

JavaScript (script.js):

“`javascript
// DOMContentLoaded イベントを待つ
// これにより、HTML要素が完全に読み込まれてからスクリプトが実行される
document.addEventListener(‘DOMContentLoaded’, function() {
// ボタン要素を取得
const backButton = document.getElementById(‘backButton’);

// ボタンが存在する場合のみイベントリスナーを設定
if (backButton) {
backButton.addEventListener(‘click’, function() {
// ブラウザの履歴を一つ戻る
history.back();
});
} else {
console.error(“ID ‘backButton’ を持つ要素が見つかりませんでした。”);
}
});
“`

解説:

  • HTMLファイルからJavaScriptコードを分離し、外部ファイル（script.js）として読み込んでいます。
  • DOMContentLoadedイベントリスナーを使用しています。これは、HTMLドキュメントが完全に読み込まれて解析された後に発生するイベントです。これを使用することで、スクリプトが実行される時点でHTML要素（この場合は#backButton）が確実に存在することを保証できます。<script>タグを</body>の直前に置くことでも同様の効果が得られますが、DOMContentLoadedを使用する方がより明示的で安全です。
  • ボタン要素が存在するかどうか（if (backButton)）を確認してからイベントリスナーを設定しています。これにより、もし誤ってHTMLにボタン要素が存在しなかった場合でも、JavaScriptエラーが発生するのを防ぐことができます。
  • console.errorは、デバッグのために要素が見つからなかった場合にコンソールにエラーメッセージを表示します。

この分離された方法は、コードの組織化、保守性、そしてチーム開発において非常に優れています。CSSも同様に分離し、外部ファイル（例: style.css）として読み込むことが一般的です。

4.2. CSSによるデザインのカスタマイズ

独自の「戻る」ボタンを実装する大きな理由の一つは、ウェブサイト全体のデザインに合わせてボタンをカスタマイズできる点です。button要素やa要素に対してCSSを適用することで、見た目を自由に変更できます。

基本的なボタンのスタイル:

“`css
/ style.css /

backButton {

display: inline-block; / ボタンをインラインブロック要素として扱い、幅や高さを設定可能にする /
padding: 10px 20px; / 内側の余白 /
font-size: 16px; / フォントサイズ /
color: #fff; / テキスト色 /
background-color: #007bff; / 背景色 /
border: none; / デフォルトのボーダーを消す /
border-radius: 5px; / 角を丸くする /
cursor: pointer; / マウスカーソルをポインターにする /
text-align: center; / テキストを中央寄せ /
text-decoration: none; / a要素の場合の下線を消す /
line-height: 1.5; / 行の高さ /
/ 要素間のスペースなどを調整 /
margin-top: 20px;
margin-right: 10px; / もし他の要素と並べる場合 /

/ デフォルトのボタンの外観をリセットする場合 /
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}

/ ホバー時のスタイル /

backButton:hover {

background-color: #0056b3;
opacity: 0.9; / 透明度を少し下げる /
}

/ クリック時のスタイル /

backButton:active {

background-color: #004085;
transform: translateY(1px); / 少し沈むように見せる /
}

/ フォーカス時のスタイル（アクセシビリティに重要） /

backButton:focus {

outline: 2px solid #007bff; / ボタンがフォーカスされたときに輪郭を表示 /
outline-offset: 2px; / 輪郭と要素の間に隙間を開ける /
}
“`

解説:

  • display: inline-block;: ボタンを要素として扱いやすくするための定番スタイルです。
  • padding: ボタンの内側の余白を指定し、クリック可能な領域を確保します。
  • border: none;: button要素にデフォルトで付いているボーダーを消します。
  • border-radius: ボタンの角を丸くします。
  • cursor: pointer;: マウスカーソルを、クリックできることを示すポインターに変更します。
  • appearance: none;など: ブラウザごとに異なるデフォルトのボタンの外観をリセットするために使用することがあります。
  • :hover, :active, :focusといった擬似クラスを使って、マウスオーバー時、クリック時、キーボードでフォーカスしたときのスタイルを定義します。:focusスタイルは、キーボード操作でボタンが選択されていることを視覚的に示すために非常に重要です（アクセシビリティ）。

4.3. アイコンを使った戻るボタン

テキストラベルだけでなく、またはテキストラベルの代わりに、アイコンを使って「戻る」操作を示すことは一般的です。アイコンは視覚的に分かりやすく、スペースを節約できます。矢印アイコン（←）がよく使われます。

アイコンをウェブサイトに表示する方法はいくつかあります。

  1. アイコンフォント: Font Awesome, Material Iconsなどが有名です。CSSでフォントとして読み込み、HTMLの特定の要素（通常は<i>や<span>）にクラスを付与して表示します。
  2. SVGアイコン: スケーラブルベクターグラフィックス。HTMLに直接埋め込んだり、<img>タグやCSSのbackground-imageプロパティで表示したりできます。品質が高く、拡大縮小しても劣化しないのが特徴です。
  3. 画像ファイル: PNGやJPGなどの画像ファイルとしてアイコンを用意し、<img>タグで表示します。

ここでは、広く使われているアイコンフォントであるFont Awesomeを使った例を示します。

Font Awesomeを使った例:

  1. Font Awesomeの導入: Font AwesomeのCDN（Content Delivery Network）を利用するのが手軽です。<head>内に以下の行を追加します（バージョンは適宜最新のものを使用してください）。

    html
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    または、Font Awesomeの公式サイトからキットコードを取得し、それを読み込む方法もあります。

  2. HTML: button要素の中にアイコンを表示するための要素（通常は<i>や<span>）を配置します。

    “`html



    ``
    * アイコンのみの場合、視覚障碍のあるユーザーのために    aria-label属性でボタンの役割を説明することが非常に重要です。スクリーンリーダーはこのラベルを読み上げます。
    *    要素にFont Awesomeのクラス（例:fas fa-arrow-left）を指定しています。fas`はSolidスタイルのアイコンを示します。

  3. CSS: アイコンのサイズや色を調整したり、アイコンとテキストの間隔を調整したりします。

    “`css
    / style.css /

    / アイコンのみのボタンのスタイル /

    backButtonIconOnly {

    display: inline-flex; / Flexboxを使ってアイコンを中央寄せしやすくする /
    align-items: center; / 垂直方向の中央寄せ /
    justify-content: center; / 水平方向の中央寄せ /
    width: 40px; / 正方形にする /
    height: 40px;
    padding: 0; / パディングをリセット /
    font-size: 20px; / アイコンのサイズ /
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 50%; / 丸いボタンにする /
    cursor: pointer;
    margin-top: 20px;
    }

    / アイコンとテキストの組み合わせボタンのスタイル /

    backButtonIconText {

    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
    }

    / アイコンとテキストの間隔 /

    backButtonIconText i {

    margin-right: 8px; / アイコンの右側にスペースを空ける /
    }

    / ホバー、アクティブ、フォーカススタイルは基本的なボタンと同様に設定 /

    backButtonIconOnly:hover,

    backButtonIconText:hover {

    background-color: #0056b3;
    opacity: 0.9;
    }

    backButtonIconOnly:active,

    backButtonIconText:active {

    background-color: #004085;
    transform: translateY(1px);
    }

    backButtonIconOnly:focus,

    backButtonIconText:focus {

    outline: 2px solid #007bff;
    outline-offset: 2px;
    }
    ``
    *    display: inline-flex; align-items: center; justify-content: center;を使うと、ボタンの中身（アイコンやテキスト）を簡単に中央寄せできます。
    * アイコンフォントのサイズは    font-sizeで、色はcolorで指定します。
    * アイコンとテキストの間にスペースを開けるには、アイコン要素（    i）にmargin-right`を指定します。

  4. JavaScript: JavaScriptコードは、history.back()を呼び出す基本的な実装と同じです。ボタン要素を取得し、クリックイベントリスナーを追加します。

    “`javascript
    document.addEventListener(‘DOMContentLoaded’, function() {
    const backButtonIconOnly = document.getElementById(‘backButtonIconOnly’);
    if (backButtonIconOnly) {
    backButtonIconOnly.addEventListener(‘click’, function() {
    history.back();
    });
    }

    const backButtonIconText = document.getElementById(‘backButtonIconText’);
    if (backButtonIconText) {
    backButtonIconText.addEventListener(‘click’, function() {
    history.back();
    });
    }
    });
    “`

アイコンを使用することで、視覚的に魅力的で分かりやすい「戻る」ボタンを作成できます。ただし、アイコンのみにする場合は、その意味がユーザーにとって明確であることを確認し、アクセシビリティのためにaria-labelを忘れずに設定することが重要です。テキストとアイコンを組み合わせるのが最も分かりやすく、幅広いユーザーに優しいアプローチと言えます。

4.4. 戻る履歴がない場合の挙動制御（注意点）

前述の通り、history.back()は履歴がない場合、何もしません。これは多くの場合望ましい挙動です。しかし、例えばサイトのトップページに直接アクセスした場合など、戻る履歴が存在しないページでは「戻る」ボタンを表示したくない、あるいは無効にしたい、といった要望があるかもしれません。

history.lengthプロパティは履歴の数を返しますが、その正確性は保証されないため、これを使って戻る履歴の有無を判定し、ボタンの表示/非表示や有効/無効を切り替えるのは推奨されません。

では、どのように制御すれば良いのでしょうか？

最も一般的で堅牢なアプローチは、「戻る履歴がない場合でもボタンは表示したままにし、クリックされても何も起こらない（デフォルトのhistory.back()の挙動に任せる）」ことです。ユーザーがボタンをクリックしたのに何も起こらないのはUXとして少し劣るかもしれませんが、誤った履歴数に基づいた表示制御よりも、常にボタンが存在する方がユーザーを混乱させないという考え方です。

もしどうしても制御したい場合は、いくつかの方法が考えられますが、それぞれにトレードオフがあります。

  • JavaScriptで直前のURLを記録する方法: セッションストレージ (sessionStorage) やCookieを使って、ユーザーがページ遷移するたびに直前のページのURLを記録しておき、現在のページにアクセスした際に直前のURLが存在するかどうかで戻るボタンの表示/非表示を切り替える方法です。この方法は複雑で、すべてのページ遷移（特にフォーム送信やリダイレクト）をトラッキングする必要があります。また、ブラウザの「戻る」ボタンで戻ってきた場合の挙動など、考慮すべき点が非常に多いです。
  • HTTPリファラー（Referer）を利用する方法: サーバーサイドで、HTTPリクエストヘッダーに含まれるReferer情報を確認し、直前のページのURLが存在するかどうかを判定する方法です。存在しない場合（例: 直接アクセス、別のサイトからリンク）、戻るボタンをレンダリングしないといった制御が可能です。ただし、Refererヘッダーはプライバシー保護のために送信されない場合があったり、一部のユーザーエージェントや設定で無効化されていたりするため、完全に信頼できる情報ではありません。また、これはサーバーサイドの知識が必要です。

結論として、特別な理由がない限り、history.back()のデフォルトの挙動に任せるのが、最もシンプルで堅牢な戻るボタンの実装方法です。戻る履歴がないページではボタンを表示しない、という厳密な制御は、実装の複雑さに見合うだけのUX上のメリットが得られるか、慎重に検討する必要があります。

もし表示・非表示を制御する場合は、ボタン要素にCSSのdisplay: none;やvisibility: hidden;を適用するか、JavaScriptで要素自体をDOMから削除/追加することで実現します。ボタンを無効にする場合は、disabled属性を付与します。

“`javascript
// あくまで例であり、正確な履歴判定は困難であることを理解して使用する
document.addEventListener(‘DOMContentLoaded’, function() {
const backButton = document.getElementById(‘backButton’);

// history.length は信頼できないが、例として
// if (history.length <= 1) {
// if (backButton) {
// backButton.style.display = ‘none’; // ボタンを非表示にする
// // または backButton.disabled = true; // ボタンを無効にする
// }
// } else {
// if (backButton) {
// backButton.addEventListener(‘click’, function() {
// history.back();
// });
// }
// }

// 基本的にはこのシンプルさが推奨される
if (backButton) {
backButton.addEventListener(‘click’, function() {
history.back();
});
}
});
“`

5. デザインと配置のベストプラクティス

「戻る」ボタンは、単に機能すれば良いというものではありません。どこに配置するか、どのようなデザインにするかは、ユーザーがボタンを認識し、利用しやすさに大きく影響します。

5.1. 理想的な配置場所

「戻る」ボタンの最適な配置場所は、ウェブサイトの構造、ページのタイプ、ターゲットユーザーの行動によって異なります。一般的な候補としては以下が挙げられます。

  • ヘッダー内: グローバルナビゲーションの一部として、サイトのロゴやタイトルなどの近くに配置する方法です。ユーザーはページの最上部を見る傾向があるため、多くのページで共通して表示される「戻る」ボタンとしては効果的です。特にモバイルサイトでは、固定ヘッダーに配置されることが多いです。
  • コンテンツの上部: 記事ページ、商品詳細ページ、フォームページなど、特定のコンテンツエリアの開始地点の近くに配置する方法です。ユーザーがコンテンツを読み始める前、またはコンテンツを読み終えた後に、次の行動を選択するタイミングで見つけやすいです。
  • 特定のコンポーネント内: 検索結果のフィルターや、モーダルウィンドウ、ポップアップ内など、特定のUIコンポーネントを開いたユーザーが、元の状態に戻るためのボタンとして配置します。この場合、そのコンポーネントを閉じる「閉じる」ボタンと兼ねていることもあります。
  • フッター内: あまり一般的ではありませんが、ページの最後までスクロールしたユーザーのために配置することもあります。ただし、フッターはユーザーがあまり注意を払わない場所であるため、主要な「戻る」手段としては適していません。

考慮事項:

  • 一貫性: サイト全体で「戻る」ボタンの配置場所とデザインを一貫させることで、ユーザーはサイトの使い方をすぐに理解し、迷いにくくなります。
  • 視認性: 周囲の要素に埋もれず、ユーザーの目に留まりやすいデザインと配置を心がけましょう。他のナビゲーション要素との視覚的なヒエラルキーも考慮します。
  • モバイル対応: スマートフォンの小さな画面では、要素の配置に制約があります。タップしやすい大きさ、指で隠れにくい位置などを考慮し、レスポンシブデザインで配置を調整します。固定ヘッダーやフッターに配置し、常に画面の端に表示しておくのも有効です。

5.2. デザインのポイント

ユーザーが「戻る」ボタンだと瞬時に認識できるデザインが重要です。

  • 形状と大きさ: クリックまたはタップしやすい十分な大きさ（特にモバイルでは44×44ピクセル以上が推奨されることもあります）と、一般的なボタンらしい形状（角丸の四角形など）を選びます。
  • テキストラベル: 「戻る」「前のページへ」「一覧に戻る」など、ボタンの役割を明確に伝えるテキストラベルを含めます。アイコンとテキストを組み合わせるのが最も分かりやすい方法です。
  • アイコン: 左向きの矢印（←）は「戻る」操作の一般的なアイコンです。他の一般的なアイコン（ホームアイコン、検索アイコンなど）と混同されないように注意します。
  • 色: サイトのブランドカラーに合わせつつ、他のインタラクティブな要素（リンクや他のボタン）との区別がつくようにします。ユーザーがクリックできる要素であることを示すために、ホバーエフェクトやアクティブエフェクトを加えるのも効果的です。
  • 状態の視覚化: ボタンが有効か無効か、ホバーされているか、クリックされているかといった状態を、色や形状の変化でユーザーにフィ覚的に伝えます。特にフォーカス時のスタイルは、キーボード操作ユーザーのために必須です。

5.3. ユーザーテストの重要性

あなたが「これは分かりやすい」と思っても、実際にサイトを訪れるユーザーにとってはそうではないかもしれません。可能であれば、異なるユーザーに実際にサイトを使ってもらい、どこで迷うか、ボタンを見つけやすいか、デザインは適切かなどをテストすることをお勧めします。ユーザーからのフィードバックは、デザインや配置を改善するための invaluable な情報源となります。

6. アクセシビリティへの配慮

ウェブアクセシビリティとは、年齢、障がい、使用環境などに関わらず、誰もがウェブサイトの情報や機能にアクセスし、利用できるようにすることです。「戻る」ボタンを実装する際にも、アクセシビリティへの配慮は欠かせません。

6.1. 適切なHTML要素の選択

セクション4でも述べましたが、インタラクティブな要素にはセマンティクス的に適切なHTML要素を使用することが重要です。button要素は、クリック可能なアクションを伴うUI要素として最も適しています。button要素は、ブラウザがデフォルトでキーボード操作（Tabキーでのフォーカス、Enter/Spaceキーでの実行）やスクリーンリーダーへの情報伝達に対応しているため、追加の労力なしに多くのアクセシビリティ要件を満たせます。

もしa要素をボタンとして使う場合でも、role="button"やaria-labelなどのARIA属性を使用し、キーボード操作をJavaScriptで実装するなど、アクセシビリティを確保するための追加の対応が必要です。特別な理由がない限り、button要素の使用が推奨されます。

6.2. キーボード操作への対応

キーボードだけでウェブサイトを操作するユーザー（例えば、マウスの使用が困難な方やスクリーンリーダーのユーザー）は多くいます。button要素は、Tabキーでフォーカスを移動させ、EnterキーまたはSpaceキーでクリック操作を実行できるという、基本的なキーボード操作にデフォルトで対応しています。

重要なのは、ボタンがフォーカスされていることを視覚的に明確に示すことです。ブラウザはデフォルトでアウトラインを表示しますが、CSSでoutline: none;を指定してデフォルトのアウトラインを消してしまう場合は、:focus擬似クラスを使って独自のフォーカスインジケーター（例: ボーダー、シャドウ）を必ず設定してください。

“`css
/ style.css /

backButton:focus {

/ デフォルトのアウトラインを消している場合、必ず代替手段を用意する /
outline: none; / これは推奨されない場合が多い /
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); / フォーカスリングの例 /
border-color: #007bff; / ボーダー色を変える例 /
}
“`

6.3. スクリーンリーダーへの対応

スクリーンリーダーは、ウェブサイトの情報を音声で読み上げることで、視覚障碍のあるユーザーがコンテンツを理解し、操作できるようにします。スクリーンリーダーはHTMLのセマンティクスやARIA属性を解釈して情報を伝えます。

  • 適切な要素: button要素は、スクリーンリーダーに対して「これはボタンである」と正しく伝わります。
  • テキストラベル: ボタンのテキストラベル（例: 「前のページに戻る」）は、スクリーンリーダーによって読み上げられます。アイコンのみのボタンの場合、aria-label属性を使ってボタンの目的を説明する必要があります。
    html
    <!-- アイコンのみのボタン -->
    <button type="button" aria-label="前のページに戻る">
    <i class="fas fa-arrow-left"></i>
    </button>
    aria-label属性の値は、スクリーンリーダーが読み上げる内容となります。

  • 非表示要素の扱い: アイコンとテキストを組み合わせる場合、アイコンを視覚的に重要としつつ、スクリーンリーダーにはテキストのみを読み上げてほしい場合があります。その際は、アイコン要素に対してaria-hidden="true"属性を付与することで、スクリーンリーダーがその要素を無視するように指示できます。

    html
    <button type="button">
    <i class="fas fa-arrow-left" aria-hidden="true"></i>
    <span class="button-text">戻る</span> <!-- テキストは別途spanなどで囲む -->
    </button>
    この場合、CSSで.button-textクラスを視覚的に非表示にし、アイコンのみを表示するというテクニックもありますが、一般的にはアイコンとテキストを両方表示するのが最も分かりやすいとされています。

6.4. コントラスト比

ボタンのテキストやアイコンの色と、背景色のコントラスト比が十分に高いことを確認します。WCAG（Web Content Accessibility Guidelines）では、通常のテキストに対しては4.5:1以上、大きなテキストに対しては3:1以上のコントラスト比が推奨されています。コントラスト比チェッカーツールを使って確認できます。

6.5. 十分なクリック領域

特にモバイルデバイスでは、指で正確にタップするために、ボタンのクリック領域が十分な大きさであることが重要です。CSSでpaddingプロパティを使って、ボタンのコンテンツ（テキストやアイコン）だけでなく、その周囲にも十分な余白を設けることで、クリックしやすい領域を確保できます。

7. JavaScriptが無効な環境への対応とSPAでの考慮事項

7.1. JavaScriptが無効な場合

現代のウェブサイトにおいて、JavaScriptが有効であることはほぼ前提となっていますが、セキュリティ設定や特定のブラウザ、古い環境など、ごくまれにJavaScriptが無効な場合があります。標準のhistory.back()を使った戻るボタンは、JavaScriptが無効な環境では機能しません。

もし、JavaScriptが無効な環境でも何らかの「戻る」機能を提供する必要がある場合、代替策を検討する必要があります。

  • 特定のページへのリンク: 最も簡単な代替策は、a要素を使って特定のページ（例: トップページ、カテゴリ一覧ページ）へ戻るリンクを設定することです。
    “`html

    JavaScriptが無効なため、一部機能が制限されています。

    カテゴリ一覧へ戻る



    ``noscript`タグは、JavaScriptが無効なブラウザでのみ内容が表示されます。ただし、これは「直前のページに戻る」のではなく「指定したページに遷移する」機能になる点に注意が必要です。

  • サーバーサイドでの対応: HTTPリファラーなどを利用して、サーバーサイドで前のページURLを判別し、それが存在する場合のみ通常のリンクとして前のページへのURLを埋め込んでボタンを生成する、といった高度な対応も考えられます。しかし、前述の通りリファラーは信頼性が低いです。

ほとんどの場合、ユーザーはブラウザ標準の「戻る」機能を利用できるため、ウェブサイト独自の「戻る」ボタンがJavaScript無効時に機能しなくても、致命的な問題にならないことが多いです。サイトの重要度やターゲットユーザー層を考慮して、どこまで対応するかを判断しましょう。

7.2. Single Page Application (SPA) における戻るボタン

React、Vue、Angularなどのフレームワークで構築されるSingle Page Application (SPA) は、ページ全体の再読み込みなしにコンテンツを動的に書き換えることで、ネイティブアプリケーションのようなスムーズな操作感を実現します。SPAでは、ブラウザのURLを書き換えたり、履歴を操作したりするためにhistory.pushState()やhistory.replaceState()が頻繁に使用されます。

SPAでは、通常、フレームワークが提供するルーティングライブラリ（例: React Router, Vue Router, Angular Router）がブラウザの履歴管理を担当します。単純なhistory.back()を呼び出すと、SPAの内部状態ではなく、ブラウザの物理的な履歴に従って遷移するため、予期しない挙動を引き起こす可能性があります。

SPAで独自の「戻る」ボタンを実装する場合、多くはルーティングライブラリが提供する履歴操作メソッドを使用します。

例: Vue Router

Vue Routerでは、router.go()メソッドが提供されています。これは内部でブラウザのhistory.go()をラップしており、SPAの履歴管理と連携して動作します。

“`html


“`

javascript
// Vueコンポーネントのメソッド内で
export default {
methods: {
goBack() {
// Vue Routerの履歴を一つ戻る
this.$router.go(-1);
// もしくは this.$router.back(); というメソッドが提供されている場合もあります
}
}
}

例: React Router

React Router (v6) では、useNavigateフックから取得できるnavigate関数を使用します。

“`jsx
// Reactコンポーネントの例
import { useNavigate } from ‘react-router-dom’;

function MyComponent() {
const navigate = useNavigate();

const goBack = () => {
// React Routerの履歴を一つ戻る
navigate(-1);
};

return (

);
}
“`

SPAで戻るボタンを実装する際は、単純なhistory.back()ではなく、使用しているフレームワークやルーティングライブラリのドキュメントを確認し、推奨されている方法で履歴を操作することが非常に重要です。これにより、SPAの状態とブラウザの履歴が正しく同期され、ユーザーは期待通りのページ遷移を体験できます。

8. よくある問題とトラブルシューティング

「戻る」ボタンの実装中に遭遇しやすい問題と、その解決策を見ていきましょう。

8.1. ボタンがクリックしても反応しない、期待通りに動作しない

  • JavaScriptエラーの確認: ブラウザの開発者ツールのコンソールを開き、JavaScriptエラーが発生していないか確認してください。エラーが出ている場合、それがボタンの機能に影響している可能性が高いです。
  • HTML要素の特定ミス: JavaScriptコード内でボタン要素を正しく取得できていますか？getElementByIdを使用している場合、HTMLのid属性の値が正確に一致しているか確認してください。querySelectorやquerySelectorAllを使用している場合は、セレクターが正しいか確認します。
  • イベントリスナーの登録ミス: addEventListenerが正しく記述されていますか？イベントタイプ（'click'）が正しいか、第二引数に関数が渡されているか確認します。
  • JavaScriptファイルの読み込み順序: スクリプトは、操作したいHTML要素がDOMにロードされてから実行される必要があります。DOMContentLoadedイベントを使用するか、<script>タグを</body>の直前に配置することで、要素がロードされる前にスクリプトが実行される問題を回避できます。
  • 別のJavaScriptコードとの競合: サイト内の他のJavaScriptコードが、同じ要素に対して別のイベントリスナーを設定していたり、イベント伝播（Event Bubbling）を停止（event.stopPropagation()）していたりしないか確認します。
  • 非同期処理やリダイレクト: ページ遷移の間にJavaScriptによる非同期処理や自動的なリダイレクトが発生している場合、ブラウザの履歴スタックが予期しない状態になっている可能性があります。特にSPAでは、ルーティングライブラリの設定や実装を確認する必要があります。
  • ボタンが disabled 状態になっていないか: HTMLやJavaScriptでボタン要素にdisabled属性が付与されていると、クリックイベントが発生しません。開発者ツールで要素の状態を確認してください。

8.2. ボタンのデザインがおかしい

  • CSSの適用を確認: 開発者ツールでボタン要素を選択し、「Styles」パネルでどのCSSルールが適用されているか確認します。意図したスタイルが適用されていない場合、セレクターの記述ミス、詳細度による上書き、スタイルの読み込み順序などを確認します。
  • デフォルトスタイルの影響: button要素にはブラウザのデフォルトスタイルが強く適用されることがあります。appearance: none;などを使ってデフォルトスタイルをリセットし、独自のスタイルを適用する必要があります。
  • レイアウト関連の問題: display, position, float, flexbox, gridなどのプロパティが、ボタンのサイズや位置に影響を与えている可能性があります。特にFlexboxやGridコンテナ内にボタンを配置している場合、親要素のプロパティが影響します。
  • アイコンやテキストの表示: アイコンが表示されない場合は、アイコンフォントのCSSが正しく読み込まれているか、HTMLのクラス名が正確か確認します。アイコンとテキストの配置がおかしい場合は、display: flexやmarginなどのプロパティを確認します。
  • ホバー/アクティブ/フォーカススタイルの確認: これらの擬似クラスに対するスタイルが正しく記述されているか確認します。

8.3. モバイルでの挙動がおかしい

  • ビューポート設定: モバイルデバイスでの表示が適切になるように、<head>内に<meta name="viewport" content="width=device-width, initial-scale=1.0">タグが正しく設定されているか確認します。
  • レスポンシブCSS: モバイル画面サイズに対応するためのメディアクエリ（@media）を使ったCSSが正しく記述され、適用されているか確認します。
  • タップ領域: セクション6.5で述べたように、タップしやすい十分な大きさになっているか確認します。
  • 固定要素との兼ね合い: ヘッダーやフッターに固定配置したボタンが、他のコンテンツに重なったり、画面外に飛び出したりしていないか確認します。

9. まとめ

この記事では、ウェブサイトにおける「戻る」ボタンの重要性から、HTMLとJavaScriptを使った基本的な実装方法、historyオブジェクトの詳細、実践的なカスタマイズ方法、デザインや配置の考慮事項、アクセシビリティへの配慮、そしてSPAでの扱い方やトラブルシューティングまで、詳細に解説しました。

「戻る」ボタンは、ユーザーがサイト内で迷うことなく、自分のペースで情報を探索し、必要に応じて前の状態に戻れるようにするための、非常に重要なナビゲーション要素です。ブラウザ標準の機能に依存するだけでなく、ウェブサイト独自の文脈に合わせた「戻る」ボタンを設置することで、ユーザー体験は大きく向上します。

実装においては、button要素とhistory.back()メソッドを組み合わせるのが最も推奨される方法です。HTMLからJavaScriptとCSSを分離することで、コードの保守性と管理性が向上します。デザイン面では、視覚的に分かりやすく、クリックしやすい形状やサイズ、適切なテキストラベルやアイコンの使用、そしてホバーやフォーカスといった状態の視覚化が重要です。配置場所は、サイトの構造やユーザーの行動を考慮し、一貫性を持たせることが肝心です。

さらに、ウェブサイトは多様な環境からアクセスされるため、アクセシビリティへの配慮も忘れてはなりません。適切なHTML要素の選択、キーボード操作への対応、スクリーンリーダーへの情報伝達、十分なコントラスト比とクリック領域の確保は、すべてのユーザーにとって使いやすいウェブサイトを構築するために不可欠です。

この記事で得た知識を活用し、あなたのウェブサイトにユーザーフレンドリーでアクセシブルな「戻る」ボタンを実装してみてください。きっと、ユーザー体験の向上に大きく貢献することでしょう。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール