はじめに

こんにちは、aciassの東です。

現在弊社では、愛するペットと飼い主をサポートするための新しいWEBサービスを開発しており、今年中のローンチを目指しています。

事業内容の詳細についてはまだお話しできないので、今回はその新規サービスにAWS Ampify を採用したこと。そしてなぜ AWS Amplify を採用することにしたのか、それに伴い他にどのような技術スタックを採用したのかをお話ししたいと思います。

採用した技術スタック

AWS Amplify Gen 2

プロジェクトの最優先事項は、開発期間を短縮し、手早くサービスをローンチすることでした。そこで候補に上がったのが AWS Amplifyです。

Amplifyは、クラウドベースのアプリケーションを迅速に構築、デプロイ、管理できるプラットフォームであり、開発スピードを大幅に向上させることができます。特に、スケーラビリティやデプロイの簡便さは非常に魅力的です。

また、開発者目線で大きく意識することもなく、DynamoDBやS3などの付随するサービスを構築してくれることも嬉しいポイントですね。

今回バックエンドの中核を担うサービスを選定しているタイミングで、Amplify Gen2 （第二世代）が一般提供開始となりました。

Gen1からGen2に移り変わる中で、個人的に非常に大きな判断材料となったのが、sandbox機能をサポートしたことです。

それまでは、クラウド上に構築された１つの開発用のバックエンド環境に、開発者それぞれが接続するという形でした。構成などを変更すると他の開発者にも影響が出てしまうという状況ですね。

Gen2になりsandboxという形で、開発者それぞれにバックエンド環境が与えられるようになりました。そしてこれはコードベースでできており、コードの変更（例えば認証機能の追加やスキーマ情報の変更など）は自動的に検知され、サンドボックス環境に即座に反映されます。

このsandbox機能は、実際に触ってみて非常に開発体験が良いと感じました。

これらを踏まえて今回の新規サービス開発では、AWS Amplify を採用することとなりました。

GraphQL（AWS AppSync）

データ通信の効率を最大化するために、REST APIではなくGraphQLを採用したいという思いがありました。GraphQLは、クエリベースの柔軟なデータ取得が可能であり、クライアントが必要とするデータのみを取得できるため、通信量の削減とパフォーマンスの向上が期待できます。特に、複数のデータソースからの統合やリアルタイムなデータ更新においても優れた性能を発揮します。

そしてAWS Amplify Gen2におけるデータのやり取りは、デフォルトでAppSyncが構築され、そこでGraphQLが実行されるという構成になっています。

この辺りはAmplifyを選定した一因ともなっています。

TypeScript

フロントエンド開発には、TypeScriptを採用しました。

採用理由としては、型の安全性による品質の向上ももちろんあるのですが、「扱える開発者が多い」こと、そして「扱いたいと思っている開発者が多いこと」というのがポイントでした。

今後プロジェクトがどのような方向に向かっていくか分かりませんが、サービスをスケールするとなった際に、開発者の採用がボトルネックになってしまうという事態は避けたいです。

だから、扱える人、扱いたいと思っている人の数というのは非常に重要な要素だと思います。

React / Next.js

フロントエンド開発の核として、ReactとNext.jsを採用しました。

採用の理由としてはやはりTypeScriptと同じく「扱える人の数」が大きな要素です。

Reactは、世界中で広く使われているフロントエンドライブラリであり、多くの開発者が習得しているため、プロジェクトへの参加者を見つけやすいという利点があります。

Next.jsもReactを基盤としているため、Reactのエコシステムをそのまま活用でき、スムーズに開発を進めることができます。

また、ReactとNext.jsは共に豊富なドキュメントとコミュニティリソースが存在しています。

開発中にはやはりさまざまな問題に直面することもあるかと思います。そういったとき、公式ドキュメントや多数のオンラインチュートリアル、フォーラムなどで迅速に解決策を見つけることができ、開発スピードの向上に繋がります。

さらに、ReactとNext.jsをサポートする多様なライブラリやツールも多数存在しており、機能追加やカスタマイズが容易という点も大きなポイントです。

サービスがスケールした際には初学者の採用も視野に入れなければなりません。その際、ReactとNext.jsの選定は非常に有利だと思っています。

学習リソースが豊富であるため、新しいメンバーが早期に戦力化できる可能性が高くなります。

また、Reactはコンポーネントベースのシンプルな構造を持ち、Next.jsは開発者の負担を軽減する多くの便利な機能を提供しているため、初学者でも効率的に学び、プロジェクトに貢献できるようになります。

結果として、ReactとNext.jsの採用は、開発チームの拡張や新規メンバーのスムーズなオンボーディングを可能にし、プロジェクトの進行を加速させる上で重要な要素となっていると考えています。

Headless UIとTailwindCSS

ユーザーインターフェースには、Headless UIとTailwindCSSを組み合わせて使用しています。

これにより、デザインの自由度が高まり、洗練されたインターフェースを簡単に構築できると考えています。特にTailwindCSSは、ユーティリティファーストのアプローチで、素早くスタイリングを行うことができる為、プロジェクトの迅速な進行に貢献が出来ると考えました。

開発のチャレンジと解決策

このプロジェクトでは、短期間での開発を最優先事項としつつも、品質を犠牲にすることなく、機能性の高いサービスを提供することが求められました。

GraphQLの採用により、データの効率的な取得と統合を実現し、AWS Amplify Gen 2を活用することで、スケーラビリティを維持しつつ、迅速なデプロイを可能にしました。

また、TypeScriptの導入により、チーム全体の生産性とコードの保守性の向上が期待でき、いまのところは円滑にプロジェクトが進行しています。

サービスの今後の展望

現在、サービスのローンチに向けて本格的な実装を行っています。また、ローンチ後も機能拡充やユーザーのフィードバックに基づく改善を計画しています。

将来的にはさまざまなステークホルダーが関わる総合的なプラットフォームを目指していきたいと考えています。

おわりに

現在aciassでは、愛するペットと飼い主の生活を豊かにするためのプロジェクトの中でさまざまな取り組みを計画しています。それは単純にWEBサービスをローンチするというだけの話に留まりません。

開発者、営業、広報、デザイナー、飼い主、ペット...という枠に拘らず、自由な発想でプロジェクトを進めていきたいと考えています。

開発者としては短期間での開発と迅速なローンチを最優先にしながらも、AWS Amplify Gen 2、GraphQL、TypeScript、React / Next.js、Headless UI、TailwindCSSという技術スタックを活用し、ペットオーナーにとって価値のあるサービスを提供できることを目指しています。

今後の展開にもぜひご期待ください。