LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Leapcell(leapcell)

Next.js vs PHP：Web業務開発におけるコードの違いを比較

Posted at

Group194.png

Leapcell: The Best of Serverless Web Hosting

Webビジネス開発におけるNextjsとPHPの詳細比較

Web開発の分野において、NextjsとPHPは2つの一般的に使用される技術ソリューションです。NextjsはReactに基づくフロントエンドフレームワークで、強力なページレンダリングとデータ処理機能を提供します。一方、PHPページで直接ビジネスコードを記述する場合、フレームワークに依存することなく、迅速に動的なWebページ機能を実装することができます。本文では、NextjsとPHPのWebビジネス開発における性能を、ビジネスロジックの実装、データ処理、ページインタラクションなどの複数の次元から、実際のコード例を組み合わせて詳細に比較します。

Ⅰ. ビジネスロジックの基盤

1.1 Nextjsのビジネスロジックアーキテクチャ

Nextjsはコンポーネントベースの開発モデルを採用しており、ページを複数の独立したReactコンポーネントに分割し、各コンポーネントは特定のビジネスロジックを担当します。プロジェクト構造はpagesフォルダを核心としており、その中のファイルは異なるルーティングページに対応しています。例えば、簡単なブログ一覧ページを作成するには、pages/blog.jsに以下のコードを記述します：

import React from'react';

const Blog = () => {
  // ビジネスロジックに関連する状態と関数をここで定義できます
  return (
    <div>
      <h1>Blog List</h1>
      {/* ブログ一覧を表示するコード... */}
    </div>
  );
};

export default Blog;

このコンポーネントベースのアーキテクチャにより、コードは非常に再利用性と保守性に優れています。異なるビジネスモジュールを独立したコンポーネントにカプセル化することができ、複数のページで使用するのに便利です。

1.2 PHPのビジネスロジックアーキテクチャ

PHPでは、ビジネスロジックは通常直接.phpファイルに記述され、1つのファイルにはHTML、PHPコード、CSSスタイルが混在している場合があります。簡単なユーザーログインページの作成を例にとると、login.phpファイルの内容は以下の通りです：

<!DOCTYPE html>
<html>
<head>
    <title>User Login</title>
</head>
<body>
    <?php
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        $username = $_POST["username"];
        $password = $_POST["password"];
        // ユーザー名とパスワードを検証するビジネスロジック...
        if ($username === "admin" && $password === "123456") {
            echo "Login Successful";
        } else {
            echo "Incorrect Username or Password";
        }
    }
   ?>
    <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required><br>
        <input type="submit" value="Login">
    </form>
</body>
</html>

このPHPページのハイブリッドアーキテクチャは、シンプルなビジネスを扱う場合には比較的シンプルです。しかし、ビジネスの複雑性が増すにつれて、コードの可読性と保守性が影響を受けます。

Ⅱ. データ処理とインタラクション

2.1 Nextjsにおけるデータ処理

NextjsはgetStaticPropsやgetServerSidePropsといった関数を提供して、データの取得を処理します。バックエンドAPIからブログ記事一覧を取得して表示する必要がある場合、pages/blog.jsに以下のコードを記述できます：

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/blogs');
  const blogs = await res.json();
  return {
    props: {
      blogs
    }
  };
}

