覚書：Webアプリ作るなら技術どれにする？

Shinoda



  1. 言語・フレームワーク選定：

    • フルスタックでの開発がしやすいという理由から、引き続きNext.jsが推奨されています。学習コストは比較的低く、チームでも容易に導入可能です。他のフレームワーク（Remixなど）も触れられましたが、Next.jsが好まれる理由として、フロントとバックエンドをシームレスに統合できる点が挙げられています。

    • 使用されたスタック:

      • ⭐Next.js

      • React

      • Remix

      • Rails

      • Laravel

      • Hotwire

      • Go

      • Rust

  2. データベース：

    • PostgreSQLが引き続き推奨され、特にSupabaseの利用が増えています。Row Level Security (RLS)は強力ですが、設計が難しく、賛否が分かれる点が指摘されました。

    • 使用されたスタック:

      • ⭐PostgreSQL

      • ⭐Supabase

      • MySQL

      • MongoDB

      • Elasticsearch

  3. ORMやDBクライアント：

    • Prismaが引き続き推奨されています。最近追加された型安全なSQLのサポートが特に評価されています。

    • 使用されたスタック:

      • ⭐Prisma

      • SQLc

      • OpenAPI TypeScript

  4. DBの主キー：

    • CUIDと連番（連番を隠したい場合はCUID）が推奨されています。UUIDの利点やインデックスの効率性も言及されています。

    • 使用されたスタック:

      • CUID

      • UUID

  5. CSSとUIライブラリ：

    • Tailwind CSSが引き続き推奨されていますが、既存プロジェクトではCSS Modulesも使用されています。UIライブラリとしては、React Aria、Radix UI、Headless UIが注目されています。

    • 使用されたスタック:

      • ⭐Tailwind CSS

      • CSS Modules

      • React Aria

      • Radix UI

      • Headless UI

  6. フォームライブラリ：

    • React Hook Formに代わる新しいライブラリとして、Conformが紹介されました。

    • 使用されたスタック:

      • ⭐Conform

      • React Hook Form

  7. テストツール：

    • テストツールとしては、Bun Testが注目されています。高速であり、Jestとの互換性も高い点が評価されています。End-to-EndテストにはPlaywrightが推奨されています。

    • 使用されたスタック:

      • ⭐Bun Test

      • ⭐Playwright

      • Cypress

      • Selenium

      • Puppeteer

      • Jest

  8. リンター・フォーマッター：

    • バイオーム（Biome）が注目されています。設定不要で高速なラストベースのツールです。既存のESLintやPrettierと比較して優れた点が多く、今後のプロジェクトでの導入が期待されています。

    • 使用されたスタック:

      • ⭐Biome (formerly known as Rome)

      • ESLint

      • Prettier

  9. インフラ：

    • Vercel、AWS、Cloudflare、Google Cloud Runが主要なデプロイ先として挙げられています。特にCloudflareは新しいアーキテクチャを導入しており、注目されています。

    • 使用されたスタック:

      • ⭐Vercel

      • ⭐AWS (Fargate, RDS, Aurora, SES)

      • Cloudflare (D1, SQL Database at Edge)

      • Google Cloud Run

  10. OpenAPI：

  • OpenAPIに関連するツールとして、API DocとOpenAPI TypeScriptが推奨されています。これにより、型安全なリクエストが可能となり、開発体験が向上します。

  • 使用されたスタック:

    • ⭐API Doc

    • ⭐OpenAPI TypeScript


いいなと思ったら応援しよう！