PHPとJavaScriptの違い：サーバー・ブラウザ・Node.js

PHPはサーバーで動きます。ページを組み立て、完成したHTMLを送って終了します。JavaScriptは訪問者のブラウザで動き、クリックに反応して、読み込みが終わったあとのページを変更します。Node.jsを使えばサーバーでも動きます。つまり2つはライバルというよりパートナーで、典型的なサイトはサーバーでPHP（またはNode.js）を、ブラウザでJavaScriptを使います。

このPHPコードはサーバーで動きます。ブラウザが受け取るのは出力された内容だけで、Pageタブにはその結果が表示されます。

<?php
$products = [
    ["name" => "Keyboard", "price" => 49],
    ["name" => "Mouse", "price" => 19],
    ["name" => "Monitor", "price" => 189],
];
$total = array_sum(array_column($products, "price"));
?>
<h2>Cart</h2>
<ul>
<?php foreach ($products as $p): ?>
    <li><?= $p["name"] ?>: $<?= $p["price"] ?></li>
<?php endforeach; ?>
</ul>
<p>Total: $<?= $total ?></p>

Outputタブを見てください。PHPは何も残っておらず、HTMLだけです。同じリストをブラウザのJavaScriptで作ると次のようになります。

const products = [
  { name: "Keyboard", price: 49 },
  { name: "Mouse", price: 19 },
  { name: "Monitor", price: 189 },
];

const ul = document.querySelector("#cart"); // an empty <ul id="cart"> in the HTML
for (const p of products) {
  const li = document.createElement("li");
  li.textContent = `${p.name}: $${p.price}`;
  ul.append(li);
}

PHP版は完成したページを送るので、検索エンジンや遅いスマートフォンでもすぐに読めます。JavaScript版は、たとえば訪問者が商品を削除したときなどに、再読み込みせずにあとからリストを更新できます。

それぞれの言語が動く場所

最後の行はセキュリティ上重要です。ブラウザのJavaScriptにあるものはすべて訪問者に見えるので、パスワード、APIキー、価格のチェックはサーバーに置くべきです。

文法を並べて比較

2つの言語はどちらもCから借りているので見た目が似ています。波括弧、if、for、while、function、returnです。違いは細部にあります。

PHPでコールバックを使う関数の例です。

<?php
$prices = [12.5, 8, 30, 4.25];

$withTax = array_map(fn($p) => round($p * 1.2, 2), $prices);
$cheap = array_filter($withTax, fn($p) => $p < 15);

echo implode(", ", $withTax), "\n";
echo "Under 15: " . implode(", ", $cheap) . "\n";
echo "Count: " . count($cheap) . "\n";

JavaScriptではmapとfilterは配列のメソッドです。

const prices = [12.5, 8, 30, 4.25];

const withTax = prices.map((p) => Math.round(p * 1.2 * 100) / 100);
const cheap = withTax.filter((p) => p < 15);

console.log(withTax.join(", "));
console.log("Under 15: " + cheap.join(", "));

+演算子：定番の罠

JavaScriptの+は数値の足し算と文字列の連結の両方を行うので、どこかに文字列があると足し算が連結に変わります。PHPは2つを分けていて、+は常に足し算、.は常に連結です。

<?php
var_dump("10" + 5);     // int(15): + always adds
var_dump("10" . 5);     // string "105": . always joins
var_dump(10 . "");      // number to string
var_dump("3" * "4");    // numeric strings multiply
var_dump(0.1 + 0.2 === 0.3); // floats are inexact in both languages

console.log("10" + 5);  // "105"
console.log("10" - 5);  // 5
console.log("3" * "4"); // 12
console.log(0.1 + 0.2 === 0.3); // false

どちらの言語にもゆるい==と厳密な===があります。アドバイスもどちらも同じで、型をまたいで比較するつもりがなければ===を使います。

PHPからJavaScriptにデータを渡す

PHPが先に動くので、ブラウザのJavaScriptが使うデータをページに直接書き込めます。json_encodeはPHPの配列を正しいJavaScriptに変換します。

<?php
$user = ["name" => "Ada", "role" => "admin", "unread" => 3];
?>
<p id="greeting">Loading...</p>
<script>
const user = <?= json_encode($user, JSON_HEX_TAG | JSON_HEX_AMP) ?>;
document.getElementById("greeting").textContent =
    "Hi " + user.name + ", you have " + user.unread + " new messages";
</script>

Outputタブには、データが埋め込まれた状態で生成されたスクリプトが表示されます。JSON_HEX_TAGフラグは<と>をエスケープするので、</script>を含む値があってもスクリプトが途中で終わることはありません。オプションについてはjson_encodeで詳しく説明しています。

逆方向はHTTPで行います。ブラウザのJavaScriptがfetch("/api/cart.php")を呼ぶとPHPスクリプトが実行され、JSONで応答します。

<?php
// api/cart.php
header('Content-Type: application/json');
echo json_encode(['items' => 3, 'total' => 257]);

const res = await fetch("/api/cart.php");
const cart = await res.json();
console.log(cart.total); // 257

サーバー側のPHPとNode.js

JavaScriptがNode.jsでサーバー上で動く場合、比較は本当の選択になります。

PHPのモデルは寛容です。バグやメモリリークの影響は1つのリクエストにとどまり、各リクエストはきれいな状態で始まります。Nodeのモデルは状態や接続を保持し続けられるのでチャットやリアルタイムのダッシュボードに向いていますが、クラッシュやブロッキングするループはそのプロセスの全ユーザーに影響します。

どちらを学ぶか

インタラクティブなWebページには必ずJavaScriptが必要です。ブラウザが実行する唯一の言語だからです。問題はサーバーで何を動かすかです。

• 次にPHPを学ぶ： WordPressやLaravel、数多くある既存のPHPサイトに関わりたい場合や、安価なサーバーで動的なサイトをいちばん簡単に公開したい場合。まずはPHPとはから始めてください。
• JavaScript（Node.js）を続ける： スタック全体を1つの言語で書きたい場合や、リアルタイムの機能を作る場合。

よくある道筋は、HTMLとCSS、次にブラウザのJavaScript、そしてサーバー言語を1つ、という順番です。どのサーバー言語を選んでも、フォーム、セッション、データベース、JSONのAPIは同じHTTPの考え方で動くので、知識はそのまま活かせます。