🎉

2025年版 スタートアップエンジニアが考えるWebアプリの技術選定

に公開

はじめまして、_minoです!

この記事では、最近公開されたムーザルちゃんねるさんの動画「2025年版「Webアプリ作るなら技術どれにする?」」を見て、私も今年を振り返り採用してよかった技術や、トレンドから見た来年以降流行りそうな技術についてまとめました。

その技術いいよね!」「この技術よかった!」などのご意見がありましたら、コメントで教えていただけると嬉しいです!

🧩 言語・フレームワーク

TypeScript

JavaScriptに静的型付けを追加し、開発時の型安全性とツールサポートを提供する言語
https://www.typescriptlang.org/

⭐️ 選定ポイント
Next.jsとの組み合わせが定番で、コード補完や型チェックにより開発体験が大幅に向上。ただし初期に型定義を適切に整備しないと、不要な型定義が量産されがちなので注意が必要。


Next.js

Reactベースの多機能なWebアプリケーションフレームワーク
https://nextjs.org/

⭐️ 選定ポイント
多機能でパフォーマンスに優れており、SSR、SSG、ISRなど多様なレンダリング方式に対応。初見はキャッチアップコストが高いが、公式ドキュメントが丁寧で学習しやすい。

📝 補足
v16のベータ版が公開中で、Turbopackの安定版、React Compiler導入、キャッシュ周りの改善など大幅なアップデートが予定されている。(個人的にRemixよりも好み)
https://nextjs.org/blog/next-16-beta


Hono

Web標準APIのみを使用した超高速・軽量のWebアプリケーションフレームワーク
https://hono.dev/

⭐️ 選定ポイント
軽量で高速、TypeScriptファーストで開発体験が良い。Next.jsのAPI Routesに組み込んで使うこともできる。RESTful APIとしてパフォーマンス面で優れており、Cloudflare Workersなどのエッジランタイムとの相性も抜群。

📚 スタイル・UIコンポーネント

TailwindCSS

ユーティリティファーストのCSSフレームワークで、HTMLに直接クラスを記述してデザインを構築
https://tailwindcss.com/

⭐️ 選定ポイント
AIとの相性が良く、書き味が直感的。ただし複雑になりすぎる可能性もあるため、レイヤーやコンポーネントなどでグローバルに共通化する工夫が必要。

📝 補足
v4以降、Lightning CSSの統合によりパフォーマンスが向上。また、設定ファイルもシンプルになりかなり使いやすくなった印象。
https://tailwindcss.com/blog/tailwindcss-v4


ShadcnUI

コピー&ペーストでカスタマイズ可能な美しいReactコンポーネントライブラリ
https://ui.shadcn.com/

⭐️ 選定ポイント
Radix UIベースで構築されており拡張性が高い。使用したいコンポーネントのみをインストールする方式のため、かなり軽量に抑えられる。


HeroUI

TailwindCSSベースで高速・アクセシブル・カスタマイズ可能なReact UIライブラリ
https://www.heroui.com/

⭐️ 選定ポイント
コンポーネント数が多く、デフォルトデザインもかなりリッチなので、そのまま使うだけでモダンなデザインが作れる。拡張性も高い点も魅力。

📝 補足
Alpha版ではあるが、v3が公開されておりパフォーマンスや機能面でかなり改善されている模様。
https://v3.heroui.com/

📌 バリデーション

Valibot

モジュール設計でバンドルサイズを最小化できるTypeScript型安全スキーマライブラリ
https://valibot.dev/

⭐️ 選定ポイント
Zodと書き味が似ており、バンドルサイズはZodよりもかなり小さい。型推論も優れており、パフォーマンス重視のプロジェクトに最適。

📍 状態管理

Zustand

Reactの状態管理ライブラリで、最小限のボイラープレート・プロバイダー不要・フックベースのAPI
https://zustand-demo.pmnd.rs/

