JavaScriptでページ遷移＆値渡し！5つの使い方を徹底解説

はじめに
●JavaScriptでページ遷移を実現する方法
- ○サンプルコード1：window.locationを使ったページ遷移
- ○サンプルコード2：window.openを使った新しいタブでのページ遷移
●JavaScriptで値渡しを実現する方法
●注意点と対処法
●応用例とサンプルコード
- ○サンプルコード6：ページ遷移と値渡しを組み合わせたフォーム送信
- ○サンプルコード7：ページ遷移と値渡しを利用したログイン認証
●カスタマイズ方法
まとめ

はじめに

この記事を読むことで、JavaScriptを使ったページ遷移と値渡しの方法が身につくでしょう。

初心者の方でもわかりやすいように、使い方や注意点を詳しく解説していきます。

サンプルコード付きで実践的な応用例も紹介しますので、ぜひ参考にしてください。

●JavaScriptでページ遷移を実現する方法

JavaScriptを使ってページ遷移を行う方法はいくつかあります。

ここでは、代表的な2つの方法を紹介します。

○サンプルコード1：window.locationを使ったページ遷移

このコードでは、window.locationを使って別ページに遷移する方法を紹介しています。

ボタンをクリックすると指定したURLに遷移します。

document.getElementById('button').addEventListener('click', function() {
  window.location.href = 'https://example.com';
});

○サンプルコード2：window.openを使った新しいタブでのページ遷移

このコードでは、window.openを使って新しいタブで別ページに遷移する方法を紹介しています。

ボタンをクリックすると指定したURLが新しいタブで開きます。

document.getElementById('button').addEventListener('click', function() {
  window.open('https://example.com');
});

●JavaScriptで値渡しを実現する方法

JavaScriptを使って値渡しを行う方法はいくつかあります。

ここでは、代表的な3つの方法を紹介します。

○サンプルコード3：URLパラメータを使った値渡し

このコードでは、URLパラメータを使って値を渡す方法を紹介しています。

遷移先のページでURLパラメータから値を取得して表示します。

// 値を渡す
document.getElementById('button').addEventListener('click', function() {
  const value = document.getElementById('input').value;
  window.location.href = `https://example.com?value=${value}`;
});

// 値を受け取る
const urlParams = new URLSearchParams(window.location.search);
const value = urlParams.get('value');
console.log('受け取った値:', value);

○サンプルコード4：localStorageを使った値渡し

このコードでは、localStorageを使って値を渡す方法を紹介しています。

遷移先のページでlocalStorageから値を取得して表示します。

// 値を渡す
document.getElementById('button').addEventListener('click', function() {
  const value = document.getElementById('input').value;
  localStorage.setItem('value', value);
  window.location.href = 'https://example.com';
});

// 値を受け取る
const value = localStorage.getItem('value');
console.log('受け取った値:', value);

○サンプルコード5：sessionStorageを使った値渡し

このコードでは、sessionStorageを使って値を渡す方法を紹介しています。

遷移先のページでsessionStorageから値を取得して表示します。

// 値を渡す
document.getElementById('button').addEventListener('click', function() {
  const value = document.getElementById('input').value;
  sessionStorage.setItem('value', value);
  window.location.href = 'https://example.com';
});

// 値を受け取る
const value = sessionStorage.getItem('value');
console.log('受け取った値:', value);

●注意点と対処法

ブラウザの違いによる動作の差異があるため、対応するブラウザを確認してください。
URLパラメータを使った値渡しでは、情報がブラウザの履歴やブックマークに残ることがあります。
セキュリティ上の懸念がある場合は、localStorageやsessionStorageを使用しましょう。
localStorageやsessionStorageは、同一ドメイン内で共有されます。
そのため、別のページで同じキー名を使用している場合、値が上書きされることがあります。
キー名をユニークにすることで回避できます。

●応用例とサンプルコード

○サンプルコード6：ページ遷移と値渡しを組み合わせたフォーム送信

このコードでは、フォーム送信時にページ遷移と値渡しを組み合わせた方法を紹介しています。

送信ボタンを押すと、入力された値が遷移先のページに表示されます。

// 値を渡す
document.getElementById('form').addEventListener('submit', function(event) {
  event.preventDefault();
  const value = document.getElementById('input').value;
  sessionStorage.setItem('value', value);
  window.location.href = 'https://example.com/result.html';
});

// 値を受け取る
const value = sessionStorage.getItem('value');
document.getElementById('result').textContent = value;

○サンプルコード7：ページ遷移と値渡しを利用したログイン認証

このコードでは、ページ遷移と値渡しを利用してログイン認証を行う方法を紹介しています。

入力されたユーザー名とパスワードが正しい場合、メインページへ遷移し、ユーザー名を表示します。

// ログイン認証
document.getElementById('login_form').addEventListener('submit', function(event) {
  event.preventDefault();
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;

  // 仮の認証情報
  const validUsername = 'user';
  const validPassword = 'password';

  if (username === validUsername && password === validPassword) {
    sessionStorage.setItem('username', username);
    window.location.href = 'https://example.com/main.html';
  } else {
    alert('ユーザー名またはパスワードが違います。');
  }
});

// ログイン後のページでユーザー名を表示
const username = sessionStorage.getItem('username');
if (username) {
  document.getElementById('welcome_message').textContent = `ようこそ、${username}さん！`;
} else {
  window.location.href = 'https://example.com/login.html';
}