Web Application開発者向けロードマップ

開発者ロードマップ

以下をベースにウェブアプリケーション開発者として
プロダクトリリースに必要な習得しておきたい知識や技術

• GitHub
• TypeScript
• React
• Node.js
• AWS

言語をTypeScript統一することでFE、BE、DB間での型を一貫できる構成となり、
継続的に安定したWebシステム開発ができるのと枯れた技術になりつつある（情報が豊富）なため、
不変な概念も多く、早々にパラダイムシフトが起きないと考えているため。

プロダクトリリース棲み分け

プロトタイプ、MVP、プラットフォームの順

• FEだけ無料Github Pages：viteでReact×TypeScript環境を爆速で作る最小版
• API有り無料Heroku：React+Node.js+NestJS
• API有りかつドメイン付きでちゃんとしたもの作るAWS：Amplify、ECS、Route 53、CloudFront、S3、Elasticashe（Redis）、Open Search、Datadog

開発分類

Web App

• Language:TypeScript
• Lint&Formatter:biome
• Package Manager:pnpm
• Front End:React+NextJS
  • shadcn/ui
  • React Hook Form+zod
  • Redux Toolkit
  • jsonLogic+react-awesome-query-builder
  • XState
  • React Flow
• Admin Tools Framework: Refine
• API:Node.js+NestJS
  • dotenv
  • prisma
  • OpenAPI
  • espresso
• Middleware: Docker
  • DB:PostgresSQL
  • Cache:Redis
  • SearchEngine:OpenSearch
  • FileStorage:LocalStack
  • EventQueue:Rabbit MQ
• Deploy:CDK for Terraform
• Purchase: Stripe

Mobile App

• Expo+WebView(Push Notification)
  • Apple Developer
  • Google Play Console

CI/Monitor

• Github Actions
• AWS X-Ray+Datadog

Log

• BigQuery

テスト

• Unit Test:Jest
• DB Unit Test:Jest prisma
• React Component Test:react-test-renderer
• Visual Regression Test:Storybook+chromatic
• E2E Test:playwright

Doc/Tool

• 実装ドキュメント自動生成：TSDoc
• APIドキュメント自動生成：Swagger
• 依存関係図：madge
• ER図：prisma-erd-generator
• 不要コード検知：knip
• ルールベースのリファクタリング:jscodeshift

AI(LLM)

• OpenAI
• Ollama