PHP・JavaScriptそれぞれでリダイレクトさせる方法&コード例まとめ

あるページからあるページに機械的(スクリプト的)に移動させたい・・・

そんなときの常とう手段と言えば リダイレクト です。

ここでは自分への忘備録も兼ね、PHP・JavaScriptでのリダイレクト方法をまとめました。具体的なコード例についても紹介します。

PHPの場合. リダイレクトには header 関数を使う

まずPHPでリダイレクトさせる方法について

これにはheader関数というヘッダー情報を送信できる関数を使います。

 

例えば現在ページから hoge.php  にリダイレクトさせたい場合、
次のようなスクリプトを実行してあげればOK

header( "Location: hoge.php" );  みたいに Location  の後に飛ばす先の ファイル名 または ファイルパス を書くだけです。ただしファイル名だけの場合は同じディレクトリにないとリダイレクトされないので要注意

 

もし安全にリダイレクトさせるなら次みたいにフルパスで書くのがベストです。

もしディレクトリ構成が頻繁に変わるなどの場合は、こういう書き方をしておいた方が事故が起きにくいです。

 

ちなみにフルパスをいちいち書くのが面倒、
という場合は $_SERVER['DOCUMENT_ROOT']  を使うと楽に書けます。

これはドメイン直下までのフルパスを返してくれるという便利なサーバー変数

この $_SERVER['DOCUMENT_ROOT']  でリダイレクト処理を書きなおすと次の通りです。

もし今までフルパスを省略なしで書いてきた、という方はこっちを使う方が絶対楽になるはずです。

もしリダイレクトができない場合は・・・

このheader関数を使ったリダイレクト、なぜか上手くできないことが結構あります。

その原因としては特に多いのは次のようなこと

  • HTML出力後に呼び出している
  • Locationの書き方が正しくない
  • 単純にパスを間違えている

こういうミスがないかどうか、リダイレクトするときは要注意です。

ちなみにリダイレクトできない問題への対処法は次記事でもまとめてあります。

もし正しく書いてるのに動かないという場合は、上記事で紹介した対処法もお試しあれ。少し書き方とか書く場所を変えるだけで解決するかもしれません。

JavaScriptの場合.リダイレクトには location を使う

お次はJavaScriptでのリダイレクトのやり方について

これには Locationインターフェイス というものを使います。これはURLに関連付けられるオブジェクトを一括で管理するためのものです。

具体的にそのことが書かれているのがMDNリファレンスの次の部分(引用)

Location インターフェイスは、関連付けられたオブジェクトの場所 (URL) を表します。 Location に対して変更が行われると、関連するオブジェクトに反映されます。 Document インターフェイスおよび Window インターフェイスにはこのような関連付けられた Locationがあり、それぞれ Document.location および Window.location でアクセスできます。

Location - Web API | MDN より引用

上の文章を要約するなら「これを使うとURLの情報を調べたり、URLの操作ができるよ」ということ

URLの操作ができるのでリダイレクトも結構簡単に行えます。

 

例えば次は同じディレクトリにある hoge.php にジャンプするコード例

単純に Location のプロパティ href  に遷移先のファイル名またはパスを入れればいいだけです。PHPと比べるとめちゃくちゃ簡単ですね。

ちなみに location.assign  メソッドを使っても同じことは可能(次コード参照)

このメソッドにファイル名・ファイルパスを渡すことでもリダイレクトができます。

 

ただし、JSの場合でも遷移先はフルパスURLで書いた方が安全です。

例えば次みたいな感じで

プロトコル(https)までつけておけば無駄なリダイレクトも発生しません。

Locationはリロードにも使える

もちろん、このLocationインターフェースの用途はリダイレクトだけじゃありません。

現在ページをリロード(再読み込み)させることも可能です。

そのやり方については次記事で書いたので、良ければそちらもどうぞ

 

また Location は現在ページのURL情報を調べたりする目的でも使えます。

例えばプロトコルだったり、ホスト名だったり、ポート番号だったり・・・

その詳しい調べ方は次記事で書いた通り

リダイレクトもできてURL情報も調べられるのが Location の便利な所ですね。

HTMLの場合.リダイレクト用のメタタグを使う

最後にHTMLだけを使ってリダイレクトさせる方法も紹介します。

そのやり方は次みたいにheadタグ内にリダイレクト用のメタタグを書くだけ

こういう風に http-equiv  属性に "refresh"  、 content  属性に "0;URL='~~~'"  みたいに書くだけで即リダイレクトできます。

 

ちなみにリダイレクトを即(0秒)ではなく、X秒後に行いたい場合は content  属性の最初に秒数を指定すれば「X秒後にジャンプします」的なことが可能です。

例えば次は5秒後にリダイレクトさせるメタタグの例

上コードみたいに content="5;URL=’~~~'"  と最初に秒数を指定するのがミソ

言語ごとのリダイレクトさせる方法まとめ

ここまで紹介した言語ごとのリダイレクト方法をまとめる次の通り

  • PHPの場合
    header関数を使う。例えば header('Location: hge.php');  を実行すれば hoge.php にリダイレクト可能、ただし書き方・書く場所によって動かないことがあるので要注意!
  • JavaScriptの場合
    URLオブジェクトを管理する Location インターフェースを使う。例えば location.href = 'https://example.com/path/to/hoge.php';  のようにすればリダイレクトが可能

ということでWeb開発でよく使う言語ごとのリダイレクト方法についてでした。ではでは($・・)/~~~