導入

「Next.jsとRemixで迷っています」「SupabaseとFirebase、どちらを選ぶべきですか？」

MVP開発を始めようとすると、技術選定で悩む時間が膨大になります。競合記事を読んでも「最新技術を使おう」「無料で始められる」といった抽象的なアドバイスばかりで、具体的な判断基準が見つかりません。

副業エンジニアにとって、技術選定の失敗は致命的です。学習に週20時間かけて「思ったより難しい」と気づいても、時間は戻ってきません。無料枠を超えて突然の請求が来ても、収益化前のプロダクトでは払えません。

この記事では、副業エンジニアが週18時間の制約内で技術スタックを選ぶための4つの判断基準を提示します。学習時間・メンテナンスコスト・無料枠の制約を定量的に比較し、MVP→成長期→スケール期のフェーズ別に最適な技術選定の戦略を解説します。

この記事を読むことで、以下の3つの価値が得られます：

1. 判断基準が明確になる - 学習時間30時間以内、月額コスト0円などの具体的な基準
2. 失敗を回避できる - よくある5つの失敗パターンと事前対策
3. 時間を節約できる - 技術選定に悩む時間を週2時間から30分に短縮

技術選定で失敗する副業エンジニアの3つのパターン

技術選定で失敗する副業エンジニアには、共通するパターンがあります。まずは失敗の本質を理解しましょう。

パターン1: 学習コストが高すぎる技術を選ぶ

「最新技術を使おう」と意気込んで、週50時間の学習が必要な技術を選んでしまうケースです。副業エンジニアの開発時間は週18時間程度が限界です。学習だけで2〜3週間を費やすと、MVP開発に着手する前にモチベーションが尽きます。

失敗例:

• Rustで一からバックエンドを構築 → 学習に8週間かかり、MVP未完成のまま挫折
• GraphQLを初めて使う → クライアント/サーバーの実装で6週間消費

パターン2: 無料枠を超えて突然課金が発生

Firebaseなどの従量課金制サービスでは、ユーザーが増えると予期せぬ高額請求が来ることがあります。月1万PVを超えたタイミングで月5,000円の請求が来ても、収益化前のプロダクトでは対応できません。

失敗例:

• Firebase Realtime Databaseで読み取り過多 → 月額1.5万円の請求
• AWS Amplifyでデータ転送量オーバー → 無料枠500GB超過で月額8,000円

パターン3: ドキュメントが少ない新興技術を選ぶ

「これからくる技術だ」と先行投資しても、ドキュメントやコミュニティの情報が少ないと、エラー解決に週10時間以上かかることがあります。副業エンジニアには、困ったときにすぐ情報が見つかるエコシステムが必須です。

失敗例:

• マイナーなBaaS（Backend as a Service）を選択 → 日本語情報が皆無
• ベータ版のフレームワークを採用 → バグ報告しても対応に3週間

これらの失敗を避けるために、技術選定では明確な判断基準が必要です。

技術選定の4つの判断基準

副業エンジニアが技術スタックを選ぶ際は、以下の4つの基準で評価しましょう。すべての基準を満たす技術だけを候補に残すことで、失敗のリスクを大幅に減らせます。

判断基準1: 学習時間（週18時間で習得可能か）

基準: 基礎から実装まで30時間以内で習得できる技術を選ぶ

副業エンジニアの開発時間は週18時間程度が限界です。学習に2週間（36時間）以上かかる技術は避けましょう。公式チュートリアルを完了するまでの時間で判断します。

具体的な評価方法:

• 公式ドキュメントの「Getting Started」を読む（2〜3時間）
• サンプルアプリを1つ作る（5〜8時間）
• 認証・DB操作を実装する（10〜15時間）

合計30時間以内で基本機能が実装できれば合格です。

判断基準2: メンテナンスコスト（週1時間以内で運用できるか）

基準: リリース後の運用・保守に週1時間以内で対応できる技術を選ぶ

