導(dǎo)入

動的でインタラクティブな Web アプリの開発は、動的で常に変化する Web 開発の世界において非常に重要です。ユーザー インターフェイスを作成するための JavaScript ツールキットである React は、その速度と多用途性により大きな人気を博しています。ただし、PHP は依然としてサーバーサイド プログラミングの強力な選択肢です。このチュートリアルでは、PHP バックエンドと React フロントエンドの機能を簡単に組み合わせて、それぞれの長所を最大限に活用する方法を説明します。

PHP と React の異なる役割を理解する

PHPとは

PHP という用語は、Hypertext Preprocessor の頭字語です。 Web開発に使用されるサーバーサイドスクリプト言語です。 HTML ファイルに簡単に埋め込むことができます。 HTML コードは PHP ファイルに記述することもできます。

PHPのメリット

以下に PHP の利點をいくつか示します
學(xué)習(xí)と使用の容易さ:

• PHP は、初心者にとって比較的簡単な単純な構(gòu)文で知られています。このシンプルさは、新しい開発者が Web アプリケーションの構(gòu)築を迅速に開始するのに役立ちます。

幅広い採用とコミュニティサポート:

• PHP には大規(guī)模で活発なコミュニティがあります。これは、広範(fàn)なドキュメント、多數(shù)のチュートリアル、豊富なオンライン リソースを意味します。コミュニティ サポートは、事前に作成された膨大なコード、フレームワーク、プラグイン ライブラリにも変換されます。

統(tǒng)合機能:

• PHP は、さまざまなデータベース (MySQL、PostgreSQL、SQLite など)、Web サーバー (Apache や Nginx など)、およびその他のサービスとシームレスに統(tǒng)合します。これにより、Web 開発に多用途の選択肢となります。

オープンソース:

• PHP は無料で使用および配布できます。これにより、特に中小企業(yè)や新興企業(yè)にとって、開発コストが削減されます。

クロスプラットフォーム互換性:

• PHP は、Windows、Linux、macOS などの複數(shù)のプラットフォームで実行できます。この柔軟性により、PHP アプリケーションを互換性の問題なくさまざまな環(huán)境にデプロイできるようになります。

PHPのデメリット

以下に PHP のデメリットをいくつか示します。

1. 関數(shù)の名前とパラメータの順序が一貫していません:

   • PHP に対するよくある批判の 1 つは、関數(shù)の命名規(guī)則とパラメーターの順序が一貫していないことです。たとえば、関數(shù)には異なる命名パターン (str_replace と strpos) やパラメータの順序 (array_filter($array, $callback) と array_map($callback, $array)) がある場合があります。この矛盾は、特に新しい開発者にとって、混亂やエラーにつながる可能性があります。

2. 過去のセキュリティ問題:

   • PHP には、その広範(fàn)な使用とその設(shè)計方法が原因で、セキュリティ上の脆弱性の歴史がありました。最新の PHP はセキュリティ機能の點で大幅に向上していますが、従來のコードベースや以前のバージョンの悪い習(xí)慣は依然としてセキュリティ リスクを引き起こす可能性があります。

3. 他の言語と比較したパフォーマンス:

   • PHP はパフォーマンスの向上において大きな進歩を遂げましたが (特に PHP 7 以降)、特定のタスクでは Node.js や Go などの他の言語と比較すると依然として遅い場合があります。これは、非常に高いパフォーマンスと低遅延を必要とするアプリケーションにとっては欠點となる可能性があります。

4. 弱い型付け:

   • 暗黙的な型変換を可能にする PHP の弱い型付けシステムは、予期しない動作や追跡が困難なバグを引き起こす可能性があります。たとえば、文字列と數(shù)値を比較すると、予期しない結(jié)果が生じる可能性があります ("123" == 123 は true ですが、"123" === 123 は false)。これは、特に大規(guī)模で複雑なコードベースの場合、問題となる可能性があります。

5. 古い手続きコードへの過度の依存:

   • 多くの PHP アプリケーションやチュートリアルでは、最新のオブジェクト指向または関數(shù)型プログラミングの手法ではなく、古い手続き型プログラミング手法が依然として使用されています。これにより、コードが保守しにくくなり、読みにくくなる可能性があります。最新のフレームワークはより良い実踐を奨勵していますが、手続き型コードのレガシーは依然として重大な問題となる可能性があります。

リアクトとは

