【要約】同じ業務 Web UI を Vanilla HTML / Vue / React / Thymeleaf で実装して比較した — 4スタックの違いと選定指針 [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
開発者が新規プロジェクトを開始する際、適切な技術選定に苦慮する問題がある。単体での知識はあっても、同一要件での比較が困難なためである。
- ・フレームワークごとのコード量や実装の複雑さの差が不明。
- ・状態管理やデータバインディングの設計思想の違いが把握しにくい。
- ・デプロイ構成やコンテナサイズ等の運用面の差異が見えにくい。
// Approach
筆者は銀行系APIサービスのUIを題材に、4つのスタックで並行実装を行った。同一仕様の機能を各技術の作法で実装し、多角的に比較している。
- ・同一仕様（6ページ、API操作、認証管理）の定義。
- ・プロジェクト構成、ビルドプロセス、実装コード量の比較。
- ・API通信、状態管理、フォーム処理、エラー表示の観点別分析。
- ・デプロイ構成とコンテナサイズ、起動時間の計測。
// Result
開発者は要件に基づき、最適なスタックを判断できる。実装の複雑さや運用コストが具体的な数値で示された。
- ・ReactはuseState等の宣言によりコード量が増える傾向にある。
- ・Vueはv-modelによりフォーム実装の効率が高い。
- ・Thymeleafはサーバーサイドで状態を管理でき、セキュリティに強い。
- ・コンテナサイズはThymeleaf（約200MB）がSPA系（約30MB）より大きい。
Senior Engineer Insight
> 技術選定は流行ではなく要件から逆算すべきだ。大規模開発や採用重視ならReact、開発効率重視ならVue、セキュリティ重視ならThymeleafが妥当である。Vanilla HTMLはプロトタイプに限定すべきだ。運用面では、コンテナの起動速度やイメージサイズが、オートスケーリングの設計に直結することを忘れてはならない。