自動化が進んでいない技術や、頻繁に手動デプロイが必要な技術は避けましょう。CI/CD、自動バックアップ、セキュリティアップデートが自動化されている技術を選びます。

具体的な評価ポイント:

• 自動デプロイ: GitHubプッシュで本番反映されるか
• 自動バックアップ: データベースの自動バックアップがあるか
• セキュリティ更新: マネージドサービスで自動対応されるか

判断基準3: 無料枠の制約（月1万PVまで0円か）

基準: 月1万PVまで0円で運用できる技術を選ぶ

収益化前のプロダクトでは、月額コストは0円が理想です。無料枠で月1万PV（月間ユニークユーザー約3,000人）まで対応できる技術を選びましょう。

具体的な評価項目:

• データベース: 無料枠で何GBまで使えるか
• 転送量: 月何GBまで無料か
• APIコール数: 無料枠の制限はあるか

判断基準4: エコシステム（困ったときに情報が見つかるか）

基準: 日本語情報が豊富で、コミュニティが活発な技術を選ぶ

エラーが発生したとき、30分以内に解決策が見つかるかが重要です。Stack Overflow、Zenn、Qiitaで日本語の記事が100件以上ある技術を選びましょう。

具体的な評価方法:

• Zennで検索 → 記事数100件以上
• GitHub Issues → 週10件以上のアクティビティ
• 公式Discordやコミュニティ → 日本語チャンネルがある

これらの4つの基準をすべて満たす技術スタックが、副業エンジニアにとって最適な選択です。

フェーズ別の推奨技術スタック

個人開発では、MVP期・成長期・スケール期でそれぞれ異なる技術選定が求められます。各フェーズで最適な技術スタックを紹介します。

MVP期（0→月1万PV）: Next.js + Supabase + Vercel

推奨構成:

• フロントエンド: Next.js 15 (App Router)
• バックエンド/DB: Supabase
• デプロイ: Vercel
• 認証: Supabase Auth
• スタイリング: Tailwind CSS

学習時間: 30〜40時間（目安） 月額コスト: 0円（無料枠内） 対応可能PV: 月1万PV（約3,000ユーザー）

この構成の最大の利点は、フルスタックが1人で完結し、環境構築・認証・デプロイがすべて自動化されることです。公式チュートリアルに従えば、週末2日（16時間）でToDoアプリを作成できます。

具体的な無料枠:

• Supabase: データベース500MB、転送量5GB/月、月間アクティブユーザー50,000まで
• Vercel: 転送量100GB/月、ビルド時間6,000分/月

注意: Supabaseは1週間アクセスがないとプロジェクトが自動休止します（再起動は数秒）。定期的にアクセスするか、Cron Jobで起動確認しましょう。

成長期（月1万→10万PV）: CDN + キャッシュ最適化

追加構成:

• CDN: Cloudflare (無料プラン)
• 画像最適化: Cloudflare Images
• キャッシュ: Next.js Data Cache（revalidate設定）

追加学習時間: 10〜15時間（目安） 月額コスト: 0〜20ドル（Supabase Proへの移行検討） 対応可能PV: 月10万PV（約30,000ユーザー）

月1万PVを超えると、画像転送量とデータベースの負荷が課題になります。Cloudflare CDNで画像配信を最適化し、Next.jsのData Cacheでデータベースへのクエリを削減します。

プラン移行の判断基準:

• Supabaseのデータベース容量が500MB超過 → Pro（月25ドル）へ移行
• Vercelの転送量が100GB超過 → Pro（月20ドル）へ移行

スケール期（月10万PV以上）: インフラ最適化

追加構成:

• データベース最適化: PostgreSQLインデックス作成、クエリ最適化
• モニタリング: Sentry（エラー監視）、Supabase Analytics
• バックアップ戦略: 自動バックアップ + 定期復旧テスト

