コピペで使える!JavaScriptでリダイレクトする方法

5-Nov-09-2023-04-24-51-2604-AM

🎬初めに

お久しぶりです!!フューチャースピリッツ、エンジニアブログの中の人、「通行人 R」でございます。

「JavaScript」でリダイレクトを行いたいと思ったことはございませんか？

実は少ないコードでとっても簡単にリダイレクトする事ができます!

シリーズ第二回目は「JavaScriptで別ページへリダイレクトする方法」について皆様にお届け致します!!

📘リダイレクトとは？

6-Nov-09-2023-04-28-15-6764-AM

初めにリダイレクトとは？について簡単に説明させていただきます!!

リダイレクトとは現在のWebページから別のページに自動的に転送するプロセスとなります。

例としてAページにアクセスした際に自動的にBページにページ推移させる処理がリダイレクトにあたります。

近年ではhttpでの非暗号アクセスをhttps(SSL通信)等へリダイレクトする設定が多くみられます。

リダイレクトを使用する事で条件に合わせて動的に異なるページへ推移を行う事ができます。

リダイレクトの実装方法

リダイレクトは様々な方法で行う事ができます。

下記代表的な例となります。

.htaccessを使用する
PHPやJavaScript等のプログラム言語を使用する
HTMLのmeta要素を使用した自動リダイレクト

今回は上記2番のJavaScriptを使用したリダイレクト方法の解説を行わせて頂きます!

📘ボタンクリックイベント実装方法

7-1

ここまでお付き合い頂きありがとうございます!!

それでは、リダイレクト方法について解説させていただきます!

URlを書き換える

JavaScriptでリダイレクトを行うには「window.location.href」を使用し現在のURlを書き換える事でリダイレクトを実行できます。

下記のように「window.location.href」に対してリダイレクト先の値を格納する事で実装可能です。

#JavaScript

window.location.href = '任意のURL';

また格納する値は相対パス、絶対パスのどちらも記入する事ができます。

#JavaScript

#相対パス
window.location.href = 'indexhtml';

#絶対パス
window.location.href = 'https://www.future-s.com/index.php';

「location.href」の詳細はmozillaドキュメントに記載されておりますのでご確認よろしくお願い致します。

location.href詳細

完成コード

下記が完全コードとなります。

今回は例としてボタンクリック時の処理にブログページへのリダイレクト機能を実装しました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptでリダイレクトする方法</title>
</head>
<body>
    <button id="test1">リダイレクト</button>
    <script>
        const BUTTON_CLICK_EVENT= document.getElementById('test1');
        BUTTON_CLICK_EVENT.addEventListener('click', () => {
            window.location.href = 'https://blog.future.ad.jp/コピペで使える!javascriptでリダイレクトする方法';
        });
    </script>
</body>
</html>