JavaScript の fetch と promise を使って値を phpと非同期通信する

通常、PHPと通信するためにフォーム送信やリンククリックを行うと、ページ全体がリロードされます。しかし、非同期通信を使うことで、ページを再読み込みせずにバックグラウンドでサーバーとデータをやり取りできます。これにより、ユーザー体験が向上し、ページ遷移がスムーズになります。
例: ショッピングカートに商品を追加する時、ページ全体をリロードせずに商品を追加できる。

ページがリロードされると、ユーザーが待つ時間が発生し、操作が中断されます。非同期通信では必要な部分だけが更新されるため、ユーザーはページを使い続けながらデータの更新や取得を待つことができます。
例: 検索フィールドで入力するたびに検索結果をリアルタイムで表示する（オートコンプリート機能）。

非同期通信を使うと、サーバーとの通信が必要な部分のみを更新できるため、必要なデータだけを取得してページ全体のリロードを避けます。これにより、トラフィックが減り、サーバーの負荷やクライアントのパフォーマンスが向上します。
例: 大規模なページでは、必要なデータのみを取得して表示し、全てのデータを毎回ロードしないことで高速化。

非同期通信を使うことで、複数のリクエストを同時に実行し、並行して処理することができます。これにより、複数のデータが必要な処理でも全体の待ち時間を短縮できます。
例: ダッシュボードページで複数のデータを同時に取得して表示（売上データ、在庫情報、ユーザー統計など）。

非同期通信を使うことで、ページ上で動的にデータを表示したり、ユーザーがアクションを取るたびにリアルタイムでフィードバックを与えることができます。JavaScriptを使って動的な要素を更新することで、よりインタラクティブなアプリケーションを作ることができます。
例: コメントを投稿するとすぐに画面に反映されるリアルタイムのコメント欄。

非同期通信を使うことで、クライアント側でのインタラクションを止めずにバックエンドで長い処理を実行することができます。例えば、ファイルのアップロード、長時間かかるデータ処理などを実行しながら、フロントエンドが他の作業を続けることが可能です。
例: ファイルのアップロード処理を行いながら、進捗を表示する。

非同期通信を行うことで、サーバーからのレスポンスを取得してその結果に応じた動作を即座にページ上で反映することができます。これにより、ページの動的な要素がユーザーの操作やサーバーの状況に応じてリアルタイムに変化します。
例: サーバーに送信されたフォームデータが有効かどうかをすぐに確認し、エラーメッセージを表示。

ざっくりいうと、なにかのデータをリクエストしたら、その結果を待って順番に処理をすることを同期処理という。これに対し、データをリクエストしたら、その結果を待たずに、別の処理を進めることを非同期処理という。
もっとざっくりいうと、同期処理というのは、炊飯器でご飯が出来上がった後に、カレーを作り出す状態ということで、非同期処理というのは、炊飯器でご飯を炊きながら、カレーを作っている状態のことです。
ご飯ができあがるまで、カレーを作ることができない同期処理と比べると、非同期処理の方が効率が良い、ということが分かると思います。

前置きが長くなりましたが、実際のコードを見て、コピペしてみてください！

test.html と hoge.phpを作成して、ご自身のサーバーへUPロードしてください。test.htmlにアクセスしたときに JavaScript の fetch（フェッチ） と promise（プロミス） を使って自動的に “7” という値を hoge.php に送信して、hoge.php側で設定してある “3” をプラスした後に、test.htmlに結果を戻して表示します。

  // レスポンス結果を表示する
<p id="result"></p>

<script>
  // ページが読み込まれたら自動的に fetch を実行
  window.onload = function() {
    sendData();  // ページ読み込み時に送信を開始
  };

  // fetch API と Promise を使ってサーバーにデータを送信
  function sendData() {
    const level = 7;  // 送信する値 "7"

    // fetch API を使って非同期にデータを送信
    fetch('hoge.php', {
      method: 'POST',  // POST メソッドを使用
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',  // データ形式を指定
      },
      body: `level=${level}`,  // 送信するデータ
    })
    .then(response => {
      // レスポンスのステータスが正常か確認
      if (!response.ok) {
        return Promise.reject('Error: ' + response.status);
      }
      return response.text();  // テキストとしてレスポンスを取得
    })
    .then(data => {
      // 成功した場合の処理 - innerHTMLでHTMLを反映
      document.getElementById('result').innerHTML = data;
    })
    .catch(error => {
      // エラーが発生した場合の処理
      document.getElementById('result').innerText = `エラー: ${error}`;
      console.error('Fetch error:', error);
    });
  }
