TypeScriptで人気のシステム構成５つを最速でつくってみた！
tiura
※この記事は、３つのAIに協力してもらいながら著者が慎重に裏取りしながら監修したものですが、実情とは異なるものも含まれているかもしれません。その際は、ぜひお問い合わせよりご連絡いただければ幸いです。
一緒に、現代の人気言語とフレームワークを最短で体験してみよう！
前回の記事「TypeScriptシステム構成20選！最速で現場でつかえる！TypeScript入門」では、TypeScriptを使ったWebシステムの構成パターンを、日本・海外のシェア感とあわせて整理しました。
今回はその続編として、20選の中から実際に現場でよく使われている5つの構成を選び、同じ題材を使って実際に環境を作り、動かしながら比較していきます。「表で見るだけ」では分からない、構築のしやすさ・つまずきやすいポイント・体感速度なども、あわせてレポートしていく予定です。
この記事ではいかの５つの人気の構成を一緒に体験してみたいと思います。
この記事の対象読者
- 前回記事(20選)を読んで、実際の構築イメージを掴みたい人
- 同じ処理を複数の構成で作った場合の違いを知りたい人
- 自分がこれから学ぶ構成を、他の選択肢と比較して選びたい人
共通の題材
全パターンで、以下の同じ仕様を実装します。作るものを揃えることで、構成ごとの違いが素直に見えるようにするのが狙いです。
productsテーブル：id（主キー）、name（text）、price（text）- 商品編集ページを表示し、保存を押すと更新される（新規登録機能はなし）
検証環境について
- PHP系（①③）：Windows + XAMPP（Apacheバーチャルホスト方式）
- Node.js系（②④⑤）：Node.jsのみで完結（XAMPP不要）
それぞれの構成をご紹介
前回のシェア表（20選）から、それぞれ対応する行を添えて紹介します。
① Laravel＋Blade＋素のTS
| 順位 | サーバー | フロント | JS/TS層 | 挙動 | 日本 シェア | 海外 シェア |
|---|---|---|---|---|---|---|
| 1 | Laravel | Blade | 素のTS | リロード型 | 16% | 5% |
日本国内シェアNo.1の組み合わせ。従来通りのリロード型システムに、画面の一部だけTypeScriptで型安全性を取り入れる、堅実な構成です。
② Express（TS）＋EJS
| 順位 | サーバー | フロント | JS/TS層 | 挙動 | 日本 シェア | 海外 シェア |
|---|---|---|---|---|---|---|
| 11 | Express(TS) | EJS | バニラJS(TS部分的) | リロード型 | 2% | 1% |
サーバーサイドもNode.js＋TypeScriptで統一する構成。PHPを使わず、Node.js単体で「通常のリロード型システム」を作るとどうなるかを検証します。
③ Laravel＋Inertia＋Vue
| 順位 | サーバー | フロント | JS/TS層 | 挙動 | 日本 シェア | 海外 シェア |
|---|---|---|---|---|---|---|
| 2 | Laravel | Inertia+React/Vue | TS | SPA | 12% | 8% |
既存のLaravel資産を活かしながら、画面側だけSPA化する構成。日本国内でも存在感のある組み合わせです。
④ Next.js（React）
| 順位 | サーバー | フロント | JS/TS層 | 挙動 | 日本 シェア | 海外 シェア |
|---|---|---|---|---|---|---|
| 6 | Next.js/Remix | React | React+TS | リロード型（モーダルなどパーツのみSPA） | 7% | 19% |
海外で圧倒的な支持を集める構成。サーバーサイドもクライアントサイドもTypeScriptで統一する「①全部TS」の代表例です。
⑤ NestJS＋React
| 順位 | サーバー | フロント | JS/TS層 | 挙動 | 日本 シェア | 海外 シェア |
|---|---|---|---|---|---|---|
| 3 | NestJS(TS) | なし | React/Vue/Angular+TS | SPA（API分離型のシステム） | 10% | 13% |
APIサーバーとフロントエンドを完全に分離する構成。エンタープライズ・大規模開発で評価されやすい組み合わせです。
性能面について、少しだけ
構成を選ぶうえで気になるのが「結局どれが速いのか」という点だと思います。詳しくは各記事や番外編で扱う予定ですが、ここでは概要だけ触れておきます。
- 静的ファイル配信では、Apache/NginxがNode.jsよりも明確に高速（実測ベースでおよそ2〜3倍）
- DB書き込みを伴う動的処理（今回の題材のようなPOST処理）では、逆にNode.jsがやや有利という調査結果が見られます
ただし、この「動的処理でNode.jsが有利」という差は、圧倒的なものではありません。PHP側もPersistent Connection（DB接続の使い回し）やOPcacheといったチューニング手段があり、実運用ではその差はかなり縮まります。将来的にはFrankenPHPのようなPHPの常駐実行モデルも登場しており、この住み分け自体、今後さらに変化していく可能性があります。
つまり「Node.jsが優れている／PHPが劣っている」という単純な話ではなく、静的配信が多いのか、動的なAPI処理が多いのかという、システムの特性によって向き不向きがある、というのが実情に近い理解です。
さいごに
次回以降、①から順番に、実際に環境を構築しながら記事にしていきます。同じ仕様を5つの構成で作ることで、「結局どれを学べばいいのか」「自分の状況に合うのはどれか」の判断材料になれば幸いです。
