Zenn
🚀

2024年の個人開発おすすめ技術スタック

2024/07/02に公開
tech
development
stack
tech

はじめに

個人開発とは、文字通り個人が自分のアイデアを形にするために行う開発活動のことです。
目的も様々で、自分のアイデアを形にするため、新しい技術を学ぶため、副業収入を得るため、転職のためなどがあります。

なぜ個人開発を選ぶのか？
日本に限らずIT業界ほとんどの会社では採用する技術スタックが決まっており、
最新技術を導入するにも、最新の技術を選ぶよりチーム全員のスキルが重要視されるため、
最新な技術に熱心があるエンジニアには個人開発が最適な選択肢でしょう。

この記事では、フロントエンド、バックエンド、インフラ、データベースなどの領域において、
2024年におすすめの技術スタックを紹介します。

Frontend

Next.js

主にフロントエンド開発、もしくはフロントエンド + 軽いバックエンドの開発において、ReactのフレームワークであるNext.jsがおすすめです。

おすすめポイント

  • 学習難易度が低い、ネット上の情報が多い
  • エコシステムが非常に豊富で、様々なニーズに応える多くのスキャフォールドがある
    • 個人的よく使っているcreate-t3-app では、認証、ORM、UI などの機能や技術スタックを選択的に統合できます。
    • t4-stackマルチプラットフォームも対応
  • デプロイが簡単
    • 本家のVercelが提供するデプロイサービスが非常に使いやすい、無料範囲内でも利用できる

Astro

急成長していAstroはマルチフレームワークのサポートがあり、静的サイトを開発するのにとても優秀です。
コミュニティはNext.jsより小さいため、問題に詰まった場合、解決するのが難しいかもしれません。
Islandsという新しいアーキテクチャを導入し、独立したコンポーネントごとにハイドレーションを行い、不必要なJavaScriptをを削減してパフォーマンスを向上させます。

おすすめポイント

  • パフォーマンスが良い
  • フレームワークに依存しない、マルチフレームワークのサポート
  • themesが豊富、Landing Page, Blog, Dosサイトを構築するのに参考になる

Tailwind CSS + Shadcn/ui

フロントエンドの世界ではUIにいてとても選択肢が多く、個人的にはTailwind CSS + Shadcn/uiがおすすめです。

Tailwind CSSのおすすめポイント

  • 高度なカスタマイズが可能
  • 従来のCSSより簡単、CSS Class名を考える手間が省ける
  • ChatGPTやGitHub CopilotなどのAIツールとの相性が良い

Shadcn/uiのおすすめポイント

  • 同じく高度なカスタマイズが可能
  • デフォルトのスタイルでも十分に使える
  • ドキュメントが充実している

その他

  • Prisma：性能面は普通ですが、コミュニティが大きいので開発しやすいです。
  • Drizzle：Serverlessメインであれば強くおすすめします。Prismaの抽象的な文法よりも、SQLに近い使い方なので、SQLの知識があればすぐに使えます。
  • NextAuth.js：認証ライブラリー。v5 beta版がよりシンプルな作りになりおすすめです。しかしドキュメントがまだ少ないため、実装までちょっと苦労するかもしれません。
  • SWR：データフェッチライブラリー。組み込みのキャッシュとリクエストの重複排除ができてめっちゃ優秀です。
  • zod：スキーマバリデーションライブラリー。TypeScriptとの相性が良く、バリデーションエラーのメッセージもわかりやすいです。
  • t3-env：環境変数管理ライブラリー。TypeScriptとの相性が良く、環境変数の型を定義することができます。元々t3-stackに統合されていましたが、結構高評価されているので独立なライブラリーになりました。
  • Zustand & jotai：状態管理ライブラリー。Reduxよりもシンプルで使い安いです。状態管理ライブラリーがとても多くて選ぶのに迷う方にはこの動画を参考するのが良いかもしれません。
  • wxt：ブラウザ拡張機能開発ライブラリー。Chrome, Firefox, Edgeに対応しています。
  • react-i18next：多言語対応ライブラリー。他のライブラリーと比べて面倒なJSONファイル分割が不要で、翻訳ファイルの管理が楽です。そして優れた拡張性により、いろんなフレームワークに対応していてめっちゃ優秀です。

Backend

選択肢が多すぎるフロントエンドに対し、バックエンドの方が選択肢が少なく、
どの道CPU・メモリ・ネットワークのリソースが求められるし、コストもかかるので、バックエンドに関してはServerlessのアーキテクチャをおすすめします。
Serverlessは最もコスパが良く、全てが従量課金なので、リリース初期の段階でコストを抑られます。
ただしServerlessの移行が難しく、プロバイダーに依存しないようにアーキテクチャを設計する必要があります。

Cloudflare Worker

無料枠でも十分使えるCloudflare Workerは、一日あたりのリクエスト数が100,000回まで無料で使えます。
ただし1リクエストにつき10ミリ秒までの実行時間制限があるため、長時間の処理は向いていません。
5ドル/月30秒まで伸ばすことが可能で、ほとんどのアプリケーションには十分でしょう。
サポートされている言語はJavaScript, TypeScript、Python、Rustのみです。

おすすめポイント

  • 低コスト、無料枠でも十分使える
  • KV、Pages、D1など他のCloudflareサービスとの連携が容易
  • hono.devのようなserverlessフレームワークに適性がある