</script>

    <?php
        if (isset($_POST['level'])) {
            $level = $_POST['level'];
            $level = $level + 3;// 値に 3 をプラスする
            echo '
hoge.php(サーバ)のレスポンス：値は 【 ' . $level . ' 】
';
        } else {
            echo '
値が送信されていません。
';
        }
    ?>
    
    

■ 上記コードの解説
(1) test.html にアクセスすると、window.onload イベントが発火し、ページの読み込みが完了すると同時に sendData() 関数が呼ばれます。
(2) sendData() 関数では、fetch を使用して hoge.php に POST リクエストを送信します。送信される値は “7” です。
(3) hoge.php では POST リクエストで送信された level 値を受け取ります。
(4) fetch の Promise を使ってレスポンスが正常かどうかを確認し、成功した場合はページ上に結果を表示します。エラーが発生した場合は、エラーメッセージを表示します。
(5) これで、fetch と Promise を使用して、ページが読み込まれたときに自動で “7” という値をサーバーに送信することができます。
(6) 結果として hoge.php 側で 3 をプラスする設定をしているので、7に3を足した”10″ という値がtext.htmlに返却され、10が表示されます。

JavaScriptがウェブブラウザでの非同期通信の主流ですが、他のプログラミング言語や技術もサーバー間やクライアント間で非同期通信を実現するために使われます。JavaScript以外にも多くのプログラミング言語やフレームワークで非同期通信が可能です。これらは、主にネットワーク通信やI/O操作を効率的に扱うために使用され、各言語の非同期処理に特化した仕組みを提供しています。
ちなみに、PHP自体はサーバーサイドで動作するため、クライアントサイドの非同期通信（JavaScriptの fetch や XMLHttpRequest のような）機能は提供していません。つまり、PHP単体で非同期通信をクライアント側から行うことはできません。

Pythonには、非同期処理をサポートするライブラリやフレームワークがいくつかあります。 【asyncio】: Pythonの標準ライブラリで、非同期処理を行うための仕組みを提供しています。特にI/O操作（ファイル、ネットワーク、データベースなど）に対して非同期で通信を行う場合に役立ちます。
【FastAPI】: 非同期処理をサポートする軽量なPythonのWebフレームワークです。バックエンドで非同期通信を行うAPIを構築するのに便利です。

Rubyでも非同期通信を行うことができます。EventMachineやasyncといったライブラリを使用して、非同期のネットワーク通信を行います。 【EventMachine】: Rubyで非同期処理を行うためのライブラリで、特にWebソケットやHTTPリクエストの非同期処理で使われます。

Goは、軽量なスレッド「ゴルーチン（goroutine）」を使用して非同期通信を容易に行うことができます。HTTPリクエストを非同期で実行する場合でも、Goroutineを使って簡単に処理できます。

C#では、async と await キーワードを使用して、非同期通信を簡単に実現できます。例えば、HTTPリクエストを非同期に処理する場合に使われます。

Javaでも非同期通信が可能です。CompletableFuture や ExecutorService などのクラスを使って、非同期処理を実現できます。

Rustも非同期通信がサポートされており、async と await を使用して非同期通信を実現できます。Rustには tokio や async-std などの非同期ランタイムが存在します。

Node.jsはJavaScriptのサーバーサイドランタイムですが、非同期通信に特化しており、イベント駆動型の非同期I/Oを活用してHTTP通信やファイル操作を非同期に行うことが得意です。 と await を使用して非同期通信を実現できます。Rustには tokio や async-std などの非同期ランタイムが存在します。