React JS は、ユーザー インターフェイスを構(gòu)築するための宣言的で効率的かつ柔軟な JavaScript ライブラリです。 MVC の「V」です。 ReactJS はオープンソースのコンポーネントベースのフロントエンド ライブラリであり、アプリケーションのビュー層のみを擔(dān)當(dāng)します。 Facebook によって管理されています。

React Jsのメリット

以下に React Js のメリットをいくつか示します。

1. コンポーネントベースのアーキテクチャ:

   • React はコンポーネントベースのアーキテクチャに従っており、開発者は再利用可能な UI コンポーネントを構(gòu)築できます。このモジュール性により、よりクリーンで保守性が高く、スケーラブルなコードが実現(xiàn)します。コンポーネントはアプリケーションのさまざまな部分で再利用できるため、冗長性が削減され、開発効率が向上します。

2. パフォーマンスを向上させる仮想 DOM:

   • React は仮想 DOM (ドキュメント オブジェクト モデル) を使用してレンダリング パフォーマンスを最適化します。アプリケーションの狀態(tài)が変化すると、React は最初に仮想 DOM を更新し、その後、必要な場合にのみ実際の DOM を効率的に更新します。これにより、DOM の直接操作が最小限に抑えられ、より高速かつ効率的な更新が可能になり、頻繁に UI が変更される複雑なアプリケーションにとって特に有益です。

3. 宣言型 UI:

   • React の UI 構(gòu)築に対する宣言型アプローチにより、コードがより予測可能になり、デバッグが容易になります。開発者は特定の狀態(tài)で UI がどのように見えるべきかを記述し、React が狀態(tài)の変化に基づいて実際の UI を更新します。これにより、インタラクティブなユーザー インターフェイスの開発プロセスが簡素化され、コードが読みやすくなります。

4. 豊かなエコシステムとコミュニティのサポート:

   • React には、機能を強化する多數(shù)のライブラリ、ツール、拡張機能を備えた広大なエコシステムがあります。強力なコミュニティ サポートにより、開発者は広範(fàn)なリソース、チュートリアル、サードパーティ コンポーネントに確実にアクセスできます。さらに、Facebook の支援と世界中の多數(shù)の開発者からの貢獻(xiàn)により、React は常に最新の狀態(tài)に保たれ、継続的に改善されています。

5. JSX の強力なサポート:

   • React は、JavaScript 內(nèi)で HTML を記述できるようにする構(gòu)文拡張である JSX (JavaScript XML) を使用します。 JSX は、React コンポーネントの作成プロセスを簡素化し、構(gòu)造 (HTML) をロジック (JavaScript) から視覚的に分離することでコードを読みやすくします。このマークアップとロジックの緊密な統(tǒng)合により、開発効率が向上し、開発者のコ??ンテキスト切り替えが軽減されます。

React Jsのデメリット

以下に React Js のデメリットをいくつか示します。

1. 急な學(xué)習(xí)曲線:

   • React の柔軟性とそのエコシステム內(nèi)の幅広いツールとライブラリにより、初心者にとって學(xué)習(xí)曲線は急なものになる可能性があります。 JSX、コンポーネント、狀態(tài)管理、仮想 DOM の複雑さなどの概念を理解することは、新しい開発者にとって難しい場合があります。

2. 定型文と複雑さ:

   • React プロジェクトのセットアップには、多くの場合、かなりの定型コードと構(gòu)成が含まれます。 Create React App などのツールを使用すると初期セットアップが簡素化されますが、プロジェクトが成長するにつれて複雑さが増し、追加の構(gòu)成と Webpack や Babel などのビルド ツールの理解が必要になる可能性があります。

3. 急速に変化する環(huán)境:

   • React エコシステムは急速に進化しており、頻繁に更新され、新しいツールが定期的に登場します。最新のベスト プラクティス、アップデート、ライブラリを常に最新の狀態(tài)に保つことは、開発者にとって大変な作業(yè)となる場合があります。この急速な変更により、ドキュメントが古くなったり、異なるライブラリやバージョン間の互換性に関する問題が発生したりする可能性があります。

4. SEO が悪い:

   • デフォルトでは、React はクライアント側(cè)でアプリケーションをレンダリングします。これにより、検索エンジン クローラーが動的コンテンツのインデックスを作成するのが困難になる可能性があるため、SEO パフォーマンスの低下につながる可能性があります。 Next.js などのフレームワークを使用したサーバーサイド レンダリング (SSR) などのソリューションは存在しますが、それらを?qū)g裝するとプロジェクトがさらに複雑になります。

