LIDDELLのTypeScript Firstな技術スタックの紹介
見出し画像

LIDDELLのTypeScript Firstな技術スタックの紹介

こんにちは。リデル株式会社 CTOの須藤です。

弊社の開発部門としては、これが初のNote記事公開です👏
今回はリデルの技術スタックについて紹介したいと思います。

はじめに

我々は現在、大きく4つのサービスを開発しています。

弊社で開発するサービスは、基本的に『インフルエンサーの方々とクライアント企業様を結びつける構造』になっており、以下が主なサービス利用者になります。

・インフルエンサー(Nativeアプリ)
・クライアント企業担当者(Web)

現在、提供中のサービスのうち3つのサービスを1つのサービスに統合するプロジェクトが動いています。
そんな背景も踏まえて、技術スタックについてご覧いただければと思います。

全体構成

サービス統合の全体像が以下です。

画像1


既存サービスのAPIは残しつつ、フロントエンドは React NativeNext.js で新規に作り直します。(絶賛開発中です)

また、既存サービスAPIとフロントエンドの間にTSのBFFを置くことで、既存のPHPやRubyのAPIに対して静的型付けを行なっています。
さらに GraphQL Code Generator によりフロントエンドと型を共有することで、TypeSafeなAPIリクエストを実現しています。

既存APIの共通ロジックはマイクロサービス的に切り出し、こちらも共通化のタイミングでTS化しています。
なお、認証システムは今年4月に無事Auth0への統合を終えました👏

こんな感じで、全てをTypeScriptで実現することを目指した構成になっています。

言語

画像2

TypeScript
・PHP
・Ruby

TypeScript First の技術選定を行なっています。
・静的型付けの恩恵
・内部エンジニアの学習コスト低下
・採用効率の向上
が大きな魅力だと感じています。

個人的に、動的型付け言語によるサービス運用を長く経験しており、様々な障害と運用コストを経験してきたため、言語選択においては静的型付け言語であることを必須要件にしていました。
他の選択肢もありましたが、今は上述のような理由からTypeScriptを選択して良かったと思います。

Webフロントエンド

スクリーンショット 2021-06-11 14.43.33

・Next.js(Vercel)
・Chakra UI
・Emotion
・URQL

開発スピード重視の技術選定にしています。
Next.js を選んでいるのは、SSR的な要件というよりは、Vercelと組み合わせたときのDeveloper Experienceが目的です。

Chakra UIEmotion により既成コンポーネントを活かしたスピーディな開発を目指しています。
コンポーネント実装はフルスクラッチの方針で進めていた時期もありましたが、コストの割にユーザビリティを損ねるシーンもあったため、この選定に落ち着いています。

GraphQL Clientには URQL を採用しました。
Bundle Sizeの小ささとファーストパーティプラグインの豊富さに魅力を感じて選択しています。

状態管理については、現状ではReduxやRecoilなどのライブラリは導入しておらず、Composition Pattern や Context API の利用により実現しています。
Cacheの側面では、(まだ全体方針については議論中ですが)URQLのDocument CachingやNormalized Cachingを利用していく予定でいます。
今後のプロダクトの成長や要件の変化に応じてライブラリの導入を再検討することになりそうです。

Native

スクリーンショット 2021-06-11 14.43.10

・React Native (Expo)
・URQL

今までは Swift で iOS アプリのみ開発していましたが、技術スタックをTSに揃えていく狙いもあり React Native への移行を進めています。
iOSエンジニアとAndroidエンジニアの採用を考えなくて良いというのは、ベンチャーには非常に有り難い話です。

弊社のアプリ要件ではNativeの機能は必要としないため、Expoを用いたManaged workflowで開発しています。

バックエンド

スクリーンショット 2021-06-11 14.42.48

・NestJS
・GraphQL
・Prisma2
・Clean Architecture
・DDD

Expressのミドルウェアを利用出来るTypeScript製フレームワーク、ということで、NestJSをメインで採用しています。

将来的な開発効率の向上のためにGraphQLを採用し、GraphQLと相性の良いORMのPrismaを利用しています。
(Prismaは将来性は感じるもののまだ枯れていない部分もあり、社内には TypeORM を用いたREST APIのサーバもあります。)

Clean Architecture、DDDは社内のすべてのバックエンド実装に組み込まれており、社内の共通概念になっています。

インフラ

スクリーンショット 2021-06-11 14.42.27

・Serverless Framework (Lambda, API Gateway)
・Aurora Serverless (Data API)

新規サーバでは Serverless Framework を積極的に利用しています。
Aurora Serverless、Data APIの存在により、ServerlessでもRDBの選択が無理なく出来るようになりました。
弊社にはインフラに強いエンジニアが現状おらず、運用の手軽さを重視した選定になっています。

NestJSは(特にExpressベースだと)立ち上がりが遅くServerlessとの相性は良くないと言われていますし、Prismaは(執筆時点では)Data APIを正式サポートしていないですし、別構成の検討の余地はおおいにあるとは思っています。

おわりに

リデルの技術スタックについて紹介しました。
TypeScriptをベースとして、有用と感じた技術は積極的に取り入れています。
技術的な挑戦を推奨するスタンスなので、技術力を磨きたい人には非常に刺激的な環境なのではないかと思います。

オフィスのミッドタウン移転も決まり、現在以下の職種を積極採用中です!

・エンジニア
・エンジニアリングマネージャ
・UI/UXデザイナー
・PdM


ご応募お待ちしております!


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
LIDDELL Inc. CTO。 TypeScriptを中心とした技術系の記事と、組織づくり系の記事を書いていくつもりです。 https://www.wantedly.com/companies/liddell/post_articles/326514