はじめまして、株式会社 pamxy（以下、pamxy）のエンジニアのイトウです。この記事では pamxy のサービスがどのような技術によって支えられているかを紹介していきます。pamxy では、この技術スタックで SNS マーケティングツールや EC サイト（すべて自社サービス）の開発を 1 年半以上続けています。尚、技術選定は基本的にほぼ筆者が行っています。
TypeScript
Web フロントエンドとバックエンドに TypeScript を使って開発しています。さらに、本記事では詳しくは紹介しませんが iOS/Android アプリも TypeScript (ReactNative) を使って開発しています。シェルスクリプトも zx を使って TypeScript で書いています。
選定理由
Web フロントエンドとしての TypeScript は言わずもがなですが、バックエンドに採用した理由として、静的型付け言語として勢いがあった Go、Rust、TypeScript の中だと他の言語と比べて枯れていたこと、Prisma のような優秀な ORM が登場していたこと、筆者が最も得意としていた言語であったこと、人的リソースが少ないため言語の学習コストを抑えられることなどがありました。今のところ大きな問題は発生しておらず、共有したいコードをパッケージ化して Web フロントエンド、バックエンド、iOS/Android アプリ間で使いまわしたりなど、メリットを享受できていると思います。
GraphQL
バックエンドとフロントエンドのデータのやりとりに GraphQL を採用しています。
選定理由
REST vs GraphQL については散々語られていると思いますが、個人的にはスキーマがドキュメントになることと、やはり柔軟にクエリを発行できることが強いと思いました。その代わり REST より気をつけなければいけないこと（悪意のあるクエリの対策や、N+1 問題など）もあるので、使いこなすには技術力や知識が多く必要だと感じます。また、バックエンドも TypeScript で開発しているので、GraphQL Code Generator で一発で両サイドの型などを生成できるのは体験が良かったです。
React/Next.js
Web フロントエンドの構築に Next.js を採用しています。
選定理由
筆者が Vue より得意かつスケールしやすいと考えていることや、Next.js/Vercel に勢いがあったことなどが挙げられますが、Next.js 以外を選択する理由がなかったという方が近いです。
Tailwind CSS
スタイリングに Tailwind CSS を採用しています。
選定理由
CSS Modules や CSS in JS、Chakra UI などとの比較についてもここではしませんが、筆者が思う Tailwind CSS の良さは開発体験の良さと軽量さだと思います。Tailwind CSS のデメリットとしてクラス名を覚えるのが大変なことが挙げられたりしますが、クラス名は VS Code であれば拡張機能を入れれば補完は効きますし、クラス名に hover すれば実際の CSS も覗くことができます（それが arbitrary value であっても）。筆者は、ただ余白をとるためにわざわざクラス名を考えたりコンポーネントを利用したりするのは無駄が大きいように思います。Tailwind CSS は使える色や余白の大きさなどの値を制限することができるのも素敵な点だと思っています。
Prisma
ORM に Prisma を採用しています。
選定理由
Node.js にある ORM の中で Prisma が飛び抜けて優秀だったので採用しました。TypeScript-friendly な点はもちろん、宣言的マイグレーションができるのがかなり強力です。ActiveRecord のようにオブジェクト指向的な思想はなく、単なるクエリビルダとして落ち着いているのがシンプルでとても好きです。今もメンテナンスが活発にされていて新しい機能の追加や改善がなされており、今後も期待できる推しのツールです。
その他
- monorepo: Yarn workspaces を使って monorepo で開発をしています
- ESLint/tsc: ルールは可能な限り厳しくしています
-
Prettier: 思想は無くほぼデフォルトの設定です（
"trailingComma": "all"のみ） - React Hook Form: フォーム制御に使っています
- pathpida: Next.js のルーティングに型をつけるために使っています
- urql: GraphQL クライアントに使っています
- Apollo Server: GraphQL サーバーに使っています
- AWS ECS + Fargate: スケールアウトしやすく環境の再現が楽
- AWS Cloudformation: IaC に使っています
- GitHub Actions: CI/CD などに使っています
- Stripe: 決済のため
- Cloudinary: 画像の最適化のため
- Sentry: ログ収集のため
- Algolia: 検索のため
- Renovate: パッケージの自動更新のため
おわりに
pamxy ではこのような技術スタックで開発したいエンジニアを募集しています。Web フロントエンド / バックエンドは問いませんが、開発をメインで出来る方だと嬉しいです。興味のある方は代表の西江に Twitter の DM でお声がけください。
Discussion