Zenn
🎉

【Day2】システムで使っている技術スタック紹介と選んだ理由2

に公開
tech
javascriptfrontend
tech

こんにちは、Keisukeです。
本日は、先日の【Day2】に続いて、システムで採用している技術スタックの深掘りをしていきます。
今回は、なぜその技術を選び、他の選択肢ではなかったのか？といった「意思決定の裏側」にフォーカスしてみました。

🧱 技術選定の裏にある考え方

🟨 JavaScript（ES6以降）を選んだ理由

  • ✅ 即時に動かして学べる：HTMLファイルに書いてブラウザで開くだけで動くため、学習サイクルが速く実践的。
  • ✅ ドキュメントが豊富で日本語情報も多い：Stack OverflowやQiita、Zennに情報があふれている。
  • ✅ Node.jsとの連携も可能：将来的にバックエンド処理も視野に入れているため、拡張性も重視。

❓ 他の選択肢は？
TypeScriptも視野にありましたが、まずはVanilla JSで柔軟に試行錯誤するためにあえて採用していません。今後、コードの規模が大きくなれば導入予定。

🟦 Firebaseを選んだ理由

  • ✅ 1サービスで「認証」「DB」「ホスティング」が揃う
  • ✅ 個人開発と相性抜群な無料プラン
  • ✅ リアルタイム対応が容易

❓ 他の選択肢は？
SupabaseやAppwriteとも迷いましたが、情報量とサンプルの豊富さ、学習コストの低さからFirebaseを優先。

🟪 Vercelを使った理由（＋GitHub Pagesとの使い分け）

  • ✅ VercelはNext.jsに最適化されている
  • ✅ プレビュー機能が便利
  • ✅ GitHub連携でデプロイが自動化されていて超快適

✅ GitHub Pagesは静的サイトの軽量デモ用に併用しています。

🧠 選んで良かったと感じること

  • 学習コストと開発スピードのバランスが良い
    → 勉強しながら動くものが作れる実感は大きいです。

  • プロトタイプからそのまま本番運用まで持っていける
    → Firebase＋Vercelの組み合わせが非常に強力でした。

  • 個人開発を続けるモチベになる
    → すぐに動く、すぐに共有できる＝継続しやすい！

🔭 今後の展望（技術的アップデート予定）

  • TypeScript導入による型安全の強化
  • Firebase Cloud Functionsによるロジック分離
  • CI/CDパイプラインの整備（GitHub Actions or Vercel CLI）

✍️ まとめ

技術選定は単に「流行っているから」ではなく、自分の目的・スキル・環境に合っているかを考えることが大事だと実感しています。
今回紹介したスタックは、個人開発と非常に相性が良く、「まず作ってみたい」という段階の人には特におすすめです。

引き続き、開発の中での気づきや試行錯誤を記録していきますので、よろしくお願いします！

Discussion