⭐️ 選定ポイント
かなりシンプルな実装で、バンドルサイズが小さく軽量。学習コストも低く、Reduxのような複雑な設定が不要なため、小〜中規模プロジェクトでの状態管理に最適。

🪪 認証

Clerk

認証・ユーザー管理・組織管理・課金機能を提供する完全なユーザー管理プラットフォーム
https://clerk.com/

⭐️ 選定ポイント
リッチなUIコンポーネントが提供されており、認証機能を高速で実装できる。無料枠が充実しており、組織管理機能も使いやすい。Next.jsやReactとの統合がスムーズ。


Supabase Auth

JWT認証・ソーシャルログイン・MFA対応でPostgresと統合されたオープンソース認証サービス
https://supabase.com/docs/guides/auth

⭐️ 選定ポイント
低コストで認証機能を構築でき、Supabase Databaseとの連携がシームレス。RLS(行レベルセキュリティ)と組み合わせることで、データベースレベルでのアクセス制御が容易に実現できる。

📊 データベース

Supabase Database

PostgreSQLをベースにRLS(行レベルセキュリティ)やリアルタイム機能を統合したオープンソースデータベース
https://supabase.com/docs/guides/database/overview

⭐️ 選定ポイント
低コストでデータベースを構築でき、コネクションプーリング機能により最適化されている。RLSによりセキュリティ面も優れている。ブランチング機能やVercelなどの他プロバイダーとの連携もしやすく、小〜中規模開発に最適。


PlanetScale

MySQLベースのサーバーレスデータベースプラットフォームで、ブランチング機能と自動スケーリングを提供
https://planetscale.com/

⭐️ 選定ポイント
サーバーレスアーキテクチャによりパフォーマンスが高く、スケールもしやすい。Git風のブランチング機能によりスキーマ変更が安全に行える。ただ無料プランがないため、小規模プロジェクトではコストが合わない場合がある。

📝 補足
2025年9月にPostgreSQL対応が正式リリースされ、MySQLとPostgreSQLの両方から選択可能に。パフォーマンスも継続的に改善されている。
https://planetscale.com/postgres

🔥 ORM

Drizzle ORM

軽量・高速なTypeScript ORMで、SQL likeな構文とPostgreSQL/MySQL/SQLiteをサポート
https://orm.drizzle.team/

⭐️ 選定ポイント
TypeScript-firstで、SQLに近い書き方ができ軽量なのが魅力。また、エコシステムが活発になりつつあり、接続できるDBが増えたほか、Studio(GUIデータベース)、seed関数、キャッシュ関数など便利な機能も次々と追加されている。

✉️ メールサービス・通知

Resend

開発者向けのモダンなメールAPIで、React Emailと統合しトランザクショナル・マーケティングメール送信を提供
https://resend.com/

⭐️ 選定ポイント
低コストかつセットアップがシンプル。React Emailとの相性が良く、コンポーネントベースでリッチなメールテンプレートを作成できる。


Knock

通知インフラプラットフォームで、アプリ内・プッシュ・メール・SMSなど複数チャネルの通知を統合管理
https://knock.app/

⭐️ 選定ポイント
ワークフローエンジンで複雑な通知ロジックを構築可能。Resendやアプリ内通知のセグメント配信を容易に実現でき、通知の一元管理ができる。

🪄 CMS(Headless CMS)

microCMS

日本製のヘッドレスCMSで、API経由でコンテンツ管理とマルチチャネル配信を実現
https://microcms.io/

⭐️ 選定ポイント
日本製なのでインターフェースが直感的で使いやすく、システムの組み込みも容易。ドキュメントが日本語で豊富なため導入のハードルが低い。コストは若干高めだが、小規模プロジェクトであればコスパは良好。


Payload

TypeScript製オープンソースヘッドレスCMSで、カスタマイズ性が高くNext.jsと統合可能
https://payloadcms.com/

⭐️ 選定ポイント
セルフホスティング可能なため、拡張に伴うコスト増大を防げる。Next.jsアプリに直接組み込めるため拡張性が非常に高く、Payload×Cloudflareの相性も良い。