5. 狀態(tài)管理の複雑さ:

   • 大規(guī)模な React アプリケーションでの狀態(tài)の管理は複雑になる場合があります。 React に組み込まれた狀態(tài)管理は小規(guī)模なアプリケーションではうまく機能しますが、スケールアップするには、Redux、MobX、または Context API などのより高度な狀態(tài)管理ソリューションが必要です。これらのソリューションはさらに複雑さを増し、追加の學(xué)習(xí)とセットアップが必要になります。

最新の Web アプリケーションにおける PHP と React の相乗効果

最新の Web アプリケーションにおける PHP と React の相乗効果は、両方のテクノロジーの強みを活用して、堅牢で動的、スケーラブルなアプリケーションを作成します。ここでは、これらのテクノロジーがどのように相互に補完し合うのか、またそれらを組み合わせることで得られる利點について詳しく説明します。

React で PHP を使用する 5 つの利點

注: メリットは 5 つ以上ありますが、ここではその一部を紹介します。

1. フルスタックの多用途性

フロントエンドとバックエンドの統(tǒng)合:

• シームレスなデータ処理: React はフロントエンドを効果的に管理し、PHP はサーバー側(cè)のロジックとデータ交換を処理できるため、一貫した開発環(huán)境が実現(xiàn)します。

• API 主導(dǎo)の開発: GraphQL または RESTful エンドポイントを介して React フロントエンドにデータを供給することで、PHP は強力なバックエンド API として機能し、明確な責(zé)任分擔(dān)が可能になります。

開発の効率:

• 並行開発: チームがフロントエンド プロジェクトとバックエンド プロジェクトに同時に取り組むことで、開発をスピードアップし、ボトルネックを解消できます。

• 再利用されたコンポーネント: React のコンポーネントベースの設(shè)計により、フロントエンド開発はよりモジュール化され、管理しやすくなり、UI 要素の再利用が保証されます。

2. スケーラビリティ

高負(fù)荷の管理:

• 効果的なバックエンド: Laravel のような PHP フレームワークは、大量のデータとユーザー リクエストを効果的に管理し、複雑でスケーラブルなバックエンド プロセスを処理するように設(shè)計されています。

• フロントエンドの最適化: 複雑でデータ集約型のアプリであっても、React の仮想 DOM と効果的な差分手法により、UI の迅速かつ応答性の高い変更が保証されます。

マイクロサービスのアーキテクチャ:

• モジュラーアプローチ: PHP がマイクロサービス アーキテクチャに含まれている場合、さまざまなサービスを個別に拡張できます。 React は、必要に応じてこれらのサービスを使用できるようにすることで、スケーラビリティを促進します。

• 負(fù)荷分散: サーバー側(cè)の操作を処理する PHP とクライアント側(cè)の対話を処理する React の間で負(fù)荷を分散することで、プログラム全體としてより多くのトラフィックをうまく管理できます。

3. パフォーマンス

読み込み時間の短縮:

• サーバーサイド レンダリング (SSR): 初期 HTML は PHP によって事前レンダリングされてクライアントに送信され、その後 React によってハイドレートされます。この方法により、ユーザー エクスペリエンスが向上し、初期読み込み時間が短縮されます。

• 非同期データ取得: React を使用すると、PHP バックエンドからデータを非同期に取得でき、応答性の高いユーザー インターフェイスとデータ変更の効果的な処理を維持できます。

コミュニケーションの強化:

• 効果的な狀態(tài)管理: コンテキストやフックなどの React の狀態(tài)管理機能により、UI 狀態(tài)の変更をより適切に処理できるようになり、無駄な再レンダリングの必要性が最小限に抑えられます。

• キャッシュと最適化: PHP はサーバー側(cè)のキャッシュ技術(shù)を使用して、靜的マテリアルの提供を高速化し、データベースの需要を下げることができるため、パフォーマンスが向上します。

4. 豊富なユーザーインターフェイス

インタラクティブで動的な UI:

• コンポーネントベースの設(shè)計: React のコンポーネントベースの設(shè)計により、プログラマーは更新や拡張が簡単な複雑で対話型のユーザー インターフェイスを作成できます。

