はじめに
こんにちは！23年新卒入社でWebアプリエンジニアの室永です。最近、整体に通い始めたのですがあらゆる先生に20代の硬さではないと言われショックを受けています。
今回は、2025年3月に正式版リリースされた新サービス「OpenWorkキャリア」の技術スタックについて紹介しようと思います。
OpenWorkキャリアって？
「個人」のキャリアにフォーカスした匿名キャリアSNSです。
匿名だからこそ、聞きにくいキャリアの悩みを情報交換しながら、個人の主体的なキャリア選択につながる場となることを目指しています。
少しでも気になった方はぜひぜひ使ってみていただけると嬉しいです！
本プロジェクトの歩みとタイムライン
2023年末から始動していたため、現在と状況やトレンドなどが違うということを前提に置きつつ読んでいただけると助かります。
現在選定するとすれば違う技術を採用していたというケースも十分有り得ると思います。
| 時期 | 実施項目 |
|---|---|
| 23年11月 | 技術選定開始 |
| 24年01月 | ベータ版開発開始 |
| 24年07月 | ベータ版リリース |
| 25年03月 | 正式版リリース |
技術選定の指針
選定の軸としたのは以下の3点です。
- 将来性（技術的負債になり辛いか？長期的な保守や拡張に耐え得るか？）
- コミュニティ規模（調べやすいか？エンジニア採用やAIコーディングにおける優位性があるか？）
- モチベーション（社内外のエンジニアが扱いたい技術か？社内エンジニアの学習コストが低いか？）
OpenWorkキャリアの技術スタック
以下より、本題である技術スタックになります。
記載していない領域の技術については、基本的には既存のOpenWorkと同様と考えていただけると良いと思います。
バックエンド
TypeScript, NestJS, GraphQL, Prisma
既存のOpenWorkはPHPとSymfony をメインとしていますが、将来的なネイティブアプリ化を見据えたフロントエンドとバックエンドの分離や、型による保守性の向上、REST、GraphQL、gRPCなどの柔軟な選択肢などから、バックエンドにTypeScriptとNestJSを採用しました（現在であれば、Honoも検討の余地がありそうです）。
また、NestJSはDI（Dependency Injection）やDecoratorなどを活用できる点でSymfonyと開発体験が近いため、当社エンジニアの学習コストが低い点も採用の決め手となりました。
フロントエンド
TypeScript, React, Next.js (App Router), GraphQL (GraphQL Codegen, graphql-request), Biome, Tailwind CSS, Storybook
コミュニティ規模の大きさや型安全性、AIコーディングとの親和性などの理由からReact, Next.jsを選定しました。
当時はNext.js一択でしたが、現在であればTanStack Startなども選択肢に入りそうです。
GraphQL Codegen, graphql-requestによるAPI通信により、フロントエンドとバックエンドを疎結合にしつつ型の恩恵を受けられるようにしています。
また、初期はリンター、フォーマッターとしてESLint, Prettierを使っていましたが、パフォーマンスなどの観点からBiomeに移行しました。
AI支援
当社のエンジニア・デザイナーがライセンスを保有するGitHub Copilotや全社的に利用推進されているGeminiの他に、OpenWorkキャリアの開発チームではCursorやCodeRabbitを試験的に導入しました。
その他（関連ライブラリ、テスト、ツールなど）
jotai, Vitest, Zod, neverthrow, refine, pnpm
状態管理やバリデーション、エラーハンドリングなどにjotaiやZod, neverthrowを採用しました。
また、モノレポ構成によって認知負荷軽減やフロントエンドとバックエンド間の型共有のし易さを実現するためにpnpm workspaceを利用しました。
さいごに
いかがでしたでしょうか。オープンワークではこうした新規サービスでのモダンな技術選定やアーキテクチャ設計に積極的に取り組んでいます。
既存の「OpenWork」も含めた技術スタックが気になる方は以下の記事を御覧ください。
この記事を読んで当社での開発や業務に少しでも興味を持っていただけたら、ぜひ採用サイトを覗いていただけると嬉しいです！
