【JavaScript】PHPにlocation.hashの値を渡す方法

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptのlocation.hashで取得した値をPHPに渡す方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

JavaScriptからPHPにlocation.hashの値を渡すには

PHPには、デフォルトでURLのハッシュ値を取得するための関数や変数は存在しません。そのためPHPでURLのハッシュ値を使った処理を作成しようとする場合、フロントエンド（ここではJavaScript）で取得したハッシュ値をどうにかしてPHPに渡す必要が出てきます。

JavaScriptからPHPにデータを渡す方法はいくつかあると思いますが、ここでは最も扱いやすい非同期通信を使って、JavaScriptのlocation.hashで取得した値をPHPに渡して例をご紹介します。

JavaScriptとPHPはファイルを分け、ファイル構造は下記の通りとします。

root/
　├ index.html
　└ post.php

index.htmlにJavaScriptを、post.phpにPHPの下記処理を記述します。

JavaScript

<script>
const hash = location.hash;

fetch("post.php", {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(hash)
})
.then((response) => response.json())
.then((result) => {
    console.log({result});
});
</script>

PHP

<?php

// JSONデータ取得
$json = file_get_contents('php://input');

// JSONを連想配列に変換
$data = json_decode($json, true);

// ここで何かしらの処理
$result = $data . '-hoge';

// JSONに変換して結果を返す
echo json_encode($result);

実行結果は下記の通りです。

実行結果

#test-hoge

JavaScriptで取得したlocation.hashの値をPHPに渡して何らかの処理（ここでは文字列を結合する処理）を実行することができましたね。

参考：https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

最後に

JavaScriptからPHPに値を渡したい場合は非同期通信が便利です。JavaScriptの処理中にPHPにデータを渡す→処理結果を受け取る→JavaScriptの処理に戻るという流れがスムーズにできます。JavaScriptとPHPを使って処理を作成したい場合は、ぜひ試してみてくださいね！

以上、JavaScriptでPHPにlocation.hashの値を渡す方法のご紹介でした！