📝 補足
Cloudflare Workersにワンクリックでデプロイできるようになり、構築がかなり容易になった印象。エッジ環境での高速なCMS運用が可能に。
https://blog.cloudflare.com/id-id/payload-cms-workers/

🌅 画像管理

Cloud Storage

Googleのオブジェクトストレージサービスで、高い可用性とスケーラビリティを提供
https://cloud.google.com/storage?hl=ja

⭐️ 選定ポイント
Google Cloud内で完結させる場合、内部ネットワークのためレイテンシが低く連携が手軽。ただし、大量データの外部配信やCDN配信の場合、エグレス(データ転送出)料金でコストが高くなる点に注意。


Cloudflare R2

S3互換のオブジェクトストレージで、エグレス料金無料が特徴
https://www.cloudflare.com/ja-jp/developer-platform/products/r2/

⭐️ 選定ポイント
エグレス(データ転送出)料金が完全無料なため、データ配信量が多い場合に圧倒的にコスト優位。CDN配信、Web/アプリの画像配信、動画配信など外部アクセスが多いユースケースで特に有利。S3互換APIで既存ツールもそのまま使える。

⏰ ホスティング

Vercel

Next.js開発元が提供するフロントエンド特化型ホスティングプラットフォームで、自動デプロイとエッジ配信
https://vercel.com/

⭐️ 選定ポイント
Next.jsとの相性が非常に良く手軽にデプロイでき、パフォーマンスもNext.js用に最適化されている。ただしコストが高くなりがちな点に注意。


Google Cloud Run

コンテナベースのサーバーレスプラットフォームで、自動スケールと従量課金
https://cloud.google.com/run?hl=ja

⭐️ 選定ポイント
DockerコンテナベースのデプロイでNext.jsのデプロイが手軽。コストもVercelより安く、トラフィックに合わせたスケーリングが容易。最低限のログ収集も標準搭載されている。

🧱 バンドラー

Turbopack

Rust製の超高速バンドラーで、Next.jsに統合されている。
https://nextjs.org/docs/app/api-reference/turbopack

⭐️ 選定ポイント
執筆時点(2025年10月中旬)では開発環境でのみ利用可能。Next.jsのデフォルトバンドラーとしてWebpackよりも高速で、開発体験が向上している。

📝 補足
Next.js v16以降で安定版になる予定。(個人的に嬉しい!)
https://nextjs.org/blog/next-16-beta


Vite

開発時にネイティブESMを活用する高速ビルドツールで、HMRとRollupベースのプロダクションビルド。
https://vite.dev/

⭐️ 選定ポイント
SPA開発、ライブラリ開発との相性が良く、フレームワークを使用しないReactオンリーの開発でも有力な選択肢。起動速度とHMRの高速性が魅力。

📝 補足
v7以降、Rolldown(Rust製バンドラー)が実験的に導入され、パフォーマンスがさらに向上している印象。
https://vite.dev/blog/announcing-vite7

🚧 リンター・フォーマッター

Biome

Rust製の高速リンター・フォーマッターで、ESLint+Prettierの代替を目指すオールインワンツール
https://biomejs.dev/

⭐️ 選定ポイント
ESLint+Prettierを1ファイルで管理できるため非常に便利で、パフォーマンスも圧倒的に高速。設定もシンプルで導入のハードルが低い。

📝 補足
v2以降、さらにパフォーマンスが向上し、ルールの追加や型推論機能も強化されている印象。
https://biomejs.dev/ja/blog/biome-v2/

📝 テスト

Vitest

Vite対応の高速テストフレームワークで、Jest互換APIとHMR対応
https://vitest.dev/

⭐️ 選定ポイント
Jest互換なのでほぼ同じ書き方でテストコードが書け、パフォーマンスにも優れている。Viteとの統合により設定ファイルを共有でき、開発体験が向上。


bun test

