アソビューを支える技術 2020

disc99🐼
Dec 1, 2020 · 10 min read
Photo by 蔡 世宏 on Unsplash

アソビュー Advent Calendar 2020の2日目です。

アソビューでエンジニアをしている disc99🐼です!

今から1年半前に「アソビューを支える技術」という記事を書いたのですが、そこから時間も立ち、支える技術も変わってきているので、今回改めてお話できればと思います。

特にこの記事の中では、以前から新規に追加されたものは「🆕」、アップデートがあったものには「 🆙」をつけています。

アソビューの事業

支える技術を伝える上で説明しておきたいのは、アソビューが提供しているサービスです。

また、コンシューマー向けサービス以外にもマーケティング・プロモーション支援事業、ERP事業なども展開しています。

  • アソビュー!電子チケット: レジャー・観光・文化施設様向けDXソリューション
  • 🆕 アソビュー!レジャークラウド: 購買データ分析BIツール
  • 予約管理システム satsuki: アクティビティ・体験教室様向けDXソリューション
  • AREA GATE: 自治体・観光協会・DMO向け観光商品販売管理システム
  • 🆕 asoview!Agent: 旅行観光業B2B販売プラットフォーム

ベンチャーではあるものの、アソビューではこのように1社で多数のサービスを提供しています。

また、この1年半の間だけでも複数のサービスが立ち上がっています。

今回は、これらのサービスを支えている技術を紹介します。

フロントエンドを支える技術

アソビューには様々なアプリケーションがあり、フロントのツールの変遷の中で使ってる構成が微妙に違っていたりしますが基本的には下記の基盤やツールを活用しています。

  • Figma
    去年の記事及びWEB DB PRESS様でも紹介しましたが、デザインツールとしてこちら活用しており、marginなどの細かいデザイン確認をしたり、画像をexportしたりなどを直接行っています。
  • 🆕 TypeScript
    主要アプリケーションはTypeScriptの環境を整えて移行しています。
  • eslint, prettier
    コミット時にlintおよび整形をかけておりコードの構文品質をキープ出来るようにしています。
  • React, redux
    フロントのUIフレームワークとしてはReactを全体的に活用しています。バージョンもなるべく最新に追随するようにしておりhooks APIなども積極的に取り込んでいます。
    reduxもhooks API活用していますが、割とredux使わずにhooksだけで済ますケースが増えてきました。
  • React Native, expo
    先日の記事でも書かせてもらいましたがFast-InというQR着券アプリでこちらを利用しています
  • 🆕 styled-components
    色々な変遷を得てしばらくcss-modulesでやっていたのですが、最近こちらへの移行を始めました。そちらに関しては後日記事を書かれる予定です。
  • storybook
    atomic designをベースにしたコンポーネント構成にしており、主にatomに関してはstoryfileを作っています。
    ゆくゆくはFigmaと連動した形でデザインシステム化したいと思っています。
  • Jest, testing-library
    一部のアプリケーションでUTに使っています。
    なかなか手が回っていませんが他アプリケーションにもどんどん展開して品質担保していきたいです。
  • 🆕 apollo-client
    アソビュー!ストアにてshopifyのGraphQL APIを活用しており、そちらのエンドポイントを叩く際に使っています。

バックエンドを支える技術

バックエンドといっても幅広いですが、ここでは主にサーバーサイド技術や、アーキテクチャーなどを中心に記載します。

  • Java / Spring Boot
    ベンチャーとしては珍しいですが、アソビューのバックエンドはそのほとんどがJavaで開発されています。
    なぜJavaなのかや、どのように利用しているかという話は別の記事にてまとめていますので、よければご覧ください。
  • 🆕 Protocol Buffers / gRPC
    以前の記事の時点では、RESTfulなAPIを利用するケースが多かったですが、最近では、同期、非同期連携が増えており、サービス間の型定義を行い、安定して連携できるプロトコルとして、Protocol BuffersやgRPCを利用した開発が増えています。
  • DDD / 🆕 CQRS
    DDDに関しては、以前から広く利用していましたが最近では、よりCQRSを意識した設計が増えてきています。
    背景として、年々成長し続けるサービス、トラフィックに対し、よりパフォーマンスやコストの重要性が増してきており、その中で読み込み処理を効果的に活用するため、書き込みと分離するアプローチがマッチするケースが増えてきたためです。
    また、サービスも増え、1つの書き込み処理に対し、行いたい連携が増えたため、Pub/Subを利用したスケーラビリティのある設計が必要になったという理由もあります。
  • マイクロサービス
    「アソビューの事業」でも紹介した通り、アソビューでは様々なサービスを提供しており、サービスのUI部分を担うアプリケーションが多数存在します。
    一方で、サービスのコアとなる、データや機能は共通的なものも多く、コア機能をAPIとして提供し、サービス側で必要に応じ組み合わせて使いたいというケース多くなってきています。
    また、一部のサービスの負荷により、全サービスダウンなどを避けるため、アプリケーション間の依存関係を疎結合に保つ重要度も増してきています。
    それらを、効率的に扱うため、マイクロサービス化が進んでいます。

