😸

[2023年版] トドケールの技術について

2023/02/06に公開

はじめに

今年も弊社に興味をお持ちいただいた方に向けて、弊社で採用している技術や組織的な取り組みについてまとめて共有します。過去との遷移が見たい方は以下の記事も併せて確認してみてください

https://zenn.dev/hayata_yamamoto/articles/4e68e8510f4e66
https://zenn.dev/hayata_yamamoto/articles/03efd5226f91ce

全般的な話

アプリケーション、インフラの開発は GitHub 上で行っており、CI/CD についても原則 GitHub Actions で実施しています。課題の管理は、GitHub Issue を用いて用いながら、Notion 上で整理されたユーザーストーリーに対して「どんな開発が必要か」を議論し、進めていっています。

https://zenn.dev/hayata_yamamoto/articles/79d53cc5cb3753

リリース後の運用・監視は CloudWatch, X-Ray, Sentry などを用いています。

https://aws.amazon.com/jp/cloudwatch/
https://aws.amazon.com/jp/xray/
https://sentry.io/welcome/

モバイル

モバイルアプリは相変わらず React Native + Expo でサービス提供を行っています。コンポーネントは原則、NativeBase を中心に構築しています。

https://reactnative.dev/
https://expo.dev/
https://nativebase.io/

APIとのやり取りには、ReactQuery を用いており、サーバーサイドが生成する OpenAPI 定義のファイルを用いて aspida の型を自動生成し、APIの呼び出し時にも型の恩恵を受けられるようにしています。以前は、apollo を用いていましたが、現在は ReactQuery に一本化されています。

https://react-query-v3.tanstack.com/
https://github.com/aspida/aspida

Storybook の活用はまだ十分にできておらず、ネイティブアプリの開発に関して React Native を用いているメリットがまだ十分に受けられていない点が改善点として挙げられます。また、 Expo のサービスもあまりうまく活用しきれておらず、 EAS Build は用いているものの Submit, Update についてはまだワークフローに組み込めておらず、こちらも改善があるなと感じています。

https://github.com/storybookjs/react-native
https://docs.expo.dev/eas/

フロントエンド

元々、 素の React.js と TypeScript でアプリケーションの開発を進めていましたが、徐々に Next.js を用いたアプリケーションに移行していっています。

https://zenn.dev/hayata_yamamoto/articles/a715bed0f377be

現在中心となる技術スタックは、 Next.js, MUI, Storybook です。Storybook については、chromatic を利用してレビュー時にも確認できるようにしています。

https://nextjs.org/
https://mui.com/
https://storybook.js.org/
https://www.chromatic.com/

モバイルと同様に、サーバーサイドとのやりとりは ReactQuery, aspida の組み合わせで運用しています。この方式が導入される前に実装されたファイルについては一部 swr が使われている箇所もありますが、aspida のおかげでAPIのURLはある程度抽象的に扱える状態になっています。

https://react-query-v3.tanstack.com/
https://github.com/aspida/aspida

弊社における Storybook の活用はまだ始まったばかりで、まだまだテストの量は不十分であるし、デザインシステムとしての活用もあまり十分にできているとは言えません。デザイナーとエンジニアが協力しながら、できるところから順次対応していってくれていますが、より効率的な開発が行えるように施策を打っていく必要があるなと感じています。

https://storybook.js.org/blog/code-coverage-with-the-storybook-test-runner/
https://storybook.js.org/tutorials/design-systems-for-developers/

サーバーサイド

サーバーサイドでは変わらず、Python を用いて開発をしています。 以前、記事でも紹介した mangum, FastAPI で作成されたアプリケーションを単一の lambda 関数の上で動かす方式をとっています。

https://fastapi.tiangolo.com/
https://zenn.dev/hayata_yamamoto/articles/781efca1687272

サーバーサイドでは、以前 AppSync の GraphQL エンドポイントを運用していましたが、2022年で全てのAPIが GraphQL から REST に移行され、2023年上旬にクライアント側の全ての呼び出しから GraphQL が削除される見込みです。今後は、GraphQLはBFF層で用いていく方針で考え、サーバーサイドの責務からは外す方針です。

GraphQL から REST に移行したことによって、Subscription のような双方向通信が行えなくなり、ポーリングで対応しないといけないシーンが増えたことには課題感を感じています。一部APIを websocket 対応したり、BFF層で REST をコールしつつ、Subscription の機能を提供するなど、クライアント側の限られたネットワーク帯域をうまく扱う方法は今後検討していく必要があるなと思っています。

インフラ

サーバーサイドアプリケーションのインフラは Serverless Framework (CFn) で管理し、それ以外のリソースは Terraform で管理しています。 Terraform Cloud で State 管理とデプロイを実施しています。

https://www.serverless.com/
https://cloud.hashicorp.com/products/terraform

データ基盤については、現在 Glue, S3, Athena, Redash で構築・運用しています。 BigQuery のような非エンジニアでも利用実績の多い選択肢も考慮に入れながら、弊社でのデータ活用のあり方をイメージしながら改善を走らせて行こうと考えています。

トドケールテックブログ

Discussion