追加学習時間: 15〜20時間（目安） 月額コスト: 20〜50ドル（Supabase Pro + Vercel Pro） 対応可能PV: 月10万PV以上

月10万PVを超えると、パフォーマンス監視とエラー追跡が必須になります。Sentryでエラーを監視し、Supabase Analyticsでクエリのボトルネックを特定します。

注意: この段階では、収益化が進んでいることが前提です。月額50ドルのインフラコストを回収できる収益（月5万円以上）を確保してから移行しましょう。

具体的な技術選定の比較表

各技術の学習時間・コスト・適用範囲を比較し、自分のプロジェクトに最適な技術を選びましょう。

フロントエンドフレームワーク比較

項目	Next.js	Remix	Astro
学習時間	30〜40h	40〜50h	20〜30h
適用範囲	フルスタックアプリ	フルスタックアプリ	コンテンツサイト
SSR/SSG	両方対応	SSR中心	SSG中心
エコシステム	★★★★★	★★★☆☆	★★★★☆
日本語情報	豊富	少ない	中程度
メンテナンス	週0.5h	週1h	週0.5h

選び方:

• ユーザー操作が多いアプリ → Next.js
• Web標準APIを重視 → Remix
• ブログ・ドキュメントサイト → Astro

バックエンド/データベース比較

項目	Supabase	Firebase	PlanetScale
学習時間	15〜20h	20〜30h	10〜15h
データベース	PostgreSQL	NoSQL	MySQL
無料枠（DB）	500MB	1GB	5GB
無料枠（転送量）	5GB/月	10GB/月	なし
料金体系	定額制	従量課金	定額制
コスト予測	容易	難しい	容易
認証機能	○	○	×

選び方:

• リレーショナルDB + 認証が必要 → Supabase
• NoSQLが好み + モバイルアプリ → Firebase
• MySQLが好み + 認証は別で実装 → PlanetScale

注意: Firebaseは従量課金制のため、読み取り・書き込みが予測不可能な場合、突然の高額請求リスクがあります。Supabaseは定額制なので、予算管理が容易です。

認証サービス比較

項目	Supabase Auth	NextAuth.js	Clerk
学習時間	5〜8h	8〜12h	3〜5h
無料枠（ユーザー）	50,000/月	無制限	10,000/月
月額コスト	0円〜	0円	0円〜
UIコンポーネント	自作必要	自作必要	提供あり
OAuthプロバイダー	多数対応	50以上対応	多数対応
データベース統合	Supabase必須	任意のDB	Clerk DB

選び方:

• Supabaseを使う場合 → Supabase Auth
• 完全なコントロールが必要 → NextAuth.js
• 美しいUIが欲しい → Clerk

初心者には、Supabase AuthまたはClerkがおすすめです。NextAuth.jsは柔軟性が高い反面、設定が複雑になる傾向があります。

よくある失敗パターン5選とリカバリー戦略

技術選定で失敗した場合でも、早期にリカバリーすれば被害を最小限に抑えられます。よくある失敗パターンと具体的な対処法を紹介します。

失敗1: 学習コストが高すぎる技術を選んだ

症状: 2週間学習しても基本機能が実装できない

リカバリー戦略:

1. 学習を打ち切る判断基準を設定 - 学習開始から2週間（週18時間 × 2 = 36時間）で基本機能が実装できなければ撤退
2. 代替技術への切り替え - Next.js + Supabaseなどの学習時間30時間以内の技術に変更
3. 学んだ知識を活かす - TypeScript、REST API、認証の概念は他の技術でも使える

実例: Rustでバックエンドを構築しようとして8週間かかった → Next.js + Supabaseに切り替え、2週間でMVP完成

失敗2: 無料枠を超えて突然課金が発生

症状: 月1万PV超えで月額5,000円の請求が来た

リカバリー戦略:

