TypeScriptで人気のシステム構成４つを最速でつくってみよう！
tiura
一緒に、現代の人気言語とフレームワークを最短ステップで体験！
前回の記事「TypeScriptシステム構成20選！」では、TypeScriptを使ったWebシステムの構成パターンを、人気順で整理しました。
今回はその続編として、20選の中から実際に現場でよく使われている４つの構成を選び、同じ題材を使って実際に環境を作り、動かしながら比較していきます。「表で見るだけ」では分からない、構築のしやすさ・つまずきやすいポイント・ユーザー体験なども、あわせてレポートしていきたいと思います
この記事の対象読者
- Laravel＋Bladeの構成に、これからTypeScriptを取り入れようか検討している人
- 「まずは動くものを最短で見てみたい」という人
- 前回記事(20選)を読んで、実際の構築手順を知りたい人
TypeScriptでケース別人気のシステム構成
| ケース | 難易度 | 学ぶべきこと・主流の組み合わせ | IT業界・転職市場での需要 |
|---|---|---|---|
| ① SPA(サーバーとフロントが同じフレームワーク) | ★★☆（中） | Next.js（React） | ◎Qiita実測で1位 |
| ★★☆（中） | Nuxt（Vue） | ◎Qiita実測で2位 | |
| ★★★（高） | Remix（React） | ◯Next.jsの対抗馬 | |
| ② SPA(サーバーとフロントが別フレームワーク) | ★★★（高） | Rails＋React | ◎Qiita実測で3位 |
| ★★★（高） | Go＋Next.js（別リポジトリ） | ◯チーム開発向け | |
| ★★★（高） | Nest.js＋React | ◯既存のPHP資産を活かせる | |
| ③ 通常のシステム（SSR） | ★☆☆(低) | Laravel＋Blade＋素のTS | ◯日本国内で一定の求人がある |
| ★★☆（中） | Rails＋ERB＋素のTS | △求人数は少なめ | |
| ★★☆（中） | Express＋EJS（サーバーもTSで統一、画面は従来型） | △求人数は少なめだが、Node.js経験としてはカウントされやすい |
この中から、特に人気の以下の４つを実装体験してみたいと思います。
- Laravel＋Blade＋素のTS ★基本
- Next.js（React）★フルスタック
- Nuxt ★フルスタック
- Nest,js＋React ★API分離型
共通の題材
全パターンで、以下の同じ仕様を実装します。作るものを揃えることで、構成ごとの違いが素直に見えるようにするのが狙いです。
productsテーブル：id（主キー）、name（text）、price（text）- 商品編集ページを表示し、保存を押すと更新される（新規登録機能はなし）
検証環境について
- PHP系（①③）：Windows + XAMPP（Apacheバーチャルホスト方式）
- Node.js系（②④⑤）：Node.jsのみで完結（XAMPP不要）
５つ構成をチャレンジ！
① Laravel（Blade）＋TypeScript
| 順位 | サーバー | フロント | JS/TS層 | 挙動 |
|---|---|---|---|---|
| 26 | Laravel | Blade | 素のTS | リロード型 |
PHPでダントツの人気を誇るLaravelの基本構成。JavaScriptをTypeScriptで実装するというもっともシンプルなTypeScriptの使い方です。Laravelだけでなく、従来のリロード型システムのJavaScript部分をTypeScriptで型安全にしたい時に堅実な方法です。
② Next.js（React）
| 順位 | サーバー | フロント | TSの配置場所 | 挙動 |
|---|---|---|---|---|
| 1 | Next.js | React | 両方 | SPA(フルスタック) |
React(Meta社が開発したUIライブラリ)を土台にした、フルスタックフレームワークです。開発元はVercel社。サーバー側の処理(APIルート)もクライアント側の画面も、両方担当できます。
得意技は、サーバーサイドレンダリング(SSR)。ページをサーバー側で先に組み立ててから返すので、検索エンジンにも見つかりやすく、表示速度も速くなります。TypeScriptを使う界隈では、世界的にも日本国内でも最も選ばれている王道の存在です。
③ Nuxt（Vue）
| 順位 | サーバー | フロント | TSの配置場所 | 挙動 |
|---|---|---|---|---|
| 26 | Nuxt | Vue | 両方 | SPA(フルスタック) |
Vue(元Googleのエンジニアが開発したUIライブラリ)を土台にした、フルスタックフレームワークです。Next.jsにインスパイアされて生まれました(名前もNextをもじっています)。
Vueは、Reactより学習コストが低く、直感的な書き方ができると評判です。HTMLに近いテンプレート構文が特徴。
④ NestJS＋React
| 順位 | サーバー | フロント | TSの配置場所 | 挙動 |
|---|---|---|---|---|
| 26 | Laravel | Blade | 素のTS | リロード型 |
NestJSは、TypeScriptを最初から前提に設計されたバックエンド専業のフレームワークです。名前の由来は「Nest(巣)」＝入れ子構造。モジュールを階層的に整理しながら開発できるのが特徴。
Angularとよく似た設計思想を持っているため、Angular経験者には馴染みやすいとされています。REST APIやGraphQLの開発が得意分野。フロント(React)とは完全に別プロジェクトとして分かれて動きます。
「大規模・エンタープライズ開発で、評価されやすい」という独自の立ち位置を持っています。ただし日本語の情報は少なめです。
さいごに
次回以降、①から順番に、同じ仕様でデモをつくりながら実装方法をご紹介していきます。これをひととおり通れば、人気のSPAをひととおり体験できるというおすすめの連載です。是非参考にしていただければと思います。
