この記事は、スターフェスティバル Advent Calendar 2021の14日目です。 We're hiring!

こんにちは、soriです。

今日はAdvent Calendar14日目ということで、私がエンジニアリングを担当している自社サービス、「ごちクルNow」の概要とアーキテクチャについてかんたんにご紹介したいと思います。

「ごちクルNow」って何？「ごちクル」と違うの？

　「ごちクルNow」は、「オフィスワーカー向けの毎日選べる日替わりメニュー」というキャッチコピーのとおり、毎日オフィスに日替わりで選べるランチをお届けするサービスです。ランチタイムに、混雑や社内事情などでなかなか周辺に出ていくのが難しかったり、時間を有効活用したい、また社員への福利厚生としてオフィスワーカーや企業の皆様にご好評いただいています。

　先行サービスとして自社に「ごちクル」というサービスがありますが、こちらはあらかじめお弁当を予約していただき、不定期なお届けや大量お届けにも対応している形ですが、「ごちクルNow」では、日々たくさんの選択肢の中からランチを選ぶ手間を省き、よりすぐりのランチの中から、お届け当日10時_{(ご契約により異なります)}までご注文いただけるサービスとなっています。両サービスでは名前が似ているので、たまに間違えられます（笑）

　私のおすすめは素材Lab。のお弁当です。ごちクルNowをもし使っていただいたさいは是非食べてみてください！

ごちクルNowのシステム

　ごちクルNowは、上記リンクにあるサービス紹介ページを除き、サービスを提供するシステムは大きく分けて下記のように分かれています。項目ごとにアーキテクチャ等をご紹介します。

• ごちクルNowの基幹システム(API、定時処理を行うバッチなど)
• webフロントエンド（ブラウザによるご注文を受ける箇所、各種管理画面など）
• Slack bot（Slack channelにランチをお知らせし、購入を受け付ける）
• ごちクルNow アプリ

ごちクルNowの基幹システム(API、定時処理を行うバッチなど)

Node.js / Typescript – Express server
　ESLint / prettier
　jest / codecov
　Firebase Admin (主にアプリ向けバックエンド)
OpenAPI Generator
Cybozu Kintone
PHP – Laravel (バッチ処理に一部残存)

　あらためて言うまでもないかも知れませんが、Node.js環境の開発当初からjest、GitHub Actionsによる継続的インテグレーション、またlinterやprerttierなどの導入により一貫したスタイルでの開発を行うことができており、サービスの安定稼働に寄与しています。
　またNode.jsを採用しているので、npmのエコシステムを活用して各外部サービスとの連携なども積極的に行いやすい環境となっています。

　基幹システムからフロントエンドまで、一貫した開発を提供するためにOpenAPI Generatorが導入されています。OpenAPIで記述したAPI定義をもとにwebフロントエンド、ネイティブアプリ等各種サービスに適用することにより、TypeScriptの型も適用され、チームでの開発においても齟齬やミスが少ないコーディングスタイルを維持することができています。

　サービス稼働当初は過去経緯もありレガシースタイルなPHPへの依存度が高く、機能追加や改修の障害となっていましたが、Node.js環境への改修が進み日々システムの洗練が進んでいます。（PHPが良くないというわけではありませんが、当初の基盤設計の負債を解消する必要があったほうか、各システムとNode.jsの親和性がよく、現状の開発しやすいスタイルへの布石となっています）
　また、運用チームや各パートナー様とのやりとりのため、Kintoneのデータベースと連携を行っていますが、こちらについても内製への置き換えを進めています。

webフロントエンド（ブラウザによるご注文を受ける箇所、各種管理画面など）

Node.js / TypeScript – Next.js (React)
　Material UI / styled-components / 独自UI Components
　ESLint / prettier / stylelint
　jest / storybook / snapshot test

　フロントエンド系ではNext.jsを採用しています。ReactのComponentやhooksを使うことにより、デザインとの親和性を保ちながら効率的な開発を行うことができます。Next.jsの開発は日進月歩で、マイグレーションも大変ですがユーザーにより快適な体験を提供するのに役に立つと感じています。
　共通のUIについてはUI Components Repositoryを各小システム内で共有し、統一感がありなおかつ、似たような見た目でありながら微妙に違うコンポーネントの再生産を避けることができています。

　CSS FrameworkについてはMaterial UIも活用しつつ、styled-componentsで各Component内のパーツを構成しています。近頃はtailwindなどclassを活用したものも人気がありますが、styled-componentsは柔軟性の面で有利だと感じています。

Slack bot（Slack channelにランチをお知らせし、購入を受け付ける）

Node.js / TypeScript
bolt.js

　ごちクルNowのサービスにおいて、他であまり見ない特徴的な機能の一つはこのSlack botです。毎営業日、注文受付開始時間と当日朝に、お届けするランチをSlack Apps経由でchannelにお知らせします。

　上記がとある日のランチお知らせです。基本はSlackが公式で提供しているbolt frameworkを使っています。また、jsx-slackを併用して、Block Kitを活用したSlack上で画像やその場での注文を可能にしたインターフェースを提供しています。

ごちクルNowアプリ

React Native / TypeScript
　Firebase
　React navigation
　Fastlane

　ごちクルNowのサービスを便利にフル活用していただくのに、ネイティブアプリは不可欠です。現在、iOS / Androidでアプリを提供しています。
　と、このネイティブアプリについては、チームメンバーのyoshifujiT氏のAdvent Calendarエントリに詳しいのでぜひこちらをご覧になってください。

最後に

ユーザーのみなさまに喜んでいただけるよう日々改善や新機能開発に取り組んでいますが、現状のように開発しやすいスタイルを続けられているのは開発当初から基盤の設計・開発に取り組んでいただけた協力メンバー・チームメンバーのおかげです。そしてもちろんサービスを使っていただいている企業・ワーカーのみなさま。この場を借りてお礼申し上げます。

ごちクルNowもこれからもやることはたくさんあり、そのためにはさらなる仲間が必要です。興味がありましたら是非！ 記事に関しての質問もお待ちしています。