スペースマーケットのプロダクト技術スタック 2020年末版

スペースマーケットCPOの三重野です。本日はスペースマーケットのサービスを支えるWeb・アプリプロダクトの技術スタックを紹介します。全ては書ききれないので大きな変更があった部分のみピックアップして記載します。

同じテーマの過去記事はこちら👇
https://blog.spacemarket.com/code/tech_stack_2019/

1. WebFrontend

言語
・TypeScript

WebFrontendのTypescript化が進みました。今年の夏に SPACEMARKET WORK という新規プロダクトをローンチしましたが、その際はほとんどの新規コードはTypescriptで実装されました。

フレームワーク
・Next.js

スペースマーケットではこれまでWeb Frontendの実装にフレームワークを使わず独自実装でSSRなども実現していました。それ自体は問題なく動作していたのですが、新規プロダクトの技術選定時に、より汎用的な技術の方が運用もしやすいだろうということでNext.jsを採用することになりました。こちらがTypescript+Next.jsで開発された「SPACEMARKET WORK」です。

【公式】スペースマーケットWORK｜格安貸し会議室からレンタルオフィスまでワークスペース簡単予約

設計
・Presentational ComponentとContainer Componentの分割設計

Dan Abramovさん提唱のPresentational（見た目に責任を負う）ComponentとContainer（アプリケーションの動作に関する責任を負う）Componentとを分割するという設計に、Styled-componentsの要素を加味し、Presentational（HTML構造を持つがStyleは関与しない）Component + Styled（Styleを持つ）Component、という独自の設計方針で進めています。こちらに関して記載されたエンジニアnoteはこちら。

テストフレームワーク
・Jest+React Testing Library

技術選定、環境構築、基本方針、勉強会などメンバーへのオンボーディングなどUTへの取り組みを強め、大きく前進しました。合わせて既存実装もテストしやすい設計への変更が進められています。こちらに関して記載されたエンジニアnoteはこちら。

QA
・Autify
・Storybook自動化

コンポーネントの振る舞いを自動テストするUTとは別にEtoEで問題がないことを確認するテストの自動化も進められました。詳細はこちら

また、StorybookによるStyled-componentsの品質管理を自動化する仕組みも構築しました。こちらも詳細はこちらのnote参照

2. Android

ライブラリ
・Jetpack
・RxJava
・Dagger

Androidはここ数ヶ月で近代化が一気に進みました。リアクティブ化にとどまらずActivityとFragmentの戦略的使い分けやマルチモジュール化など、基本構造部分についての負債解消も同時に進んでいます。
本番で動いているまあまあの規模のアプリを正常に動かしながらも一部分だけ近代化していくのは難易度も高いのですがそれらが高いスキルにより進められています。エンジニアのブログはこちら

3. iOS

ライブラリ
・Carthageをやめる

ライブラリ管理ツールとしてCocoaPodsとCarthageを併用していたのですが一本化するため、CarthageをやめCocoaPodsに寄せました。いまならSwiftPackageManagerでしょうという気もしますが一部レガシーなライブラリが対応できていないので該当ライブラリを置き換えたあとでの移行を考えています。

4. Backend

言語
・Go

主にバッチ処理を記述する言語として利用されています。Go言語自体は以前から利用されていましたが、スキルを持つのは一部メンバーのみでした。今年前半に予約管理システムの大刷新を行い、その際の進化圧（使えるようにならないと完成できない）により、多くのエンジニアがGo言語を習得することができました。新しいことを覚えながら業務を遂行するのは大変ですが大きなレベルアップになったと思います。

検索エンジン
・Elasticsearch

スペースマーケットのバックエンドはMicroServices化されているのですが、その中の"検索サービス"のDBとしてElasticSearchを利用しています。MySQLでは駅に近いスペースをランキング付けして検索する際に性能改題があっため、位置検索（Geolocation）機能を持つElasticsearchを利用するに至りました。

インフラ
・SQS

在庫管理について、予約システム内で管理するマスターではなく検索システムで参照するキャッシュ側の更新依頼をキューイングする仕組みとしてSQSを導入しました。こちらの記事が参考になると思います。

5. その他

BIツール
・Looker

データ分析の基盤としてLookerを導入しました。データ分析者として経験のあるメンバーがバックエンドエンジニアも兼務し、利用者目線でデータ分析基盤を構築しているのでとても使いやすいものに仕上がっています。

DWH
・BigQuery

以前はMySQL+Redashというデータ分析環境でしたが、BIツールをLookerにすると決まった後、Lookerと相性がいい（実は会社も同じGoogle）ということでDWHとしてBigQueryを本格的に利用することにしました。Lookerに分析用のExploreやDashboardを作成しつつ裏側はBigQueryに全移行、というのを2ヶ月半でやりきり、Looker社の人がそのスピードに驚いてました。

6. 最後に

以上、プロダクトを支える大事なエンジンである技術スタックの紹介でした。おまけとして日本人の正月にはこたつ、ということでこたつでゆっくりできるスペースを集めてお気に入りリストを作ってみたのでご興味があれば。それでは、よいお年を。

こたつでのんびりできるスペース | スペースマーケット