1. RESTful APIとは？
2. SPA（シングルページアプリケーション）とは？
3. RESTful APIとSPAの関係性
4. PHPとReactを使った例
   • PHPによるRESTful API
   • ReactによるSPA
5. セキュリティとパフォーマンスの考慮
   • セキュリティ
   • パフォーマンス

RESTful APIとは？

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の効率的な利用などのテクニックを活用します。

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

スタイルを当てる事に焦点を置いているので、UIのダサさは気にしないでください。

そんなときのちょっとしたTipsを紹介します。

完成形

変更前

変更後

なぜEditorに独自スタイルを当てるのか？

ITリテラシーが低いユーザーに使用してもらうのが、一番の理由です。

殺風景なUIだとその時点でユーザーが離れてしまうことに最近気づきました。

プログラマーやエンジニアをやっている人には理解できないかもしれないのですが、リテラシーの低い人はとことん低いです。

• 画面が味気ない
• よくわからないボタン
• 英語

少し考えたら分かるだろうと怒りたい気持ちもあるのですが、使ってもらえなければただのゴミを作ってしまうことになるので、工夫が必要です。

CSSの定義

Laravel の指定ディレクトリに Quill 用の CSS を用意します。

• `resources/css/Quill/style.css`
• Quill 用にディレクトリを切って用意したほうが得策な気がします…

.quill {
    .ql-toolbar {
        background-color: rgb(148 163 184); /* bg-slate-400 */
    }

    .ql-editor {
        h1, h2, h3 {
            padding-left: 0.5rem;
            border-radius: 0.5rem; /** rounded-lg */
            background-color: rgb(56 189 248); /* bg-sky-400 */
            color: white;
            margin-bottom: 1.2rem;
        }

        p {
            font-size: 1rem;
            margin-bottom: 1.2rem;
        }
    }
}

定義したCSSをQuillコンポーネントで読み込み

先ほど定義した CSS をQuill を定義しているコンポーネント内でインポートします。

• Quill のデフォルトのスタイルを上書きするために ‘react-quill/dist/quill.snow.css’ の後にインポートするようにします

import React from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import '@/../css/Quill/style.css';

