RESTful APIは、ウェブアプリケーションやウェブサービスで使われるプログラミングインターフェースです。
REST（Representational State Transfer）の原則に基づいて設計されており、ウェブ上のリソースへのアクセスや操作を統一的な方法で提供します。
リソースはURLで識別され、HTTPメソッド（GET、POST、PUT、DELETEなど）を使ってアクセスされます。

[getpost id=”1672″ cat_name=”1″ date=”0″]

SPA（シングルページアプリケーション）とは？

SPAは、ユーザーがアプリケーションを操作する際にページの再読み込みをせずに、必要なデータのみをサーバーから非同期に取得し、動的にページの内容を更新するウェブアプリケーションの形式です。

これにより、従来のマルチページアプリケーションに比べてユーザーエクスペリエンスが向上します。

僕が所属しているチームでもページのリロードが嫌だというユーザーの使用感からSPAへの移行が少しづつ始まってきています。
世間的にもSPAは流行っていますよね。（流行っているから偉いというわけではない。知ることが大事

RESTful APIとSPAの関係性

SPAでは、ページの初回読み込み時にアプリケーションの全てのコード（HTML、CSS、JavaScript）がロードされます。

その後のユーザーの操作によってデータが必要になる場合、SPAはRESTful APIを通じてサーバーからデータを非同期に取得します。
このデータはJSONやXML形式で返され、JavaScriptを用いてクライアントサイドで処理され、ページの一部分だけが動的に更新されます。

このアーキテクチャにより、SPAはユーザーにスムーズで反応の良いインターフェイスを提供できます。

RESTful APIはこのプロセスの背後にあるデータ通信の基盤となります。

PHPとReactを使った例

ここでは、PHPで書かれた簡単なRESTful APIと、Reactを使ったSPAの例を示します。

PHPによるRESTful API

PHPで簡単なAPIエンドポイントを作成します。この例では、GETリクエストを受け取り、簡単なJSONデータを返します。

<?php 
    header('Content-Type: application/json');
    $response = ['message' => 'Hello, world!'];
    echo json_encode($response); 

    // Response
    //{"message": "Hello, world!"} ?>

このPHPスクリプトは、サーバーに配置してのようにアクセスするとJSONが返されます。

ReactによるSPA

Reactで簡単なSPAを作成し、上記のAPIからデータを取得して表示します。

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    axios.get('http://yourserver.com/index.php')
      .then(response => {
        setMessage(response.data.message);
      })
      .catch(error => console.error('There was an error!', error));
  }, []);

  return (
    <div>
      <button>{message}</button>
    </div>
  );
}

export default App;

SPA（シングルページアプリケーション）とRESTful APIを使用する際には、セキュリティとパフォーマンスの両方に配慮することが重要です。
以下では、これらの観点から基本的なガイドラインをいくつか紹介します。

セキュリティ

1. HTTPSを使用する
   データの暗号化を確実に行うため、APIとの通信には常にHTTPSを使用します。（当たり前です）
   これにより、中間者攻撃（MITM）のリスクを減らすことができます。
2. CORSポリシーを適切に設定する
   クロスオリジンリソースシェアリング（CORS）ポリシーを適切に設定し、信頼できるオリジンからのリクエストのみを許可します。
   不適切なCORS設定は、セキュリティリスクを招く可能性があります。
3. 認証と認可
   JWT（JSON Web Tokens）やOAuthなどの堅牢な認証メカニズムを使用して、APIへのアクセスをセキュアに管理します。
   また、ユーザーの権限に基づいてアクセスを制御する認可も重要です。
4. 入力の検証とサニタイズ
    SQLインジェクションやクロスサイトスクリプティング（XSS）攻撃を防ぐため、サーバー側とクライアント側の両方で入力値の検証とサニタイズを行います。
5. 依存関係のセキュリティ
   使用するライブラリやフレームワークのセキュリティ脆弱性に注意し、定期的に更新を行い脆弱性を修正します。

この辺の対策については過去に記事にしていますので時間ある人は読んでみてくださーい

[getpost id=”1618″ cat_name=”1″ date=”0″][getpost id=”1256″ cat_name=”1″ date=”0″]

パフォーマンス

1. コードの分割
   ユーザーが必要とするコードのみをダウンロードするように、コード分割（Code Splitting）を実装します。
   これにより、初期ロード時間を短縮できます。
2. キャッシュ戦略の利用
   静的リソースやAPIレスポンスのキャッシュを適切に利用することで、パフォーマンスを向上させることができます。
   ブラウザのキャッシュやCDNの利用が有効です。
3. 遅延ローディング（Lazy Loading）
    画像やコンポーネントなど、必要になるまでロードしないようにします。
   これにより、初期ロードのパフォーマンスを向上させることができます。
4. APIの最適化
   不必要なデータの送受信を避けるため、APIのレスポンスをできるだけ小さく保ちます。
   また、必要なデータのみを取得するためのフィルタリングやページネーションをAPI側でサポートします。
5. フロントエンドのパフォーマンス最適化
   Reactなどのフロントエンドフレームワークを使用する場合は、不要な再レンダリングを避け、メモ化（memoization）や仮想DOMの効率的な利用などのテクニックを活用します。

セキュリティとパフォーマンスは、アプリケーションの設計と開発の初期段階から考慮する必要があります。
これらの基本的なガイドラインを実践することで、ユーザーに安全で快適な体験を提供することができます。