const Blog = ({ blogs }) => {
  return (
    <div>
      <h1>Blog List</h1>
      <ul>
        {blogs.map((blog) => (
          <li key={blog.id}>{blog.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default Blog;

クライアントサイドのインタラクションに関しては、NextjsはReactの状態管理メカニズム、例えばuseStateやuseReducerといったフック関数に依存して、動的なデータ更新を実現します。例えば、ブログ一覧に検索機能を追加するには：

import React, { useState } from'react';

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/blogs');
  const blogs = await res.json();
  return {
    props: {
      blogs
    }
  };
}

const Blog = ({ blogs }) => {
  const [searchTerm, setSearchTerm] = useState('');
  const filteredBlogs = blogs.filter((blog) =>
    blog.title.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div>
      <input
        type="text"
        placeholder="Search Blogs"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <h1>Blog List</h1>
      <ul>
        {filteredBlogs.map((blog) => (
          <li key={blog.id}>{blog.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default Blog;

2.2 PHPにおけるデータ処理

PHPは主にデータベースとのやり取りによってデータを処理します。MySQLデータベースを例にとると、mysqli拡張を使用してブログ記事一覧を取得し、ページに表示します。blog.phpのコードは以下の通りです：

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "myblog";

// 接続を作成
$conn = new mysqli($servername, $username, $password, $dbname);

// 接続をチェック
if ($conn->connect_error) {
    die("Connection Failed: ". $conn->connect_error);
}

$sql = "SELECT id, title FROM blogs";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    echo "<h1>Blog List</h1><ul>";
    while($row = $result->fetch_assoc()) {
        echo "<li>". $row["title"]. "</li>";
    }
    echo "</ul>";
} else {
    echo "No Blog Posts Found";
}

$conn->close();
?>

ユーザーが送信したデータを処理する際、PHPは$_POSTや$_GETといったスーパーグローバル変数を通じてデータを取得します。例えば、上記のブログ一覧に検索機能を追加するには：

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "myblog";

// 接続を作成
$conn = new mysqli($servername, $username, $password, $dbname);

// 接続をチェック
if ($conn->connect_error) {
    die("Connection Failed: ". $conn->connect_error);
}

$searchTerm = isset($_GET["search"])?. $_GET["search"] : "";
$sql = "SELECT id, title FROM blogs WHERE title LIKE '%$searchTerm%'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    echo "<form method='get' action=''><input type='text' name='search' value='$searchTerm'><input type='submit' value='Search'></form><h1>Blog List</h1><ul>";
    while($row = $result->fetch_assoc()) {
        echo "<li>". $row["title"]. "</li>";
    }
    echo "</ul>";
} else {
    echo "<form method='get' action=''><input type='text' name='search' value='$searchTerm'><input type='submit' value='Search'></form>No Blog Posts Found";
}

$conn->close();
?>

しかし、このようなSQL文を直接連結する方法にはSQLインジェクションのリスクがあり、実際の開発では厳格なデータフィルタリングとパラメータ化された照会が必要です。

Ⅲ. ページレンダリングと更新

3.1 Nextjsにおけるページレンダリング

Nextjsは複数のレンダリングモードをサポートしています。静的サイト生成（SSG）モードでは、getStaticProps関数がビルドプロセス中に実行され、ページを静的なHTMLファイルにレンダリングします。例えば：

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/blogs');
  const blogs = await res.json();
  return {
    props: {
      blogs
    },
    revalidate: 60 // データを60秒ごとに再検証
  };
}

const Blog = ({ blogs }) => {
  return (
    <div>
      <h1>Blog List</h1>
      <ul>
        {blogs.map((blog) => (
          <li key={blog.id}>{blog.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default Blog;

サーバーサイドレンダリング（SSR）モードでは、getServerSideProps関数が各リクエストで実行され、データをリアルタイムで取得してページをレンダリングします。クライアントサイドレンダリング（CSR）は、ページがロードされた後にJavaScriptを通じてページコンテンツを動的に更新するものです。

3.2 PHPにおけるページレンダリング

PHPはサーバーサイドで動的にHTMLページを生成し、それをクライアントに返します。ページデータが変更された場合、更新されたコンテンツを見るにはページをリフレッシュする必要があります。例えば、上記のブログ一覧ページの場合、各検索やデータ更新にはページ全体を再読み込みする必要があり、ユーザー体験が比較的悪くなります。ただし、PHPはAJAX技術を通じてページの部分的な更新を実現することもでき、ユーザー体験を向上させることができます。例えば、jQueryのAJAX機能を使用してブログ一覧の部分的な更新を実現するには：

<!DOCTYPE html>
<html>
<head>
    <title>Blog List</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#search-form').submit(function(event) {
                event.preventDefault();
                const searchTerm = $('#search').val();
                $.ajax({
                    type: 'GET',
                    url: 'blog.php',
                    data: { search: searchTerm },
                    success: function(response) {
                        $('#blog-list').html(response);
                    },
                    error: function() {
                        console.log('Request Failed');
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="search-form" method="get" action="blog.php">
        <input type="text" id="search" name="search" placeholder="Search Blogs">
        <input type="submit" value="Search">
    </form>
    <div id="blog-list">
        <?php
        $servername = "localhost";
        $username = "root";
        $password = "";
        $dbname = "myblog";

        // 接続を作成
        $conn = new mysqli($servername, $username, $password, $dbname);

        // 接続をチェック
        if ($conn->connect_error) {
            die("Connection Failed: ". $conn->connect_error);
        }

        $searchTerm = isset($_GET["search"])?. $_GET["search"] : "";
        $sql = "SELECT id, title FROM blogs WHERE title LIKE '%$searchTerm%'";
        $result = $conn->query($sql);

        if ($result->num_rows > 0) {
            echo "<h1>Blog List</h1><ul>";
            while($row = $result->fetch_assoc()) {
                echo "<li>". $row["title"]. "</li>";
            }
            echo "</ul>";
        } else {
            echo "No Blog Posts Found";
        }

        $conn->close();
       ?>
    </div>
</body>
</html>

Ⅳ. エラーハンドリングとデバッグ

4.1 Nextjsにおけるエラーハンドリングとデバッグ

Nextjsでは、Reactのエラー境界（Error Boundaries）メカニズムを使用して、子コンポーネント内のエラーをキャッチして処理することができます。例えば、エラー境界コンポー

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: true };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.log(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <div>An Error Occurred. Please Try Again Later.</div>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

このコンポーネントをページで使用するには：

import React from'react';
import ErrorBoundary from './ErrorBoundary';

const Blog = () => {
  // ここにエラーを引き起こす可能性のあるコードがあると仮定...
  return (
    <ErrorBoundary>
      <div>
        <h1>Blog List</h1>
      </div>
    </ErrorBoundary>
  );
};

export default Blog;

デバッグに関しては、Nextjsはブラウザの開発者ツールでのブレークポイントデバッグをサポートしており、React DevToolsを使うことで、コンポーネントの状態やPropsを見るのが便利です。

4.2 PHPにおけるエラーハンドリングとデバッグ

PHPではtry...catch文のブロックを使ってエラーハンドリングを行い、同時にerror_reportingやini_set関数を使ってエラー報告レベルを設定することができます。例えば：

try {
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "myblog";

    // 接続を作成
    $conn = new mysqli($servername, $username, $password, $dbname);

    // 接続をチェック
    if ($conn->connect_error) {
        throw new Exception("Connection Failed: ". $conn->connect_error);
    }

    // データベース操作を実行...

    $conn->close();
} catch (Exception $e) {
    echo "Error: ". $e->getMessage();
}

デバッグの際、開発者はvar_dumpやprint_rといった関数を使って変数の内容を出力することができ、またXdebugといったデバッグツールを使ってブレークポイントデバッグを行うこともできます。

Ⅴ. セキュリティ

5.1 Nextjsにおけるセキュリティ

セキュリティの面では、Nextjsでは開発者が入力データを厳密に検証し、フィルタリングする必要があり、XSS攻撃を防ぐためです。バックエンドAPIとのやり取りの際は、APIの認証と承認メカニズムが信頼性の高いものであることを確認する必要があり、データ漏えいを防ぐためです。同時に、HTTPSプロトコルを使ってデータを送信することで、機密情報の盗まれるのを防ぐことができます。

5.2 PHPにおけるセキュリティ

PHPはセキュリティの面でより多くの課題に直面しています。一般的なSQLインジェクション攻撃に加えて、ファイルインクルージョン脆弱性やコマンド実行脆弱性などの脆弱性も発生する可能性があります。SQLインジェクションを防ぐためには、パラメータ化された照会を使用する必要があります。例えば、mysqliの準備されたステートメントを使う場合：

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "myblog";

// 接続を作成
$conn = new mysqli($servername, $username, $password, $dbname);

// 接続をチェック
if ($conn->connect_error) {
    die("Connection Failed: ". $conn->connect_error);
}

$searchTerm = isset($_GET["search"])?. $_GET["search"] : "";
$sql = "SELECT id, title FROM blogs WHERE title LIKE?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("s", $searchTerm);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows > 0) {
    echo "<h1>Blog List</h1><ul>";
    while($row = $result->fetch_assoc()) {
        echo "<li>". $row["title"]. "</li>";
    }
    echo "</ul>";
} else {
    echo "No Blog Posts Found";
}

$stmt->close();
$conn->close();

また、ユーザーがアップロードするファイルを厳密に検証し、フィルタリングすることで、ファイルインクルージョン脆弱性を防ぎ、ユーザーが入力するコマンドを厳密にチェックして、コマンド実行脆弱性を防ぐ必要があります。

Ⅵ. 保守性と拡張性

6.1 Nextjsの保守性と拡張性

Nextjsのコンポーネントベースのアーキテクチャと明確なプロジェクト構造により、コードは非常に保守性が高くなっています。ビジネス要件が変更された場合、コンポーネントを修正するか新しいコンポーネントを追加することで対応することができます。同時に、Nextjsのエコシステムは豊富で、多数のサードパーティライブラリやプラグインを利用することができ、機能を拡張するのに便利です。例えば、複雑なグラフ表示機能を追加する場合、react-chartjs-2といったライブラリを導入することができます。

6.2 PHPの保守性と拡張性

PHPページで直接ビジネスコードを記述すると、プロジェクトの規模が大きくなるにつれて、コードが長くなり、入り乱れるため、保守性が低下します。拡張性の面では、PHPには豊富な拡張ライブラリがありますが、コード構造が明確でないため、新しい機能を追加する際には、元のコードに多くの修正を加える必要があり、開発コストとエラーのリスクが増加します。

Ⅶ. 結論

NextjsとPHPページで直接ビジネスコードを記述する方法はそれぞれ独自の特徴を持っています。Nextjsは、現代的で高いインタラクション性を持つWebアプリケーションの構築に適しており、性能最適化、コンポーネントの再利用、開発効率の面で優れたパフォーマンスを発揮しますが、開発者にはより高度なフロントエンド技術スタックが求められます。PHPは、シンプルで直接的なアプローチにより、迅速に動的なWebページを構築し、伝統的なビジネスロジックを処理する際に一定の利点を持っています。ただし、開発者はコードの保守性とセキュリティの面でより慎重になる必要があります。選択する際、開発者はプロジェクトの具体的な要件、チームの技術能力、将来的な拡張性などの要素を総合的に考慮し、Webビジネス開発に最適な技術ソリューションを選択する必要があります。

Leapcell: The Best of Serverless Web Hosting

最後に、Nodejsサービスをデプロイするのに最適なプラットフォームをおすすめします：Leapcell

brandpic7.png

🚀 好きな言語で構築

JavaScript、Python、Go、またはRustで簡単に開発できます。

🌍 無料で無制限のプロジェクトをデプロイ

使用した分だけ支払います — リクエストがなければ、請求もありません。

⚡ 使った分だけ請求、隠された費用はありません

アイドル料金はなく、シームレスなスケーラビリティが実現できます。

Frame3-withpadding2x.png

📖 ドキュメントを参照

🔹 Twitterでフォローしてください：@LeapcellHQ

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?