シード期のSaaS開発を支える技術スタック

飯塚啓介

共同創業者 & CEO

私はエンジニアとして、技術スタックをまとめた記事を読むのに非常にワクワクします。しかしながら、このような記事が紹介している技術スタックは成熟したサービスのものに限られており、立ち上がり初期のSaaSに関する記事はほぼ見かけません。そのため、現在のFlipの技術スタックの選定に役立つ情報をなかなか見つけられず、多くの失敗を繰り返してきました。

ということで、今回のブログではFlipがこれまでに採用した技術スタックを紹介します。SaaSの開発を始めたばかりの方や、SaaSを新しく開発する予定のある方の参考になれば嬉しいです。

言語

TypeScript. 開発当初はJavaScriptで統一していましたが、サービスの規模が大きくなるにつれて、昔書いたコードを見返した時に「このコードは何をしているのか」と忘れることが多くなりました。TypeScriptを採用したことで変数や引数の型が可視化され、コードの可読性が大幅に向上しました。共通の型をフロントエンドとバックエンドの両方で利用することで、データモデルを変更した際のコード修正もしやすくなりました。

フレームワーク/ライブラリ

フレームワーク/ライブラリを選択するときに重視していることは二つあります。

開発者コミュニティ. 技術のシェアが高ければ高いほど利用者側の開発者も多いので、何か行き詰まった時のサポート(ドキュメント/StackOverflow/ブログなど)が充実しています。ニッチなライブラリに関しては、直近のコミット数や未解決のイシュー数を調べることで、今後致命的なバグが生じた場合の作成者側の対応の早さを調べています。
少ない技術で多くを達成. 頭の切り替えコストを抑えるために、利用するフレームワークの数はできるだけ少なくしています。一方でライブラリに関しては、コードレベルで自分好みに抽象化できるので、良いライブラリがあれば積極的に採用しています。

全体

Lerna. フロントエンドやバックエンドのような複数のパッケージを一つのレポジトリで管理する(=モノレポ)ためのツールです。全てのパッケージのスクリプトを同じ階層から実行できるのはとても便利な上、ローカルのNPMパッケージ的なモノも簡単に作れます。

フロント系

React. 一番人気のフロントエンドフレームワークです。Reactを知る前と知った後では、作れるアプリケーションの幅が劇的に広がりました。自由度が高い一方で、Reduxなどを用いたステート管理は非常に複雑であり、システム的な思考が求められます。
Styled Components. JavaScriptファイルに直接CSSを書き込めるライブラリです。JavaScriptファイルとCSSファイルを行き来する必要がなくなります。Reactのようにコンポーネント単位でスタイルを再利用することも可能です。
NextJS. Reactをベースにしたフロントエンドフレームワークです。Flipのランディングページで採用しています。アプリのビルド時に静的なHTMLファイルを作ってくれるため、高速なサイトとSEO最適化の二つを達成できることが個人的なオススメポイントです。

バックエンド系

Express. APIサーバーを簡単に構築できるフレームワークです。Nestも検討しましたが、JavaScript以外の言語に触れたことがない方にとっては、学習コストが高いと感じました。

利用中の外部サービス

インフラ

Docker. Dockerコンテナを作成することで、Dockerをサポートする全ての環境で同じようにアプリケーションを動かすことができます。チーム開発に役立つことはもちろん、ほとんどのクラウドサービスがDockerコンテナによるホスティングをサポートしています。
Amazon ECS. AWS上で簡単にDockerコンテナを利用できるフルマネージド型のサービスです。HerokuやRenderなどのPaaSと比較すると覚えることが多いですが、一度セットアップさえしてしまえば、運用は簡単に行えます。
Terraform. インフラをコードで管理できるツールです。AWSはもちろん、出来るだけ多くのリソースをTerraformで管理するように心がけています。コマンド一つでリソースの作成や削除ができるので、インフラコストをかけることなく、テスト環境を立ち上げられます。その他のリソースも一元管理することで、無駄なリソースが増殖することを防げます。

CI/CD