• リアルタイム更新: React は動的なコンテンツ変更とリアルタイム更新を効率的に処理でき、スムーズで興味深いユーザー エクスペリエンスを?qū)g現(xiàn)します。

ユーザーエクスペリエンスの向上:

• 現(xiàn)代の UI ライブラリ: React は現(xiàn)代の UI ライブラリやフレームワーク (マテリアル UI や Ant Design など) とうまく連攜し、プログラマーが美しく直感的なユーザー インターフェイスをデザインできるようにします。

• React を使用すると、さまざまなデバイスや畫面サイズで効果的に機能する、レスポンシブ と適応性のあるユーザー インターフェイス (UI) の構(gòu)築が簡単になります。

5. SEO に優(yōu)しい

検索エンジンの最適化の向上:

• サーバーサイド レンダリング (SSR): HTML コンテンツをクライアントに提供する前に PHP を使用して事前レンダリングすると、検索エンジンのインデックス作成と SEO が向上します。

• メタ タグと動的マテリアル: PHP バックエンドからの情報を使用して、React はメタ タグ、タイトル、その他の SEO 関連のマテリアルを動的に管理および更新できます。

クローラビリティの向上:

• 靜的サイト生成 (SSG): React は、両方をサポートする Next.js のようなソリューションを利用することで、ビルド時に靜的ページを生成し、動的コンテンツ用の PHP を保持しながらアプリケーションの SEO を向上させることができます。 SSR と SSG。

• URL 構(gòu)造: React はルーティングとナビゲーションを処理して、訪問者と検索エンジンがサイトを簡単に探索できるようにします。一方、PHP は明確で SEO に適した URL 構(gòu)造を管理できます。

開発者は、PHP を React と統(tǒng)合することで、豊富なユーザー エクスペリエンスと検索エンジンの最適化を備えた、堅牢でスケーラブルでパフォーマンスが最適化されたオンライン アプリを構(gòu)築できます。相乗効果により、フロントエンドとバックエンドのテクノロジーを組み合わせて、強力で適応性のある開発プロセスを作成できます。

---

PHP および React 開発環(huán)境の作成

この時點で、React.js と PHP をフロントエンドとして使用して実際のプロジェクトを開始しようとしています。

前提條件

開発者として知っておくべきことや、PHP を React のバックエンドとして機能させるために必要なことがあります。必須リストはこちらです!

• PHP の基本的な知識がある
• React.J を理解する
• npm を伴う Node.js がマシンにインストールされていることを確認(rèn)してください。
• システムに PHP がインストールされている Apache または Nginx

React をフロントエンドとして使用し、PHP をバックエンドとして使用する方法の段階的なプロセス

PHP を React と一緒にバックエンドとして使用する手順は非常に簡単で、次のとおりです。

フロントエンドの構(gòu)築

ステップ 1: ターミナルを開き、以下のコマンドを?qū)g行します。

npx create-react-app my-react-app

注: このコマンドを?qū)g行する前に、反応フォルダーを配置するディレクトリに cd で移動する必要があります。目的のディレクトリに cd する方法は、ターミナルにこのコマンドを追加することです

cd Documents

この後、React アプリが作成されるまで待ちます。

ステップ 2: プロジェクト フォルダーに移動します:
作成したプロジェクトにはターミナルでアクセスする必要があります

cd my-react-app

ステップ 3: 開発サーバーを起動します:

npm start

PHP バックエンドの構(gòu)築
React アプリケーションが動作できるようになったので、PHP バックエンドを構(gòu)築します。

ステップ 1: React アプリのディレクトリ內(nèi)に PHP ファイル用の新しいフォルダーを作成します。
これを?qū)g現(xiàn)するには、ターミナルで次のコマンドを?qū)g行します

mkdir php_backend

このコマンドを?qū)g行すると、php_backend という名前のフォルダーが表示されます

ステップ 2: php-backend フォルダー內(nèi)に、index.php という名前のファイルを作成します。
注: 任意の名前を付けることができます。私の場合は、index.php.

を使用することにしました。

ステップ 3: Index.php で、PHP エンドポイントとロジックの定義を開始できます。
以下は、私の php-backend/index.php に書かれていることです。PHP 開発者であれば、この構(gòu)文に精通しているでしょう。

<?PHP 
$serverName="localhost";
$userName="root";
$password="";
$databaseName="react_php";
$conn = mysqli_connect($serverName, $userName, $password, $databaseName);

