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

# 開発者ロードマップ

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

- [GitHub](https://github.co.jp/)
- [TypeScript](https://www.typescriptlang.org/)
- [React](https://legacy.reactjs.org/)
- [Node.js](https://nodejs.jp/)
- [AWS](https://aws.amazon.com/jp/)

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

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

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

- FEだけ無料Github Pages：[viteでReact×TypeScript環境を爆速で作る最小版](https://qiita.com/teradonburi/items/fcdd900adb069811bfda)
- API有り無料Heroku：[React](https://legacy.reactjs.org/)+[Node.js](https://nodejs.jp/)+[NestJS](https://nestjs.com/)
- API有りかつドメイン付きでちゃんとしたもの作るAWS：Amplify、ECS、Route 53、CloudFront、S3、Elasticashe（Redis）、Open Search、Datadog

## 開発分類

### Web App

- Language:[TypeScript](https://www.typescriptlang.org/)
- Lint&Formatter:[biome](https://github.com/biomejs/biome)
- Package Manager:[pnpm](https://pnpm.io/ja/)
- Front End:[React](https://legacy.reactjs.org/)+[NextJS](https://nextjs.org/)
	- [shadcn/ui](https://ui.shadcn.com/)
	- [React Hook Form](https://react-hook-form.com/)+[zod](https://github.com/colinhacks/zod)
	- [Redux Toolkit](https://redux-toolkit.js.org/)
	- [jsonLogic](https://jsonlogic.com/)+[react-awesome-query-builder](https://github.com/ukrbublik/react-awesome-query-builder)
	- [XState](https://xstate.js.org/)
	- [React Flow](https://reactflow.dev/)
- Admin Tools Framework: [Refine](https://refine.dev/)
- API:[Node.js](https://nodejs.jp/)+[NestJS](https://nestjs.com/)
	- [dotenv](https://github.com/motdotla/dotenv)
	- [prisma](https://www.prisma.io/)
	- [OpenAPI](https://www.openapis.org/)
	- [espresso](https://github.com/kayac/ecspresso)
- Middleware: [Docker](https://www.docker.com/ja-jp/)
	- DB:[PostgresSQL](https://www.postgresql.org/)
	- Cache:[Redis](https://redis.io/)
	- SearchEngine:[OpenSearch](https://opensearch.org/)
	- FileStorage:[LocalStack](https://www.localstack.cloud/)
	- EventQueue:[Rabbit MQ](https://www.rabbitmq.com/)
- Deploy:[CDK for Terraform](https://developer.hashicorp.com/terraform/cdktf)
- Purchase: [Stripe](https://stripe.com/jp)

### Mobile App
- [Expo](https://expo.dev/)+WebView(Push Notification)
    - [Apple Developer](https://developer.apple.com/jp/)
    - [Google Play Console](https://developer.android.com/distribute/console?hl=ja)

### CI/Monitor
- [Github Actions](https://docs.github.com/ja/actions)
- [AWS X-Ray](https://aws.amazon.com/jp/xray/)+[Datadog](https://www.datadoghq.com/ja/)

### Log
- [BigQuery](https://cloud.google.com/bigquery?hl=ja)

### テスト
- Unit Test:[Jest](https://jestjs.io/ja/)
- DB Unit Test:[Jest prisma](https://github.com/Quramy/jest-prisma)
- React Component Test:[react-test-renderer](https://www.npmjs.com/package/react-test-renderer)
- Visual Regression Test:[Storybook](https://storybook.js.org/)+[chromatic](https://www.chromatic.com/)
- E2E Test:[playwright](https://playwright.dev/)

### Doc/Tool
- 実装ドキュメント自動生成：[TSDoc](https://tsdoc.org/)
- APIドキュメント自動生成：[Swagger](https://swagger.io/)
- 依存関係図：[madge](https://github.com/pahen/madge)
- ER図：[prisma-erd-generator](https://github.com/keonik/prisma-erd-generator)
- 不要コード検知：[knip](https://knip.dev/)
- ルールベースのリファクタリング:[jscodeshift](https://github.com/facebook/jscodeshift)

### AI(LLM)
- [OpenAI](https://openai.com/)
- [Ollama](https://ollama.com/)