Github Actions. GitHubが提供するCI/CD(継続的インテグレーション/継続的デリバリー)のサービスです。最初はTravisを利用していましたが、ソースコードにアクセス可能なサービスを減らしたかったことに加え、GitHub上でCIの状況を簡単に確認したかったことから乗り換えました。

モニタリング

Sentry. サービスで発生したエラーログを収集してくれるサービスです。エラーが発生した背景を詳細に把握できます。現在はウェブアプリとバックエンドのエラーログを収集しています。
DataDog. 多機能なモニタリングツールです。主に、インフラのリソース監視とログの管理をしています。グローバルのモニタリング市場でのマーケットリーダーであることから採用しました。スタートアップ向けのプログラムに登録すれば、無料で使えます。

メール

SendGrid. APIベースのメール配信サービスです。新規登録時の認証メールやパスワードの再設定メールなど、全てのメールの配信基盤として利用しています。Mailchimpも検討しましたが、SendGridと比較してドキュメンテーションが読みづらく、APIの機能も限られていました。管理画面上でメールのデザインも行えますが、非常に使いづらいので、React Emailを採用しています。

分析

Flip. プロダクト内のユーザーの行動を定量的に可視化するツールです。Google Analyticsのようなアクセス解析ツールと似ていますが、より解像度の高い分析が直感的に行える上、AIに質問するだけで何でも可視化してくれます。弊社が提供しているツールです。

決済

Stripe. APIベースの決済サービスです。サブスクリプション決済のバックエンドに用いています。Stripe以外のサービスには、税関係の計算などもまとめて管理してくれるPaddleや、BASEから分社化したPAY.JPなども存在しますが、Stripeの認知度と「世界一読みやすいドキュメンテーション」と呼ばれるサービスを超えるサービスは存在しませんでした。

サポート

Zendesk. 電話/メール/SNSからの問い合わせを一元管理できるサービスです。ウェブアプリのウィジェット(右下の丸いボタン)からの問い合わせを管理しています。非公式のライブラリを使うことでウィジェットの表示方法をカスタマイズできます。Driftは表示方法のカスタマイズ性が低く、Intercomは料金が高いです。
Airtable. ノーコードのデータベースツールです。主にランディングページからの問い合わせを管理しています。APIでAirtable側に問い合わせを送ると、問い合わせがデータベースに追加され、Slackに自動で通知が飛ぶように設定しています。Notionも検討しましたが、ブラウザ環境からAPIを直接叩けないため、断念しました。

デザイン

Figma. 無料から使えるデザインツールです。アプリケーションやランディングページのデザインを管理しています。Figma以外のツールは検討したことはありませんが、これまで一度も困ったことはありません。

ドキュメント

Notion. 社内のドキュメント&タスク管理ツールです。ファイル形式ではなくページ形式で管理できるのが一番のオススメポイントです。興味本位でClickUpやCodaも利用してみましたが、全てをブロックという単位で管理できるNotionの方が使いやすいです。すぐに必要な情報にアクセスできることから、タスク管理もTrelloからNotionに乗り換えました。
Contentful. APIベースのコンテンツ管理サービスです。Flipのブログ記事を管理しています。Headless CMSとも呼ばれており、ブログのUIを自由にカスタマイズできるのが特徴です。最低限のコーディングスキルがあり、サイトのデザインを統一したい場合はオススメです。しかし、Notionでブログの原稿を書いていることもあり、毎回NotionからContentfulに原稿を移すのは面倒なので、NotionをCMSとして採用する予定です。

最後に

以上が、Flipの技術スタックの紹介となります。サービスとしてはまだまだ駆け出しのため、これから新しく追加したり変更したりすることは頻繁に起きると思います。このブログに関する質問などありましたら、ツイッターでお気軽に連絡して下さい。

また、現在は2名のメンバーでこの技術スタックを支えられている(いない)状況です。全職種で採用していますので、力を貸していただける方をお待ちしています！こちらのページから、ぜひお話しましょう！

プロダクトの成長を加速させよう

クレジットカード不要で、無料から始められます。