export default function QuillEditor({ handleValueChange, value }) {
    const customToolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        ['link', 'image'],
        ['blockquote', 'code-block'],

        [{ 'header': 1 }, { 'header': 2 }],               // custom button values
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
        [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
        [{ 'direction': 'rtl' }],                         // text direction

        [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
        [{ 'font': [] }],
        [{ 'align': [] }],

        ['clean']    
    ];

    // 親コンポーネントから受け取った関数を使って、inputの値を渡す
    const handleContentValueChange = (content) => {
        handleValueChange(content);
    };

    return (
        <ReactQuill
            theme="snow"
            value={value} // 親コンポーネントから受け取った値を設定
            onChange={handleContentValueChange}
            modules={{
                toolbar: customToolbarOptions,
            }}
        />
    );
}

ReactQuill素晴らしい

ReactQuillをメンテナンスしてくれている方たちに感謝を伝えたいです。

すごくお世話になっています。ありがとう。

1. 技術構成
2. いい感じなフォトギャラリーないのか
3. 実際に導入

技術構成

いい感じなフォトギャラリーないのか

HP作成を行っているとスライダーの要望が度々出てくるはずです。

かくいう僕も今回、そういった要望があってスライダーを導入しなければいけない状態でした。

一度、jQueryで生実装したことがあるのですが、なんやかんや面倒くさい思いをした苦い経験があったので、今回は生実装を避けたいという思いからReact でいい感じなライブラリないのか調べたところ「react-image-gallery」に出会いました。

天下のReact 様は流石だなと言う感じです。

react-image-gallery以外の選択肢としては以下のようなものが挙げられます。

実際に導入

npm でインストール。

npm install react-image-gallery

インポート

import ImageGallery from 'react-image-gallery';
import 'react-image-gallery/styles/css/image-gallery.css';

※2行目のcss もインポートしてください。
　css もインポートすることで梱包されているスタイルを当てることが可能です。

上記の設定で使う準備が完了です。

あとは自由に設定していくだけです。

今回はLaravel からデータを渡すため、コントローラーから配列を渡します。（本当はModel でデータ定義して渡すべきですが、）

$images = [
            [
                "original" => "/img/AsItFlows/asit_team.jpg",
                "thumbnail" => "/img/AsItFlows/asit_team.jpg",
                "originalAlt" => "チーム",
                "thumbnailAlt" => "チーム",
                "onErrorImageURL" => "/img/AsItFlows/logo.jpg",
            ],
            [
                "original" => "/img/AsItFlows/sunset.jpg",
                "thumbnail" => "/img/AsItFlows/sunset.jpg",
                "originalAlt" => "サンセット",
                "thumbnailAlt" => "サンセット",
                "onErrorImageURL" => "/img/AsItFlows/logo.jpg",
            ],
            [
                "original" => "/img/AsItFlows/surf_member.jpg",
                "thumbnail" => "/img/AsItFlows/surf_member.jpg",
                "originalAlt" => "メンバー",
                "thumbnailAlt" => "メンバー",
                "onErrorImageURL" => "/img/AsItFlows/logo.jpg",
            ],
            ...
        ];
        shuffle($images);
        return Inertia::render('Public/AsItFlows/Top', [
            'items' => $images
        ]);

最後にjsx 側でいい感じに使用します。

<ImageGallery items={items}
  showNav={true}
  autoPlay={true}
  showFullscreenButton={false}
  useBrowserFullscreen={false}
  showPlayButton={false}
/>

んー。素敵。

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っぽい。。。

注意点

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

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

1. 画面真っ白に
2. エラー文言
3. portがおかしい
4. 解決方法

画面真っ白に

表題の通り、Docker+Laravel+React+Viteで環境構築後にnpm run dev で画面が真っ白になってしまった。

docker --version
Docker version 20.10.6, build 370c289

php artisan --version
[22-Jul-2023 14:05:32 Asia/Tokyo] Xdebug: [Step Debug] Could not connect to debugging client. Tried: host.docker.internal:9000 (through xdebug.client_host/xdebug.client_port).
Laravel Framework 10.15.0

npm list --depth=0
data@ /data
+-- @headlessui/react@1.7.15
+-- @inertiajs/react@1.0.9
+-- @tailwindcss/forms@0.5.4
+-- @vitejs/plugin-react@3.1.0
+-- autoprefixer@10.4.14
+-- axios@1.4.0
+-- laravel-vite-plugin@0.7.8
+-- postcss@8.4.27
+-- react-dom@18.2.0
+-- react@18.2.0
+-- tailwindcss@

エラー文言

デベロッパーツール＞Console

GET http://127.0.0.1:5173/@vite/client net::ERR_CONNECTION_REFUSED
localhost/:25     GET http://127.0.0.1:5173/resources/js/app.jsx net::ERR_CONNECTION_REFUSED
localhost/:25     GET http://127.0.0.1:5173/resources/js/Pages/Welcome.jsx net::ERR_CONNECTION_REFUSED
localhost/:20     GET http://127.0.0.1:5173/@react-refresh net::ERR_CONNECTION_REFUSED

portがおかしい

ConsoleのリクエストURLからportがおかしいことに気づく。

Dockerのnginxで指定していたportは8080:80にしていたのだが、http://127.0.0.1:5173となっている。

うーん。なぜだ。

解決方法

Laravel,Reactを導入しているコンテナの設定が漏れている気がしてきた。

Dockerにてアプリケーションコンテナにportをしてみると解決できた。

docker-compose.ymlに以下を追記。

app:
    build: ./docker/php
    volumes:
      - ./src:/data
    ports:
    - 5173:5173  ←vite用port開通

そして、viteがホストを参照するようにするため、package.jsonに以下を追記。

"scripts": {
        "dev": "vite --host",   ←--hostを追記
        "build": "vite build"
    },

これで解決できた−

1. MapとSetについて
2. データの格納方法
   • Map
   • Set
3. 要素へのアクセス方法
   • Map
   • Set
4. 順序の保持
   • Map
   • Set
5. サイズの取得
   • Map/Set
6. 重複の取り扱い
   • Map
   • Set

MapとSetについて

Map と Set は、JavaScriptやTypeScriptにおけるデータ構造の異なるオブジェクトです。

データの格納方法

Map

Map はキーと値のペアを格納するデータ構造です。各要素はキーと値の組み合わせで構成され、キーは一意でなければなりません。キーは任意のデータ型で指定できます。

// Mapの使用例 
const myMap = new Map(); 
// キーと値の追加 
myMap.set("key1", "value1"); 
myMap.set("key2", "value2");

Set

Set は一意の値の集合を格納するデータ構造です。重複する値を持たず、順序を保持しません。各要素は一意であり、重複した値を持つことはありません。要素は任意のデータ型で指定できます。

// Setの使用例 
const mySet = new Set(); 

// 値の追加 
mySet.add("value1"); 
mySet.add("value2"); 
mySet.add("value3"); 
mySet.add("value2"); // 重複した値は追加されません

要素へのアクセス方法

Map

Map はキーと値のペアを持つため、キーを使用して要素にアクセスします。get() メソッドを使用してキーに対応する値を取得できます。

//単一の取得
map.get(key)

//一括
myMap.forEach((value, key) => {
  console.log(key, value);
});

Set

Set は単一の値の集合を持つため、値自体を使用して要素にアクセスします。

または、配列に変換して要素にアクセスすることも可能っちゃ可能です。↓
Setを配列に変換する
ただ、せっかくSetで値を用意しているのに配列に変換してっていうのは野暮な感じがしますね。笑

順序の保持

Map

Map は要素の追加順序を保持します。要素を追加した順番にイテレーションが行われます。

Set

Set は要素の追加順序を保持しません。要素を追加した順番にアクセスすることはできません。

サイズの取得

Map/Set

どちらもsize プロパティを使用して要素数を取得できます。

// マップのサイズ取得 
console.log(myMap.size); // 1
// セットのサイズ取得 
console.log(mySet.size); // 3

重複の取り扱い

Map

Map はキーが一意であるため、同じキーで要素を追加すると、後続の値で上書きされます。

Set

Set は重複した値を持たないため、同じ値を複数回追加しても、最初の1つしか保持しません。