Bun組み込みの高速テストランナーで、Jest互換のAPIを提供
https://bun.sh/

⭐️ 選定ポイント
パフォーマンス重視のツールでどのテストライブラリよりもダントツで高速。Vitestよりも速く、テスト以外にもパッケージマネージャー(依存関係管理)やランタイムとしても使用できる多機能性が魅力。

📝 補足
最近v1.3がリリースされ、多くの機能が追加されパフォーマンスも改善。テストに限らず、ランタイム・バンドラー・パッケージマネージャーとしても今後かなり期待。
https://bun.com/blog/bun-v1.3

🛎️ 監視・分析・トラッキング

Posthog

オープンソースのプロダクト分析プラットフォームで、セッションリプレイ・A/Bテスト・機能フラグを統合
https://posthog.com/

⭐️ 選定ポイント
豊富な機能でトラッキングやモニタリング、アナリティクスなど他ツールの代替となる機能が1つにまとめられており、かつ低価格でセットアップも容易。プロダクト改善やユーザー理解に最適。ただし日本語ドキュメントがほぼないため、翻訳して理解する必要がある。

📝 補足
Posthog組織のミッション、哲学が素晴らしく、ユーザーファーストに振り切っている。価格設定が導入障壁とならないよう配慮されている点も魅力。
https://posthog.com/handbook/why-does-posthog-exist


Sentry

エラートラッキングとパフォーマンス監視プラットフォームで、リアルタイムアラートとスタックトレース分析
https://sentry.io/welcome/

⭐️ 選定ポイント
中・大規模サービスのエラー監視やトラッキング、リアルタイムアラートとの相性が良い。早急な不具合改善サイクルを回したいケースに最適。採用事例も多く信頼性が高い。

📗 番外編:気になっている技術・トレンド

プロダクション導入やセットアップなどの難易度は高めですが、高機能やトレンドに入っているものをピックアップしました。来年以降、流行ることを期待しています!

Rspack

Webpack互換APIを持つRust製高速バンドラーで、コード分割・ツリーシェイキング・HMRなどを提供、Rstest(テスト)・Rslint(リント)などのエコシステムも開発中
https://rspack.rs/

📝 補足
パフォーマンスに優れており、ViteやWebpackの何倍も高速。また、実験段階ではあるが、Next.js用のコミュニティプラグインも開発している。

↓ベンチマーク

Oxlint

Oxcプロジェクトの一部で、Rust製の超高速JavaScriptリンター
https://oxc.rs/

📝 補足
void(0)が開発しているリンターで、Biomeよりも高速とされている。tsgoを活用し、公式の型チェッカーに処理を委ねている。

Vercel Fluid Compute

サーバーレス環境で関数内同期処理を実現し、待機時間を削減してコスト削減と高速化を両立する新しいコンピューティングモデル
https://vercel.com/fluid

📝 補足
Vercelが提供するハイブリッドなサーバーレス関数で、パフォーマンスやメモリ効率、コールドスタートの改善など、実行処理が最適化されている。

ElectricSQL

PostgresからHTTP/JSONでデータを同期し、ローカルファーストアプリの構築を可能にするPostgres同期エンジン
https://electric-sql.com/

📝 補足
PostgreSQLとクライアント側SQLiteを双方向リアルタイム同期することで、完全なオフライン動作とネットワーク遅延ゼロの高速クエリ実行を実現できる。

👀 おわり

最後まで読んでくださり、ありがとうございました!☺️
この記事を通して、少しでも開発のお役に立てば幸いです!

個人ブログでも「技術選定に関すること」や「最新技術の分析・深掘り」など学びや知見を発信しています。もしご興味のある方はこちらからご確認いただけますと幸いです!
https://techbuild.app/blog

過去の執筆記事
https://zenn.dev/m_noto/articles/a73dc4291983e6
https://zenn.dev/m_noto/articles/e4c962100d5c87
https://zenn.dev/m_noto/articles/4efa5a70f8ca98

Discussion