AWS Lambda

AWS Lambdaは個人的一番長く、愛用しているServerlessサービスです。
無料枠でも十分使えるし、FunctionURLを使えばAPI Gatewayがなくても外部公開が可能です。
AWS SAM CLIで簡単にデプロイしたりローカルでテストすることがもできます。
さらにlambda-web-adapterを合わせて使うと、ウェブアプリを (ほぼ) そのままサーバーレス化することが可能なので、今後他のサービスに移行するのもとても楽です。
lambda-web-adapterについてはこちらの記事もご参考ください。

おすすめポイント

  • 低コスト、無料枠でも十分使える
  • スペック（メモリ）の選択が可能、MAX 10GBまで
  • AWSの他のサービスとの連携が容易
  • 多くの言語がサポートされている、Dockerイメージも使える
  • MAX 15分までの実行時間制限で重い処理も可能

Auth

Authに関してはできるだけ簡単に、安く、セキュアな実装がポイントになります。
Auth0とClerkはもちろん有名ですが、無料プランが少なく有料プランも高いため、個人的避けた方が良いと思います。

NextAuth.js

Authに関するニーズがそこまで複雑でない場合、Next.js + NextAuth.jsが十分です。
NextAuth.jsは認証に関する機能が豊富で、GoogleやGitHubなどのOAuthプロバイダーとの連携も容易です。
自分でパスワード管理をしなくても良いし、かなり複雑度を下げられます。

Supabase Auth

カスタマイズログイン・登録、パスワードリセット、2FAなどもっと複雑な機能が必要な場合、Supabase Authがおすすめです。
月最大50,000アクティブユーザーまで無料で使えてサービス自体も安定しているため、個人開発には十分です。

Cloudflare Zero Trust

利用ユーザ数が50人(無料枠)までの見込みの場合、もしくはセキュリティに重点を置く場合、Cloudflare Zero Trustがおすすめです。
Cloudflare Zero Trustは、ゼロトラストセキュリティを提供するサービスで、簡単な設定でメールアドレスやIPアドレスによるアクセス制御が可能です。
ただしドメインをCloudflareで管理することが前提です。
外部公開したくない、家族や友達だけに公開したい、といった場合には最適ですね。

Database

近年Serverless DBも増えてきてとても選択肢が多いですが、こちら比較的使いやすいDBを紹介します。

Supabase Database

SQLを使いたい場合PostgreSQLがおすすめです。
PostgreSQLサービスの中にもSupabase Databaseは一番評価が高く、無料枠でも十分使えます。

Neon

同じくPostgreSQLサービスであるNeonも一選択肢です。
Supabase Databaseと比べて有料プランが安いことが特徴です。

Cloudflare D1

とにかくコストを抑えたい、かつ安定に稼働させたい場合、Cloudflare D1がおすすめです。
Cloudflare D1は、Cloudflareのedge SQLiteデータベースで、SQLiteはPostgreSQLより機能が少ないですが、世界中のCDNを使ってデータを配信することが可能なのでグローバル展開に向いています。
最近Prisma ORMも対応したので、こちらも参考にしてください。
最後何もりも圧倒的なコストが魅力ですね。

Upstash

キャッシュや流量制御など、アプリに軽量なRedisを取り組みたい場合、Upstashがおすすめです。
Upstashのデメリットは無料枠が少なく、ちゃんと使いたい場合は有料プランにするか、他のサービスを検討する必要です。

Payment

個人開発でお金を受け取るためには、決済システムが必要です。
ここはほぼStripe一択ですね、
支払い画面の開発余裕がなければStripe Payment Linksを使えるし、
Stripe Elementsで簡単に決済フォームを作れます。

Email

メール送信に関しては、Resendがおすすめです。
無料プランでは月3000通まで送信でき、さらにCloudflareと組み合わせることで無料な法人メールアドレスによる送受信も可能です。
法人メールアドレスの連携仕方はこちらの記事もご参考ください。

Statistics

Analytics

アプリの利用状況を把握するためには、統計情報を取得する必要があります。
Google Analyticsはかなり有名ですが、個人的にはumamiもおすすめです。
Vercel + Supabase + umamiの組み合わせで、完全無料でアプリの利用状況を把握することが可能かつデータも自分で管理できます。
ユーザーがサイトをどのように使用しているのかをキャプチャしたい場合、最近マイクロソフトがリリースした無料ツールclarityもおすすめです。

Logs

  • New Relic：100GBまでの無料プランがあり、ログ、APMなどの機能が揃っています。
  • betterstack：月50GBまでの無料プランがあり、フロントエンドだけのプロジェクトには十分です。

Performance

  • PageSpeed：Googleの無料ツールで、サイトのパフォーマンスを測定することができます。
  • LightHouse：同じくGoogleの無料ツールで、任意のウェブページ、公開ページ、認証要求ページに対して実行できます。パフォーマンス、ユーザー補助、プログレッシブ ウェブアプリ、SEO などの監査も可能。

SEO

IaC

いろんなクラウドサービスを使うと、インフラの管理が大変なので、IaCを使うことがおすすめです。

  • Terragrunt + Terraform：Terragrunt + Terraformの組み合わせ自動ステート管理、モジュール間の依存関係の定義などとても便利です。
  • Pulumi：好きな言語でIaCを書けるのが特徴です。

Discussion