1. Spend Capを有効化 - Supabaseの「Spend Cap」機能で、無料枠を超えたら自動的に制限
2. 従量課金サービスから定額制へ移行 - Firebase → Supabaseなど
3. キャッシュ最適化でコスト削減 - CDN + Data Cacheでデータベースへのクエリを80%削減

実例: Firebase Realtime Databaseで月額1.5万円 → Supabaseに移行（データ移行に週末2日）、月額0円に削減

失敗3: ドキュメントが少ない新興技術を選んだ

症状: エラー解決に週10時間以上かかる

リカバリー戦略:

1. 公式Discordに参加 - 開発者に直接質問できる（英語必須）
2. GitHub Issuesで過去の事例を検索 - 同じエラーの解決策が見つかることも
3. エコシステムが充実した技術に切り替え - 日本語情報が100件以上ある技術へ

実例: マイナーなBaaSで日本語情報皆無 → Supabaseに移行、Zennで500件以上の記事が見つかり、エラー解決時間が1/5に短縮

失敗4: オーバーエンジニアリング（初期から複雑な構成）

症状: マイクロサービス化、Kubernetes導入で開発が進まない

リカバリー戦略:

1. モノリス構成に戻す - Next.js + Supabaseの1リポジトリ構成に統合
2. 必要になってから拡張 - 月10万PVを超えてから分割を検討
3. YAGNIの原則 - 「You Aren't Gonna Need It」（今必要ないものは作らない）

実例: 初期からマイクロサービス化 → モノリスに戻して開発速度3倍

失敗5: ベンダーロックインのリスク無視

症状: 特定プラットフォームから移行できない

リカバリー戦略:

1. オープンソース技術を選ぶ - Supabase（PostgreSQL）はセルフホスティング可能
2. データエクスポート機能を確認 - CSV/JSONエクスポートが可能か事前確認
3. 段階的な移行計画 - 認証 → データベース → ストレージの順に移行

実例: Firebase Realtime Databaseから移行不可 → 1週間でSupabase PostgreSQLに移行（データエクスポート + インポートスクリプト作成）

FAQ

Q1. Next.jsとRemixで迷っています。どちらを選ぶべきですか？

A1: 副業エンジニアにはNext.jsをおすすめします。

理由は以下の3つです：

1. 日本語情報の豊富さ - Zennで2,000件以上、Qiitaで1,500件以上の記事があり、エラー解決が容易
2. エコシステムの充実 - VercelとのシームレスなCI/CD、豊富なプラグイン
3. 学習時間の短さ - Next.js 30〜40時間、Remix 40〜50時間

Remixは優れたフレームワークですが、コミュニティが小さく、日本語情報が少ないため、副業エンジニアには学習コストが高すぎます。

例外: Web標準APIを深く学びたい、公式ドキュメントを読むのが苦にならない場合はRemixも選択肢になります。

Q2. SupabaseとFirebaseの無料枠の違いは？

A2: 料金体系の違いが最大のポイントです。

項目	Supabase	Firebase
料金体系	定額制	従量課金制
コスト予測	容易	難しい
無料枠（DB）	500MB	1GB
無料枠（転送量）	5GB/月	10GB/月
突然の高額請求リスク	なし（Spend Cap機能）	あり

Supabaseの最大の利点は、「Spend Cap」機能で無料枠を超えたら自動的に制限されることです。Firebaseでは、読み取り・書き込みが予測不可能な場合、月額1〜2万円の請求が来ることがあります。

推奨: 収益化前のMVPではSupabaseを選び、予算管理を容易にしましょう。

Q3. 技術選定を間違えた場合、どう修正すれば良いですか？

A3: 2週間ルールと段階的移行で対処しましょう。

2週間ルール:

• 学習開始から2週間（36時間）で基本機能が実装できなければ、技術を変更
• MVP開発は最長3ヶ月（216時間）で完了すべき。学習だけで1ヶ月消費するのは危険

段階的移行の手順:

