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

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

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

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);

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