Reactの考え方

React では、DOM 要素を直接操作する代わりに、React の状態管理やレンダリング方法を使用して操作を行うことが推奨されているとのこと。

useState

useState フックは、状態（state）を React コンポーネント内で管理するために使用します。状態は、コンポーネント内でのデータの変更を追跡し、自動的に再レンダリングするために使われます。

差分取って差分の分だけレンダリングするっぽいですね。楽だし早いね。

Reactの基本理念？である状態管理で差分を取るってのがuseStateの肝な気がする。

useEffect

コンポーネントのレンダリング後に実行される処理(データ)を管理するために使用します。

useEffect フックは第1引数に副作用の関数を受け取り、第2引数には、依存する値の配列を指定します。この配列に指定した値が変更された場合に副作用関数が再実行されます。

空の配列を指定することで、初回レンダリング時にのみ副作用関数が実行されることを意味します。

    const [csrfToken, setCsrfToken] = useState(null);
    useEffect(() => {
        // メタタグからトークンを取得
        const metaTag = document.querySelector('meta[name="csrf-token"]');
        if (metaTag) {
            setCsrfToken(metaTag.content);
        }
    }, []);

なんとなくonloadっぽい。。。

注意点

第二引数に何も指定しない

無限ループ発生します。ローカル端末が燃えます。気をつけましょ。

配列やオブジェクトの要素を展開するための構文です。

この構文は、配列やオブジェクトをより簡潔かつ柔軟に操作するために使用されます。

スプレッド構文を使用すると、配列やオブジェクトの要素を取り出して、別の配列やオブジェクトに組み込むことができます。
配列の場合、要素を展開して別の配列に組み込むことができます。オブジェクトの場合、プロパティを展開して別のオブジェクトに組み込むことができます。

$test = [1, 2, 3];
$testUnion = [...$test, 4, 5, 6];

var_dump($testUnion); 
// [1, 2, 3, 4, 5, 6]

$test = ['name' => 'tarou', 'age' => 30];
$testUnion = ['city' => 'Gifu', ...$person1];

var_dump($testUnion); 
// ['city' => 'Gifu', 'name' => 'tarou', 'age' => 30]

使い所

複数の配列を結合したり、オブジェクトのプロパティを組み合わせたりする場合

$test1 = [1, 2, 3];
$test2 = [4, 5, 6];
$testUniion = [...$numbers1, ...$numbers2];

var_dump($testUnion); 
// [1, 2, 3, 4, 5, 6]

※array_merge()とやっていることは一緒。
なので、基本的にarray_merge()を使用することは今後少なそう。

配列やオブジェクトの一部の要素を変更する場合

$original = [1, 2, 3, 4, 5];
$modified = [...array_slice($original, 0, 2), 6, ...array_slice($original, 3)];

var_dump($modified); 
//展開
array(5) {
[0]=>
int(1)
[1]=>
int(2)
[2]=>
int(6)
[3]=>
int(4)
[4]=>
int(5)
}

関数の引数として使用する場合

function sum(...$numbers) {
  return array_sum($numbers);
}

$result = sum(1, 2, 3, 4, 5);

var_dump($result); 
//int(15)

※シンプルに配列を渡せばいいのではないか？と思ったのですが、呼び出し元で渡している引数が無限に増えても対応できるので結構便利かもしれません。

配列やオブジェクトのコピーを作成する場合

$original = [1, 2, 3];
$copy = [...$original];

var_dump($copy); 
// [1, 2, 3]

思う所

JSを使うPJならつかっても良いかな…？

ES2015からJSでもスプレッド構文が出現しているとのことです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

一応PHPの方が先に機能として発表しているのですが、何と言ってもJS様です。

JS様と統一性を持って記述ができるのが魅力かもしれませんね…

レスポンス：

AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST',

考えられる原因：

• ルーティングを間違えている
• 通信先のURLが間違えている

404になる原因

Routeの設定を行っているのにレスポンスがになってしまう。

解決方法はエラーの文言通り、ページが存在していない事が原因です。

エラーになるコード

routes/api.php

Route::get(
    '/test',
    [Test::class, 'test_function']
);

resources/js/components/EnduserSearchstore.vue

import axios from 'axios';

    export default {
        data() {
            return {
                users: {},
            }
        },
        methods: {
            getBigCategory() {
                axios.get('/api_search_storeCategory')
                    .then((response) => {
                        // this.users = response.data.users
                        response(console.log(response))
                    })
            }
        },
        created() {
            this.getBigCategory()
        }
    }

正常動作するコード

routes/api.php

Route::get(
    '/test',
    [Test::class, 'test_function']
);

resources/js/components/EnduserSearchstore.vue

import axios from 'axios';

    export default {
        data() {
            return {
                users: {},
            }
        },
        methods: {
            getBigCategory() {
                axios.get('/api/test')
                    .then((response) => {
                        // this.users = response.data.users
                        response(console.log(response))
                    })
            }
        },
        created() {
            this.getBigCategory()
        }
    }

 修正内容

axiosでURLを指定している箇所を「axios.get(‘/api/test’)」と指定してあげる。

Laravelでは、route/api.phpで指定したルーティングではデフォルトで接頭辞に「/api」が付くことになっているっぽいです。
そのため、エラーになるコードではVue側で呼び出しているURLは存在しない遷移先となっています。

LaravelのAPIのルーティングはデフォルトが付くのを忘れないようにしましょう〜。