画面遷移の際にデータを引き継ぎたい場面はウェブ制作で非常に多くあります。URLに情報を埋め込む方法、ブラウザが提供するストレージを使う方法、さらにHistory APIで状態を管理する方法など、それぞれ利点と注意点があります。この記事ではSEOキーワードJavaScript 画面遷移 パラメータを中心に、遷移時にパラメータを渡す多様な手法を解説し、実践的なコード例と最新情報を踏まえて比較します。画面遷移でデータを失わないようにしたい方はぜひ最後までお読みください。
JavaScript 画面遷移 パラメータをURLに付与する方法
URLにパラメータを付与する方法は最も基本的で視覚的にもわかりやすく、画面遷移とともに簡単にデータを渡すことができます。しかし、セキュリティや可読性、URLの長さなどを考慮することが必要です。特に、GETパラメータの形式や特殊文字のエンコード、複数の値を扱う場合の区切り方について正しく対応することが重要です。
クエリパラメータの基本構造
クエリパラメータはURLの?以降にkey=value形式で追加されます。
例えば:
・page.html?user=alice
・products.html?category=books&sort=price_desc
といった形式です。複数のパラメータを渡す場合は&でつなぎます。
JavaScriptでの遷移と取得のサンプル
JavaScriptを使って画面遷移しつつパラメータを付与し、遷移先でその値を取得する例を紹介します。
・遷移元で:
window.location.href = ‘detail.html?item=123&ref=home’;
・遷移先で:
const params = new URLSearchParams(window.location.search);
const item = params.get(‘item’);
URLエンコードと文字数制限の注意
URLには半角英数字意外に日本語や記号が入ると文字化けや誤認識の原因になります。URLエンコード（encodeURIComponentなど）を使って安全に渡すこと。
またURLは長くなるとブラウザの上限やリンク共有時の切断の原因になるので、短く必要最小限の情報に絞るようにします。
localStorage・sessionStorageを使ってJavaScriptで画面遷移 パラメータを保存する
ストレージを使う方法はURLを汚さず、画面遷移後でもデータを保持できるため、フォームデータや一時的なユーザー設定などに有効です。しかしブラウザの制限やデータの永続性、セキュリティ面の配慮が必要です。
localStorageとsessionStorageの違い
両者ともkey‐value形式でデータを保存できますが、
・sessionStorageはタブを閉じると消える。ブラウザを閉じた時にデータが消失する。
・localStorageは明示的に消去されない限り永続的に保存されるため、再訪問やブラウザ再起動後も残る。
これらはOrigin（プロトコル・ドメイン・ポート）が同じページ間で共有されます。
画面遷移とデータの引き継ぎ例
例えばフォームの内容をfirst.htmlで入力し、遷移先で保持したい場合:
遷移元: sessionStorage.setItem(‘formData’, JSON.stringify({name:’太郎’,email:’taro@example’})); window.location.href=’second.html’;
遷移先: const data=JSON.parse(sessionStorage.getItem(‘formData’)); これでnameやemailを復元できます。
使う際のセキュリティと可視性の注意点
ストレージはユーザーのブラウザ内で値が見えるため、敏感なトークンや秘密情報は保存しないこと。XSS攻撃の影響も受けやすいため、入力値をサニタイズし、ストレージの内容を信頼しすぎない設計が求められます。
History APIを使ってJavaScriptで画面遷移 パラメータを管理する
History APIを活用すれば、URLを変更せずに状態を保持したり、ブラウザの戻る／進む操作に連動させたりできます。最新のフロントエンド設計では不可欠の方法であり、SPA（Single Page Application）でも自然なユーザー体験を提供できます。
pushStateとreplaceStateの使い方
pushStateは履歴に新しい状態を追加し、replaceStateは現在の履歴を置き換えます。Stateオブジェクトに任意のデータを入れることができ、URLを変えつつ視覚的な状態を同期させることに利用されます。
例:
history.pushState({step:2},’Step２’,’?step=2′); ウィンドウ遷移ではなくURLと履歴の状態を変えることで、戻るボタンで状態を復帰できます。
popstateイベントで遷移時の復元を行う
ユーザーがブラウザの戻る／進むを押した際にpopstateイベントが発火します。ここでstateオブジェクトを取得し、画面表示内容を復元します。
例:
window.addEventListener(‘popstate’, event=>{ const state=event.state; if(state && state.step){表示をstep２にする処理} });
SPAフレームワークとの併用と利点
ReactやVueなどのSPAではHistory APIを内部的に利用し、ルーティングライブラリが状態の同期を助けます。URL部分をルートとして保持しつつ、stateを併用することでクリーンなURLと柔軟な状態管理が両立できます。
渡すパラメータの形式と型の選び方
画面遷移で渡すパラメータの形式は用途によって柔軟に選ぶことが重要です。数値・文字列・ブール値・配列・オブジェクトなどの型をどう扱うか、シリアライズやデシリアライズの手順を抑えておけば、意図しないデータの崩れを防げます。
文字列・数値・ブール値の扱い
URLパラメータでは全て文字列になるため、取得後にNumber()やBoolean()で型変換することが必要です。ストレージやHistory APIの場合はオブジェクトをJSONにして保存し、取得時にparseすることで元の型を復元できます。
配列・オブジェクトのシリアライズ
配列やオブジェクトをURLに入れるのは長くなりがちですが、JSONをencodeURIComponentでエンコードするか、項目を複数のクエリパラメータに分割して渡す方法があります。ストレージに保存する場合はJSON.stringifyで保存し、JSON.parseで復元します。
セキュアなデータ形式の選択
トークンなどの重要なデータはURLやストレージに露出しないようにすること。暗号化やサーバー側でセッション管理することでユーザーが直接操作できないような設計にします。また、不正な値が来た場合のバリデーションを必ず行います。
用途別でJavaScript 画面遷移 パラメータを選ぶ基準と比較
どの方法で画面遷移時にパラメータを渡すかは用途によって変わります。以下は代表的な事例とそれぞれの長所と短所の比較です。用途に応じて最適な手法を選ぶことで、実装が簡潔になり、後からの保守性も上がります。
短期間表示させるメッセージや遷移の状態
一時的な通知や画面遷移のフロー状態など、短時間だけ必要なデータはsessionStorageやHistory APIで管理するとよいです。URLに出すのは不要かつ見た目を損なうこともあるためです。
検索フィルタやページネーションの情報
検索条件やページ番号など、ユーザーが再訪したりリンク共有をする可能性がある情報はURLに入れておくことが有利です。そうすることでURLを他者に送っても同じ検索結果を共有できるというメリットがあります。
認証情報や敏感情報
パスワードやセッションIDなどはURLに含めると漏洩のリスクが非常に高くなります。同様にlocalStorageでもXSS等の攻撃により読み取られる可能性があるため、サーバーサイドで管理するかHttpOnlyなCookieを使うなど、クライアント側に露出させない方法を採ることが望ましいです。
実践的なサンプルコード集：JavaScript 画面遷移 パラメータを引き継ぐ例
ここでは典型的なケースについて、コードを交えて画面遷移時にパラメータを渡し引き継ぐ実践的な例をいくつか紹介します。サンプルをそのまま組み込めるよう構成してあります。
URLクエリパラメータ＋取得するサンプル
遷移元側のHTMLリンクまたはJavaScriptでURLに付けて遷移する例:
＆lt;button id=”goBtn”>次へ</button>
＆lt;script>
document.getElementById(‘goBtn’).addEventListener(‘click’,()=>{
const data={id:123,name:’商品A’};
const qs=’?id=’+encodeURIComponent(data.id)+’&name=’+encodeURIComponent(data.name);
window.location.href=’detail.html’+qs;
});
遷移先で:
＆lt;script>
const params=new URLSearchParams(window.location.search);
const id=params.get(‘id’);
const name=params.get(‘name’);
console.log(id,name);
History APIを使ってURLと状態を保持するサンプル
画面遷移を伴わない状況で状態を変える例:
＆lt;script>
// 遷移しない形でURLと状態を変更
history.pushState({filter:’new’,page:2},”,’?filter=new&page=2′);
// 路由や表示内容を更新する処理
const params=new URLSearchParams(window.location.search);
const filter=params.get(‘filter’);
const page=params.get(‘page’);
window.addEventListener(‘popstate’,event=>{
const s=event.state; if(s){console.log(s.filter,s.page);}
});
localStorageによる一時的なフォームデータの保存と復元の例
遷移前に入力値を保存し、戻ってきたときに復元する例:
＆lt;script>
window.addEventListener(‘beforeunload’,()=>{
const form={name:document.getElementById(‘name’).value,email:document.getElementById(‘email’).value};
sessionStorage.setItem(‘formTemp’,JSON.stringify(form));
});
window.addEventListener(‘DOMContentLoaded’,()=>{
const saved=sessionStorage.getItem(‘formTemp’);
if(saved){const form=JSON.parse(saved);document.getElementById(‘name’).value=form.name;document.getElementById(‘email’).value=form.email;}
});
パラメータを渡す際のパフォーマンスやSEOへの影響
画面遷移時のパラメータの渡し方は、ユーザー体験だけでなくSEOやサイトのパフォーマンスにも影響します。適切な形式と手法を使うことで、検索エンジンや閲覧者にとって有利になることがあります。
検索エンジンがクエリパラメータをどう扱うか
検索エンジンはパラメータ付きURLを別のページとみなすことがあります。重複コンテンツと判断されるリスクを避けるため、canonicalタグを使うか、パラメータは検索エンジンフレンドリーな値にすることが望ましいです。
パフォーマンス面での注意点
長いURLや複雑なジョイン処理が遷移先で行われるとSSL証明書のオーバーヘッド、サーバーログの肥大化、キャッシュヒット率の低下などが発生する可能性があります。ストレージやHistory APIを使う設計がこれらの問題を軽減することがあります。
ユーザー体験と共有のしやすさ
URLにパラメータを付けるとページのリンクをコピーした時に状態が共有できるため、UXとしてメリットがあります。検索条件や表示フィルターなどの状態をURLに含めることで、再利用性やソーシャルシェアにも貢献します。
最新情報に基づく動作対応状況とブラウザ互換性
新しいWeb標準やブラウザの更新により、パラメータの渡し方やストレージの動作に微妙な差異が出ています。最新のブラウザでは各APIのサポート状況が改善しており、SPA以外の環境でもHistory APIやWeb Storageの利用が安定しています。
主要ブラウザでのHistory API対応
ほとんどのモダンブラウザはHistory API（pushStateやpopstateイベントなど）を全面的にサポートしています。そのため、SPAでない従来型のサイトでもURLと状態の同期を取る設計が実用的になっています。遷移中のページ読み込みやキャッシュ動作にも良好です。
Web Storageの容量制限とプライベートブラウジングでの挙動
localStorage・sessionStorageはOrigin あたり5MB前後の容量制限があるブラウザが多く、プライベートモードでは制限が厳しくなることがあります。大きなデータを保存する用途ではIndexedDBを検討するか、データを分割して扱う設計にします。
セキュリティ更新と配慮事項
セキュリティの観点で、XSS対策・HTTPからHTTPSへの移行・SameSite Cookieの仕様強化などが進んでいます。URLにトークンを載せることやストレージに重要情報を保存することに対するリスクは過去よりも厳しく見られる傾向があります。
まとめ
JavaScriptで画面遷移時にパラメータを渡す手法は用途や目的に応じて複数あります。
・URLクエリパラメータ：ユーザー共有性が高く、検索条件やページネーション等に適している。
・localStorage／sessionStorage：URLを汚さず一時的または永続的にデータを保持できる。
・History API：状態を履歴として扱い、戻る操作やSPAのルーティングと相性が良い。
実装上の注意として、
・型を正しく扱うこと（文字列・数値・オブジェクト）
・セキュリティ（URLに敏感情報を入れない・XSS対策）
・ブラウザ互換性と容量制限を把握すること
これらを理解し使い分けることで、画面遷移時にデータを失うことなく、かつ保守性とユーザー体験に優れたWebサイトを構築できます。まずは小さな用途から適切な方法を選び、設計に慣れていくことが大切です。
コメント