今回は、jQuery(JavaScript)でページ遷移を行うためのプログラミング手法について学習をしていきましょう！
ページ遷移でアニメーションする方法が知りたい
遷移する時にPOST / GETで値を渡したい
このような内容も含めて、本記事では以下のような構成で解説していきます！
- 【基礎】「ページ遷移」とは？
- 【基礎】「ページ遷移」の使い方
- 【実践】ページ遷移のアニメーション
- 【実践】ページ遷移の値渡し
この記事で、ページ遷移をしっかり学習してスキルアップを目指していきましょう！
「ページ遷移」とは？
それでは、まず最初に「ページ遷移」について基本的な知識から身に付けていきましょうWebにおける「ページ遷移」とは、リンクなどをクリックした時に別のWebページに画面が切り替わることを意味します。
リンク以外にも、フォームを送信した時やJavaScript側から強制的に遷移させるようなケースもあります。特に、近年流行りのブログなどはページ遷移を行うことで、さまざまな記事を閲覧することができるようになっていますよね。
本記事では、この「ページ遷移」についてjQueryを使ったプログラミング手法を解説していきますのでぜひ参考にしてみてください！
「ページ遷移」の使い方
この章では、基本的な「ページ遷移」の使い方について見ていきましょう。jQueryによる基本プログラミングからイベント処理を活用した手法について学んでいきます。
jQuery(JavaScript)でページ遷移を行う方法
まずは、基本的なプログラミングで「ページ遷移」を実現する方法から見ていきましょう。これは、jQueryというよりもJavaScriptの標準で提供されている「location」オブジェクトを活用することで可能になります。
「location」は、現在表示されているWebページのさまざまなURL情報が格納されています。そのなかで、「location.href」プロパティは現在のURL情報が格納されています。
つまり、この「location.href」プロパティに別のURLを代入することでページ遷移を行うことができるのです。
次のサンプル例を見てください！
location.href = 'https://www.sejuku.net/blog';
この1行のJavaScriptコードを記述するだけで、当ブログのサイトにページ遷移するわけです。「ページ遷移」を行うのは意外と簡単に実現できるのが分かりますね。
ちなみに、「location」オブジェクトについて基本から応用までを次の記事でまとめているのでぜひ参考にしてみてください！
イベント処理を使ってページ遷移する方法
今度は、イベント処理に「ページ遷移」を組み込んでみましょう！例えば、次のようなボタン要素があるとします。
<button>ページ遷移ボタン</button>
このボタンをクリックしたら、当ブログのサイトにページ遷移するようにプログラミングしてみましょう！
$('button').click(function() {
location.href = 'https://www.sejuku.net/blog';
})
この例では、クリックイベント処理内に「location.href」を使ってページ遷移しているのが分かりますね。このように記述すれば、ボタンがクリックされるまで「ページ遷移」をすることはないわけです。
「ページ遷移」のアニメーション
この章ではページを遷移する前のフェードアウト方法、ページ遷移後のフェードイン方法について見てみましょう！まずはフェードアウトからです。
フェードアウトしながらページ遷移する方法
先程の章で使ったサンプルを少し改造してフェードアウトさせてからページの遷移を行うようにしてみましょう。では、早速サンプルコードを見てみましょう。
$(document).ready(function() {
if(confirm('このページから侍エンジニアブログへ移動しますか？')) {
// 侍エンジニアブログに遷移
$(document.body).fadeOut("slow", function(){
window.location.href="https://www.sejuku.net/blog/";
});
}
});
先程のコードと比べて少し処理が変わっているのがわかるかと思います。処理の流れを解説すると、別ページへ遷移するかどうかの確認ダイアログが表示され「OK」を押すとdocument.body（ページ全体）に対してフェードアウトをかける処理をおこないます。
フェードアウトが完了したら呼ばれるコールバック関数(特別な関数)でページ遷移を行っています。このようにすることでお手軽にフェードアウトアニメーションを付けてページ遷移することができました！
フェードインしながらページ遷移する方法
この項では他のページから遷移してきた時にフェードインしながらコンテンツの内容を表示してみましょう。今回は先程と違い、ページにアクセスしてきた直後にはページのコンテンツを非表示にしておく必要があります。
そして非表示になっているコンテンツをフェードインして徐々にコンテンツが見えるような形に変えていくといったサンプルコードになっています。
ではサンプルコードを見てみましょう！
$(document).ready(function() {
$(document.body).hide().fadeIn("slow");
});
ページにアクセスしてきた直後にコンテンツを非表示にするという処理はhide()を使うことでdocument.bodyを瞬時に非表示にすることができます。非表示にしたあとにfadeInメソッドを使ってコンテンツの中身を徐々に表示させています。
こうすることでページ遷移後にフェードインを開始し、コンテンツが徐々に表示されるようになりました。
次の章では別ページへ遷移したあとに値も一緒に渡したい場合どうすればよいのかを解説します！
「ページ遷移」の値渡し
この章では、ページ遷移を行う際に値を渡す方法について見ていきましょう。
主に、クエリを使った方法やPOST送信時の渡し方について学んでいきます。
クエリで遷移先のページに値を渡す方法
みなさんが一般的によく見るURLは「https://www.sejuku.net/blog」のようなカタチですよね。このURLの末尾に「?」から始まる「クエリ」と呼ばれるデータを付与することで、GET通信によるページ遷移で値を渡すことが可能です。
一般的な記述方法としては、【 ?変数名=値 】のように変数と値がペアになった記述が必要です。
例えば、遷移先の「sample.html」というページに「太郎」という名前のデータを渡したい場合は次のように記述します。
location.href = '/sample.html?name=' + encodeURIComponent('太郎');
「太郎」のように英数字以外の値は「encodeURIComponent()」を使ってエンコードする必要があります。
遷移先の「sample.html」では、次のように記述することでデータを受けとることが可能です。
var query = location.search;
var value = query.split('=');
console.log(decodeURIComponent(value[1]));
「location.search」はURLのクエリ部分だけを抽出してくれます。つまり、「?name=太郎」の部分ですね。これを「split()」を使って「=」の部分で2つに分割し、「?name」「太郎」に分けた配列にします。
あとは、その配列から1番目の要素「太郎」を指定すれば渡された値を取得できるというわけです！
このクエリを含めて「location」オブジェクトの基本から応用技を次の記事でまとめているので参考にしてみてください！
POSTで遷移先のページに値を渡す方法
今度はページ遷移する際に、POST送信でデータを渡す方法について見ていきましょう。基本的にはformタグを使って入力した値などを送信するのが一般的です。
次のサンプル例を見てください！
この例では、入力ボックスと送信ボタンだけのシンプルなフォームですね。注目したいのがPOST送信したデータは、必ずname属性を付与しているという点です。
この例では、name属性にそれぞれ「name」「age」という属性値を付与しているので、データとしては「name=名前&age=年齢」という形式で送信されるわけです。あとはサーバー側で受信したPOSTデータを操作すれば良いわけですね。
例えばNode.jsによるPOSTデータの処理方法については、次の記事で基本から体系的にまとめているのでぜひ参考にしてみてください！
ページ遷移なしで通信処理する方法
フォームによる送信処理はページ遷移の処理がデフォルトで含まれています。
つまり、フォームの送信ボタンをクリックすると必ずページ遷移するモーションが入るのですが場合によってはページ遷移して欲しくないこともあります。そこで、このページ遷移をなしでフォームの送信を実現する方法について見ていきましょう。
方法はシンプルで、formタグ内にonsubmitを次のように追記すれば良いのです！
formタグ内のonsubmitの記述に注目してください！
「return false」という記述を行うことでフォームの送信ボタンを押したときのページ遷移処理がキャンセルされるのです。
また、送信ボタンに次のようなイベント処理を追記しておけば好きな処理を実行することも可能です。
この例では、submitボタンにonclickで任意のイベント処理を実行していますね。このように記述することで、ページ遷移なしで任意の送信処理を実行することができるわけです。
自動的にページ遷移する方法
冒頭でlocationを利用したページ遷移を学びましたが、もう少し発展させてみましょう！
行うのはページ遷移の自動化です。自動化といっても難しくはなくて、単純にsetTimeout()を使ってタイマーを実行させるだけです。まずは次のようなページ遷移の処理があるとします。
location.href = 'https://www.sejuku.net/blog';
これを自動的にページ遷移させるには、次のようにsetTimeout()の処理内に遷移処理を記述します。
setTimeout(function() {
location.href = 'https://www.sejuku.net/blog';
}, 2000)
この例では、setTimout()内でlocationを実行することで2秒経過したあと自動的にページ遷移するように処理されます。
まとめ
ページ遷移を行うにはlocation.hrefに遷移したいURLを代入することでページ遷移をすることができました。また、フェードインとフェードアウトさせるためにはfadeInメソッドやfedOutメソッドを使えば実現できることもわかりました。
最後に値を渡したい場合についてもURL末尾にクエリを作ると、遷移先のページに値を渡すことに成功しました。
ページ遷移について完全マスターする方法について解説してきました。ありがとうございました！