インフラを支える技術

アソビューのサービスはほぼAWSを利用して構築しており、ベンチャーの中でも比較的活用範囲が広いほうだと思います。
ここではそのいくつかと、AWS以外のサービスも含めて紹介します。

  • 🆙 Kubernetes
    前回記事を書いた頃のメインのインフラはAmazon ECS中心でしたが、Amazon EKSが発表されたこともあり、多くのアプリケーションがEKSを利用した環境に移行しています。
    特に、マイクロサービス化したアプリケーション郡を管理するには非常に優れた仕組みとなっています。
  • 🆙 データストア
    多くのアプリケーションではメインのデータストアとしてRDBを利用しており、その中でもパフォーマンス、可用性、コストに優れたAmazon Auroraを活用しています。
    また、検索エンジンにはAmazon Elasticsearch Service、キャッシュにはAmazon ElastiCacheなど、目的に合わせ最適なサービスを利用しています。
    最近では、パフォーマンス、可用性に優れたフルマネージドサービスであるAmazon DynamoDBをデータストアとして利用することも増えてきています。
  • 🆕 サーバーレス
    現在では大半のアプリケーションがKubernetes上で起動していますが、その特性上、常時起動させるより必要に応じより、よりスケーラブルで、効率的に利用したいケースにはAWS Lambdaを利用しています。
    現在では、運用ツールはもとより、顧客向けのサービスにもLambdaを活用しています。
  • 🆕 Datadog
    前回の記事から大きく変わってる部分の1つがこの部分です。
    以前は、GrafanaやPrometheus、Zipkin、Elasticsearch、Spring Boot AdminなどOSSを中心とした監視を行っていました。
    しかし、それぞれには運用コストが伴うため、それらを一元かつマネージドで実現できるDatadogへ移行しています。
  • Authlete
    アソビューでは様々なサービスと連携するため、OAuth2/OIDCを利用しており、その仕組みを支える上で認可をSaaS提供してくれているAuthleteを利用しています。
  • Terraform
    現状、IaCを利用せずに少数で正確にインフラを管理するのは困難な場合が多いと思います。アソビューでもインフラの管理するためTerraformを利用しています。
  • Github / CircleCI
    ソースコードは全てGithubで管理しており、基本的にGitOpsを中心としており、その実行環境として、CircleCIを活用しています。
    これらにより、テストやデプロイなど多くの作業が自動化されています。

開発を支える技術

ここからは、大きなアップデートはないものの、その他開発を進めていく中で、支えられてる技術を紹介します。

  • ユーザーストーリーマッピング
    特に新規のサービスや、大きな機能追加の場合には、そのストーリーを分析し、開発を行うために行ってます。
  • スクラム開発
    アソビューでは顧客の声を聞き、世の中の状況変化に合わせ、素早く、柔軟に価値を提供していくことを重要視しています。
    例えば、今年のコロナで大きな影響を受けた業界でありながら、会社の方針を素早く切り替え、事業に活かし成果につなげてきました。
    この様な、状況変化に対応し、素早く変更を繰り返すため、スクラムを取り入れた開発を行っています。
  • コラボレーション / コミュニケーション
    アジャイルな開発を実現していく上で、相性の良いツールとしてJIRAやConfluenceを利用し、チャットにはSlackを利用しています。
    また、メール、スケジュール管理、オンラインMTGなどはGoogle Workspaceを利用し、リモートが中心になった現在でもスムーズにコミュニケーションを図れる環境を作っています。
  • MacBook Pro
    普段利用するPCには、Mac、Windows両方から選ぶことができますが、エンジニアはほぼMacを利用しています。

最後に

この1年半のうちにも大きく変わったこと、変わらないことがありましたが、これからも多くの方々に価値を提供するため、より良い技術を取り入れ、サービスを成長させていきます!

asoview-engineering

asoview! tech blog

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store