🎁

giff letter でのバックエンドとフロントエンドのコードの共通化例

2023/04/17に公開

株式会社 pamxy では giff letter(ギフレター)というオンラインギフトサービスを開発しています。giff letter は iOS / Android 向けアプリとして展開されており、今後 Web にも展開する予定です。giff letter はバックエンドと Web フロントエンド、iOS / Android アプリ(React Native)をすべて TypeScript で開発しており、そのコードの一部をプライベートな npm パッケージとして共有しています。この記事では、その共通化例を紹介していきます。また、giff letter では GraphQL を採用しており、バックエンド / フロントエンドの境界の型安全性は GraphQL スキーマと GraphQL Code Generator によって守られているため、この部分については触れません。

重いドメインロジックの共通化

giff letter にはオンラインギフト以外にも機能がいくつかあり、その一つに「記念日メモ」という機能があります。これは、記念日やその繰り返しの設定を入力することによって、記念日が近づいた時にリマインドしたりその記念日におすすめのギフトを提案したりする機能です。

記念日メモのサンプル

記念日の繰り返しは少々複雑で、誕生日のように日付固定のものもあれば、母の日のように何月の第何何曜日などといった月や週、曜日で固定されているものもあります。また、記念日は無限スクロールによって未来の分を永久に取得できる必要があったり、毎年母の日や父の日は毎年デフォルトで表示させる必要があったり…など、要件は様々です。この要件を Web フロントエンド、iOS / Android アプリ、また、記念日のリマインドの通知を送信するためにバックエンドでそれぞれ満たす必要があります。これを満たす方法として、ロジックをバックエンドに持たせ、フロントエンドからリクエストを送信して結果を得るという方法が考えられますが、giff letter ではこの方法を採用しませんでした。それには、繰り返しの設定さえ取得すればあとはクライアント側だけで記念日を生成できるというポイントが関わってきます。共通化のためにバックエンドにロジックを持たせバックエンドにリクエストを送信することはオーバーヘッドになりますし、バックエンドの負荷も増えます。そのため、クライアント側では繰り返しの設定だけ取得し、あとはクライアント側で未来 / 過去の記念日の生成などを行います。

話は少々長くなりましたが、つまりは重いドメインロジックをバックエンドとフロントエンド、さらに iOS / Android アプリで共通化しています。ポイントは、コピペでは難しい量のコードを共通化したこと、オーバーヘッドを減らしたという点です。

プッシュ通知のペイロードの型の共通化

バックエンドとフロントエンドでのコードの共有の観点でよく話題に上がるのは API のリクエストやレスポンス、その schema validator の話ですが、先述の通り giff letter では GraphQL で開発をしており、その型安全性は GraphQL スキーマと GraphQL Code Generator によって守られています。しかし、プッシュ通知で送信されるペイロードは任意の値を送信することができ、当然型安全性はありません。

giff letter では通知のペイロードの schema validator とその型を共通化することで、バックエンドと iOS / Android アプリ間のプッシュ通知の型安全性を守ってます。先述の「重いドメインロジックの共通化」と違いコピペが可能なコード量ではありますが、共通化したパッケージを Single Source of Truth とし、バックエンドとフロントエンドで期待するペイロードの型が異なることを防いでいます。

おわりに

まだまだ発展途上ですが、giff letter は iOS / Android アプリで利用できます。興味を持っていただいた方はぜひダウンロードしてみてください。

iOS:
https://apps.apple.com/jp/app/id1589022685

Android:
https://play.google.com/store/apps/details?id=com.giffletter

GitHubで編集を提案

Discussion