1. 新技術で新機能を追加 - 既存コードは残し、新機能だけ新技術で実装
2. 小さいモジュールから移行 - 認証 → API → データベースの順に移行
3. 週末2日で移行可能な範囲を設定 - 一気に移行せず、毎週末少しずつ進める

実例: Firebase → Supabaseへの移行（週末2日で完了）

• 土曜午前: Supabaseプロジェクト作成、スキーマ設計
• 土曜午後: データエクスポート + インポートスクリプト作成
• 日曜午前: 認証機能の移行（NextAuth → Supabase Auth）
• 日曜午後: フロントエンドのAPI呼び出し変更、動作確認

Q4. 無料枠で運用できるPVの目安は？

A4: Next.js + Supabase + Vercelの構成で月1万PV（約3,000ユーザー）が目安です。

具体的な制約:

• Supabase転送量: 5GB/月 → 1PVあたり0.5MB換算で月1万PV
• Vercel転送量: 100GB/月 → 1PVあたり10MB換算で月1万PV（画像最適化前提）

無料枠を超えないための工夫:

1. 画像最適化 - Next.js Imageコンポーネント + WebP形式で転送量80%削減
2. CDN活用 - Cloudflare（無料）で画像配信を外部化
3. キャッシュ活用 - Next.js Data Cache（revalidate: 3600）でAPIコール数を90%削減

実例: 月1.5万PVのブログで無料枠内運用（画像をCloudflare CDNに配置、転送量2GB/月）

Q5. 認証はNextAuth.jsとSupabase Authのどちらを選ぶべきですか？

A5: Supabaseを使う場合はSupabase Auth、完全なコントロールが必要ならNextAuth.jsです。

Supabase Authがおすすめのケース:

• Supabaseをデータベースに使う
• 学習時間を短縮したい（5〜8時間で実装可能）
• Row Level Security（RLS）で細かいアクセス制御が必要

NextAuth.jsがおすすめのケース:

• 任意のデータベース（MongoDB、MySQL等）を使う
• 50以上のOAuthプロバイダーが必要
• 認証フローを完全にカスタマイズしたい

注意: NextAuth.jsは柔軟性が高い反面、設定が複雑です。初心者には、Supabase AuthまたはClerkがおすすめです。

まとめ

技術選定は、副業エンジニアにとって最も重要な意思決定の1つです。学習コスト・メンテナンスコスト・無料枠・エコシステムの4つの判断基準を満たす技術を選ぶことで、失敗のリスクを大幅に減らせます。

この記事で紹介した技術選定の3ステップ:

1. 4つの判断基準で評価する

   • 学習時間30時間以内
   • メンテナンス週1時間以内
   • 無料枠で月1万PVまで対応
   • 日本語情報が100件以上

2. フェーズ別に技術を選ぶ

   • MVP期: Next.js + Supabase + Vercel
   • 成長期: CDN + キャッシュ最適化
   • スケール期: インフラ最適化

3. 失敗したら早期にリカバリー

   • 2週間ルールで撤退判断
   • 段階的移行で被害を最小化
   • 既存記事との連携で時間短縮

次のステップとして、以下の記事も参考にしてください：

1. 開発計画を立てる - 忙しいエンジニアが最短でMVPをリリースする実践的開発戦略で、技術選定後の具体的な開発計画を立てましょう
2. 学習時間を短縮する - 忙しいエンジニアのためのAI開発アシスタント活用術で、AIを活用して学習時間を30%削減する方法を学びましょう
3. 運用を自動化する - 個人開発の運用を週1時間に抑える自動化戦略で、メンテナンスコストを最小化する方法を理解しましょう
4. 収益化を目指す - 個人開発で月1万円を達成する収益化戦略の実践ガイドで、無料枠内での収益化戦略を確認しましょう

技術選定に悩む時間を週2時間から30分に短縮し、MVP開発に集中しましょう。