$recText = $_POST['text'];

$query = ("INSERT INTO react_php (texts) VALUES('$recText')");

if (mysqli_query($conn, $query)) {
  echo "Data has been inserted successfully";
}else {
  echo "Error";
}
?>

次に行うことは、前に作成した React コードに移動し、コード エディターでフォルダーを開くことです。src/App.js のようなフォルダーが表示され、この構(gòu)文を下に追加します。

import React, { Component } from 'react';
 // import logo from './logo.svg';
import axios from 'axios'; //Import Axios
import './App.css';

class App extends Component{
state = {
  text : ""
}
handleAdd = async e =>{
 await this.setState({
   text : e.target.value
 }) 
}
handleSubmit = e =>{
 e.preventDefault();
 console.log(this.state.text);
 let formData = new FormData();
 formData.append("text", this.state.text);
 const url = "http://localhost:80/react-backend/"
 axios.post(url,formData)
 .then(res=> console.log(res.data))
 .catch(err=> console.log(err))
}
render(){
  return(
    <div className="App-header">
     <input 
       onChange={this.handleAdd}
       className="form-control" 
       // value={this.state.text}
       type="text" 
       id='text' 
       placeholder='Enter Some Text!'/> 
       <br/>
       <button 
        onClick={this.handleSubmit}
        className="btn btn-success" 
        id='submit'>  Save</button>
    </div>
  );
}

}

デフォルトのアプリをエクスポート;

注: PHP の動作を可能にするのは **Axios** です。以下のコード スニペットを見て、それをどのように使用したかがわかります。

プロジェクトのパブリック フォルダーに、index.html ファイルが表示されます。使用しているフレームワークとしてブートストラップ cdn を追加しました。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> 

それでは、ちょっとしたスタイリングをご紹介します。

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
   animation: App-logo-spin infinite 20s linear;
  }
}

 .App-header {
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
 }

 .App-link {
   color: #61dafb;
 }

 @keyframes App-logo-spin {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(360deg);
 }
}

これらすべてを試した後、得られるビューは次のとおりです。

彼女はバックエンドを制御するデータベースです。テキストを入力して「保存」をクリックすると、テキストがデータベースに自動的に表示されます。

以下、**フレディ**と書き、下に表示される畫像の右上隅にある參照をクリックします。これを見たら、自分が正しいことをしたことがわかります。

これは、単一アプリケーションの React と PHP で使用したステップです。

結(jié)論

結(jié)論として、バックエンドとしての PHP とフロントエンドとしての React を統(tǒng)合することで、最新の Web アプリケーション開発のための堅牢かつ多用途のソリューションが提供されます。説明したように、この組み合わせでは、PHP のサーバー側(cè)機能と React の動的なコンポーネントベースのアーキテクチャの長所を活用して、スケーラブルで高性能なアプリケーションを作成します。 PHP はサーバー側(cè)ロジック、データベース インタラクション、API 作成を効率的に処理し、React は機能豊富で応答性の高いユーザー インターフェイスとシームレスなデータ処理を保証します。

PHP と React のこの相乗効果により、開発プロセスが強化されるだけでなく、インタラクティブで魅力的で SEO に優(yōu)しい Web アプリケーションが作成されます。この強力な統(tǒng)合を採用することで、開発者は包括的でユーザー中心の Web アプリケーションを簡単かつ効率的に構(gòu)築できるようになります。

このチュートリアルが非常に価値のあるものであると感じていただければ幸いです。次回まで、さようなら。

著者について

フルスタック Laravel 開発者 Emmanuel Okolie は、ソフトウェア開発において 4 年以上の経験があります。彼は、ソフトウェア開発、執(zhí)筆、他の人への指導(dǎo)を組み合わせることで、本格的なスキルを開発しました。

彼のスタックには、ReactJ、Laravel、PHP、JavaScript、その他の言語やフレームワークが含まれています。
フリーランサーとして、彼はクライアント向けの Web サイトを作成し、人々に自分の仕事のやり方を示す技術(shù)ガイドを執(zhí)筆しています。

機會があれば、エマニュエル?オコリーはあなたとお話できることを楽しみにしています。彼の ウェブサイト、Facebook、Github、LinkedIn、および Twitterにアクセスしてフォローしてください。

以上がフロントエンドに React を使用して PHP をバックエンドとして使用する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。