こんにちは、LINEヤフー株式会社の児玉です。現在は出前館に出向し、主にコンシューマ向けアプリケーションのフロントエンド開発を担当しています。現在、出前館フロントエンドはWebの画面単位でのリプレイスを進めており、あと少しで完了予定となっています。もともとリプレイスした経緯としては、レガシーな技術で保守が難しいコードベースが、だんだんと負債になっているのを感じていたことからです。たとえば、新しく加わったエンジニアにとって理解しにくいコードベースや開発スピードの低下といった問題があったため、モダンな技術を使ってリプレイスすることにしました。しかし、モダンな技術にリプレイスしたからといって負債がゼロになるわけではなく、新たな課題などが見つかります。出前館Webでもリプレイスを進める中で技術的な課題に何度か直面し、アーキテクチャなどの大きな変更も行いました。本記事では出前館Webでのリプレイスとリアーキテクトの取り組みについてご紹介したいと思います。<h2 id="had005982f7">PHP + jQueryで作られていたWebをリプレイス</h2>出前館はPHPのCodeIgniterというフレームワークで開発されていましたが、以前はQAや開発体制が整っていなかったため、以下の問題がありました。<ul><li>巨大な1ファイルにロジックが集約されていたため、コードベースの可読性が低く、メンテナンスが難しい状態になっていた。</li><li>本来サーバーサイドにあるべきロジックがフロントエンドに寄せられていたため、WebとAppで同じようなロジックが多数存在していた。そのため修正や改善を行う際にWebとAppの両方を直す必要が多々あり、開発スピードも落ちていた。</li><li>フロントエンドチームにPHPが得意なエンジニアがいない。</li></ul>これらの理由から、既存のシステムを引き継ぐのではなく、全面的にリプレイスすることにしたのです。新しい技術スタックは、開発コミュニティが大きくエコシステムも充実しているReactを採用しました。また出前館アプリがReact Nativeで開発されているなど、出前館全社としても採用が進んでいる技術です。WebのフレームワークはCSR（Client Side Rendering）やSSR（Server Side Rendering）、SSG（Static Site Generation）などのさまざまなレンダリング手法をページ単位で適用できるNext.jsを採用し、Next.jsのAPI Routesを使いBFF（Backend for Frontend）の層を設けることにしました。BFFのモデルとして、クライアントごとにBFFを持つこともありますが、出前館ではWebとAppで別々のサーバーを立てて運用するとコストが高くなると考え、WebとAppで1つのBFFを使うことにしました。またWeb/AppとBFF間のプロトコルにGraphQLを採用し、クライアントから柔軟な形でクエリできる構成としました。さらにサーバー側はマイクロサービス化を進めていることもあり、BFFは複数のマイクロサービスからデータ取得しそれらを集約してクライアントに返すAggregation Gatewayの役割も担っています。ざっくりとした構成は下記の通りです。<figure><img src="https://images.microcms-assets.io/assets/a305d34415d64c7cb069450481b6130c/825a0c92763145a0bb850cdf5d0d38f0/image2.png" alt="" width="977" height="518"></figure><h2 id="h2ce2a72a8c">WebとBFFの分離</h2>上記で述べたリプレイスでは全画面を一気にリプレイスするのではなく、画面単位でのリプレイスをする戦略をとりました。 しかし、何画面かのリプレイス後に気付いたのですが、Next.jsのAPI RoutesをBFFとして使っているとWebとBFFは同じサーバーかつ同じコードベースになることから、以下の問題が出てきました。<ul><li>コードベースのメンテナンス性の低下：WebとBFFのコードが混在してわかりにくくなっていた。Webはさらにクライアントとサーバー側に分かれており、実際は3つの異なる役割のコードが存在していた。そのせいもあって、新しくエンジニアが参画するたびにコードベースについて質問され、説明していた。</li><li>サーバーの柔軟性：Webの負荷は主にSSRで、BFFはWebとAppの両方からのリクエストをさばいているため、Webよりも高負荷になる。1つのサーバーで管理していると柔軟性がなく最適化などが難しい状態だった。</li><li>デプロイの分離：デプロイやロールバックでWebとBFFの切り離しができなかった。たとえば、デプロイ後にWebで不具合があってロールバックをする際にBFFも一緒にロールバックする必要があった。さらに、場合によってはBFFを呼んでいるAppも戻す必要があった。</li></ul>こうした問題を解決するために、Next.jsのAPI RoutesをBFFとして使うのをやめ、WebとBFFのサーバーとコードベースを分けることにしました。BFF用のサーバーを別で立てることにより、サーバーの台数調整、デプロイとロールバックの切り離しも柔軟に行えるようなりました。また、コードベースもMonorepo化し、パッケージ単位でWebとBFFを切り分けることができたのでわかりやすくなりました。ざっくりとした構成は下記の通りです。<figure><img src="https://images.microcms-assets.io/assets/a305d34415d64c7cb069450481b6130c/b63ec121302d40009d141458a554845e/image3.png" alt="" width="977" height="522"></figure><h2 id="h0313e6d6f3">リプレイス・リアーキテクトの改善点</h2>Next.jsのAPI RoutesをBFFとして使うのを途中でやめたように、技術を新しくしたからといって、課題や負債がなくなるわけではありません。実際に、出前館でもリプレイスしていく中で他にも改善したい点はいくつかあります。たとえば次のようなことがあります。<ul><li>Webのコンポーネントのディレクトリ構成：当初はコンポーネントのディレクトリ構成にAtomic Designを採用しており、コンポーネントの責務が明確になるなどのメリットもあったが、そこまで細かくコンポーネントを分けるメリットを感じなかった。</li><li>GraphQL Client選定：Apollo Clientを採用しているが、SSR時の負荷が高いことや、メモリリークの問題などに直面。</li><li>GraphQL  Server選定：コミュニティが大きいなどの理由からApollo Serverを採用しているが、他のGraphQL Serverに比べてパフォーマンスが劣る。</li><li>Monorepoの採用：リリース時のブランチとmainブランチの差分が大きくなりがち。共通パッケージなどはなく、Monorepoを有効活用できていない。</li><li>エラー設計：エラーの表現やハンドリングの仕方に統一性がない。GraphQLスキーマでエラーを表現する方法やエラーをスローする方法など、チーム全体で共通の理解を事前に確立すべき。</li><li>ログ設計：ログのフォーマットやログレベルに統一性がない。</li></ul>このようにリプレイス途中でも多くの課題が見つかり、今も継続的な改善を実施しています。改善を施してもビジネスや技術の変化や考慮不足から負債は生まれるもので、それとどう向き合うかが大事だと思っています。<h2 id="h9be0c3393d">おわりに</h2>この記事では、出前館Webにおけるリプレイス・リアーキテクトによる技術負債の解消への試みについてご紹介しました。技術やアーキテクチャはより良いプロダクトを作るために、状況に応じて常に変化し続けるもので、最初から完璧なアーキテクチャや技術選定をするのは不可能です。重要なのは、問題や負債を蓄積せず、継続的な改善を行うためのチームや仕組みを築くことだと思います。出前館では、リリース前には自動でのリグレッションテストを実施したり、GitHub Discussionsやミーティングで新しい取り組みへ前向きに議論する場を設けたりし、継続的な改善を積極的に行っています。今後も、より良いプロダクトを作るためにこの姿勢で改善を続けていきます。またどこかで別の改善などをご紹介できればと思います。編集：中薗昴提供：<a href="https://haulinc.jp/" target="_blank" rel="noopener noreferrer nofollow">株式会社Haul</a>

出前館フロントエンドはWebの画面単位でのリプレイスを進めています。その事例について、LINEヤフー株式会社の児玉さんが解説しました。


PHP+jQueryをReact+Next.jsに移行。出前館Webが選択したリプレイス戦略

Sansan株式会社で執行役員VPoE／VPoPを務める西場正浩さんに、Sansanで実践するマネジメントの事例とノウハウについて聞きました。


500名規模の開発組織をマネジメントする知見。世界展開を目指すSansan VPoE／VPoPの思考の裏側

株式会社カミナシは「ノンデスクワーカーの才能を解き放つ」をミッションに、パソコンやデスクのない現場で働くノンデスクワーカー3,900万人の働き方をITの力でスマートにすることを目指す企業です。カミナシの開発組織を牽引する取締役CTOのHara Toriさんに、過去に行った技術的意思決定のなかで印象に残るものを聞きました。

技術の導入によって「何の課題を解きたいのか」を常に意識する。カミナシCTOはこれまでどんな決断をしてきたか

株式会社ヤプリの取締役執行役員CTOである佐藤源紀さんとサーバーサイドのエンジニアリングマネージャーである鬼木悠貴さんに、ヤプリの開発チームが取り組んできた技術的な意思決定の事例を伺いました。


PHP→Goの刷新でヤプリが目指した改善。800種類のアプリを支えるシステム基盤

Lupeは企業のリサーチパートナー、リサーチプラットフォームです。オンラインユーザーインタビューを中心に、リサーチの専門性 × オペレーション × エンジニアリングで、サービスの成長をサポートします。

「働くことで健康を害してはならない」 これは普遍的な価値観であるにも関わらず、企業が従業員の健康を守りきれていない現実が今そこにあります。 弊社の主要事業であるCarely（ケアリィ）は、テクノロジーと専門人材によって、企業が担う従業員の健康管理を支援する健康管理システムです。企業に眠る健康データ（健康診断・ストレスチェック・面談記録等）の見える化を第一歩として、メンタルヘルス不調による休職や健康経営による企業価値の向上などの組織課題の解決まで導きます。 「Carely」サービスサイト：https://www.carely.jp/

クラウド物流管理ソリューション「MOVO（ムーボ）」シリーズと、物流DXコンサルティング「Hacobu Strategy（ハコブ・ストラテジー）」を展開。シェアNo.1*のトラック予約受付サービス「MOVO Berth」、動態管理サービス「MOVO Fleet」、配送案件管理サービス「MOVO Vista」などのクラウドサービスの提供を通じて、物流DXパートナーとして企業間物流の最適化を支援しています。 *出典：デロイトトーマツミック経済研究所『スマートロジスティクス・ソリューション市場の実態と展望【2022年度版】』<a href="https://mic-r.co.jp/mr/02560/" rel="noopener noreferrer" target="_blank">https://mic-r.co.jp/mr/02560/</a>「トラック予約受付サービス」におけるシェア。

Haulは2018年に創業したコンパウンドスタートアップ。生成AIを活用したRecruiting Enablement SaaSを開発している。

株式会社ディーメイクは「エンジニアファースト」を掲げて活動している会社です。 ディーメイク（D-Make）は「make a difference」、世の中の当たり前を疑い、新たな価値を生み出す会社です。世の中の進化に伴い、従来の仕組みが通用しなくなっている現在、新たな時代に対応できる仕組みを、システム開発の側面から創り出します。 株式会社ディーメイクが目指している未来は、エンジニアがエンジニアとして働きそれをしっかり評価できる環境を整えることです。旧来型の日本のシステムでは、エンジニアが疲弊してしまい、キャリアプランを描けなくなる場面が多くありました。そのためには、環境の改善と評価システムの構築が不可欠だと考えています。エンジニアがエンジニアとして長く働ける環境を整備し、適切に評価できる新たな仕組みを構築することを目指しています。 私たちはエンジニアファーストで、スペシャリストとして活躍できる人材育成を目指しています。 ■事業内容<ul><li>システムエンジニアリングサービス</li><li>自社製品開発・販売</li><li>IT導入支援事業</li><li>システム受託開発</li><li>Webデザイン制作/グラフィックデザイン制作&nbsp;</li></ul>■ブログ<ul><li><a href="https://www.d-make.co.jp/blog/" rel="noopener noreferrer" target="_blank">https://www.d-make.co.jp/blog/</a></li></ul>■採用サイト<ul><li><a href="https://www.d-make.co.jp/recruit/" rel="noopener noreferrer" target="_blank">https://www.d-make.co.jp/recruit/</a></li></ul>■自社サービス<ul><li><a href="https://www.d-make.co.jp/systemtemplate/?utm_source=qiita.com&amp;utm_medium=referral&amp;utm_campaign=qiita-advent-calendar&amp;utm_content=systemtemplate" rel="noopener noreferrer" target="_blank">システムテンプレート</a></li><li><a href="https://chat.remocla.online/lp/?utm_source=qiita.com&amp;utm_medium=referral&amp;utm_campaign=qiita-advent-calendar&amp;utm_content=mattermost" rel="noopener noreferrer" target="_blank">Mattermost（ビジネスチャット）導入支援</a></li><li><a href="https://company-search.jp/?utm_source=qiita.com&amp;utm_medium=referral&amp;utm_campaign=qiita-advent-calendar&amp;utm_content=company-search" rel="noopener noreferrer" target="_blank">Company Search（法人情報検索）</a></li><li><a href="https://www.skill-sheet.com/?utm_source=qiita.com&amp;utm_medium=referral&amp;utm_campaign=qiita-advent-calendar&amp;utm_content=skillsheet" rel="noopener noreferrer" target="_blank">スキルシート研究所</a></li><li><a href="https://topvoice.biz/?utm_source=qiita.com&amp;utm_medium=referral&amp;utm_campaign=qiita-advent-calendar&amp;utm_content=topvoice" rel="noopener noreferrer" target="_blank">TOPVOICE（社長インタビュー掲載サイト）</a></li></ul>

株式会社Magic Momentは、「強い絆で、社会をつなぐ。」 をミッションとして2017年に設立されました。当社が展開する、営業支援SaaS『Magic Moment Playbook』は、営業プロセスや顧客のアクティビティをリアルタイムで可視化し、営業担当者に最適なアクションを自動提案・実行します。営業の質・量の向上を支援するとともに、「顧客との関係性」を起点にした組織変革をもたらし、企業の収益アップに貢献します。また、Magic Moment Playbookを活用しながら、顧客の営業変革を支援する『CS BPO』サービスも展開し、営業変革をあらゆる手段で後押しします。

コミューン株式会社は、 企業とユーザーが融け合うコミュニティサクセスプラットフォーム「commmune（コミューン）」と、効率的なカスタマーサクセスのためのアクション基盤「SuccessHub（サクセスハブ）」を提供しています。 commmune　https://commmune.jp/ カスタマーサクセスに必要な顧客コミニュティをノーコードで構築しているだけでなく、分析・コミュニケーション・最適なサポートなどの必要な機能をすべて搭載。一つのプラットフォームでオールインワンのカスタマーサクセスを実現できることが強みです。 ITreview Grid Award 2022 Winterにて、「オンラインコミュニティ部門 Leader」を含む、3部門を受賞。シャープ株式会社やカルビー株式会社など大手企業を中心に導入が進んでいます。 SuccessHub　https://www.successhub.jp/ ユーザーの状況を正しくタイムリーに把握し、最適なアクションを最大効率で実施できるカスタマーサクセスの「アクション基盤」です。ユーザー状況を正しくタイムリーに一元把握できることに加え、Slackやメールなどの複数ツールをまたがるアクションが、そして複数顧客をまたがるアクションが、一つのプラットフォームから同時に実施できます。 上記に加え、社内／パートナーコミュニケーションを変革するコミュニティプラットフォーム『commmune for Work（https://commmune-work.com/）』やcommmuneのUS版である『commmune US（https://commune.us/）』も展開しています。

Rebase（リベース）は 当社のビジョンである「一人ひとりの『らしさ』であふれる世界」の実現を目指し 日本最大級のレンタルスペースのマッチングプラットフォームである 「<a href="https://www.instabase.jp/" rel="noopener noreferrer" target="_blank">インスタベース</a>」を運営しています。「<a href="https://www.instabase.jp/" rel="noopener noreferrer" target="_blank">インスタベース</a>」は、 スペースを使いたい人とスペースを貸したい人を マッチングすることによって 様々な想いをもって活動している人々に「場所」を通じて貢献し、 また空いている空間の新たな使い方を可能にしています。 テクノロジーを使って 人々の生活をより豊かにする 社会貢献度の高いサービスです。 ■場所に困ったら「<a href="https://www.instabase.jp/" rel="noopener noreferrer" target="_blank">インスタベース</a>」「<a href="https://www.instabase.jp/" rel="noopener noreferrer" target="_blank">インスタベース</a>」は、 スペースを使いたい人とスペースを貸したい人を マッチングするレンタルスペースの予約・集客プラットフォームです。<ul><li>ビジネスシーンで便利な貸し会議室やセミナー会場</li><li>各種イベントやパーティーで使えるスペース</li><li>フィットネス用途で便利なスタジオ　など</li></ul>多種多様な用途で利用できるレンタルスペースを、使いたいときに使いたい分だけ時間単位で予約して使えるスペースを全国31,000件以上掲載しており、掲載スペース数は日本最大です。 ■人々が夢を叶える "きっかけ" にこれまで、 店舗やスタジオの賃貸物件を借りるには、 多額の費用が必要でした。 独立してヨガレッスンや 料理教室を開講したくても、 開講場所と費用がネックとなり、 その夢を諦める方も多かったと思います。 しかし、 インスタベースは30分単位・低価格で、 簡単にレンタルスペースを借りられます。 インスタベースでレッスン場所を借りれば、 費用やリスクを最小限に抑えて、 開講が可能になります。 他にも、 さまざまな人々の想いの実現を、 空間の側面から支えるサービスです。 インスタベースは、 夢を持つ人々が夢を叶える"きっかけ"を提供しています。

【つくるのは、ヘルステックのプラットフォーム。】 メドピアグループは現役の医師が経営するIT企業です。国内医師の約半数が参加するドクタープラットフォーム『MedPeer』を中心に、予防医療やプライマリケア、介護支援まで、様々な医療・ヘルスケア事業を展開しています。

株式会社出前館は国内最大級のデリバリーサービス「出前館」を運営しています。私たちは「テクノロジーで時間価値を高める」というミッションのもと、流れゆく有限な時間をテクノロジーの力を駆使して、人々の生活や時間をより価値のあるものにしていきたいと考えています。また、それぞれの地域に根付いたサービスを展開し、あらゆる人々を支えるこれからの「ライフインフラ」として地域経済の更なる活性化を目指します。ただ単に"食事"や"モノ"をお届けするだけではなく、地域の人と人を繋ぎ、幸せな時間をお届けしたいと考えています。 【展開中の事業】▶出前館（<a href="https://demae-can.com/" rel="noopener noreferrer" target="_blank">https://demae-can.com/</a>）国内最大級のデリバリーサービス『出前館』は、アプリやサイトから簡単に注文でき、さまざまなシーンで活用可能な全国47都道府県に展開しています。サービス開始以降、ユーザー及び加盟店舗数は拡大し、AU657万人・加盟店100,000店舗以上へと成長しました。フードデリバリーサービスとして始まった『出前館』は、昨今では日用品、飲料などの生活するうえで欠かせない商品を取り扱うノンフードの領域に加えて、クイックコマースと呼ばれる商品を即時で配達を開始するなど、"ラストワンマイル"のサービスを展開しています。 ▶Dedirect（<a href="https://service.demae-can.co.jp/restaurant/about/de-direct.html" rel="noopener noreferrer" target="_blank">https://service.demae-can.co.jp/restaurant/about/de-direct.html</a>）お店の専用デリバリーサイトを、簡単に作成できるサービス。『出前館』掲載情報との自動連携をはじめ、売上を拡大させる様々な便利機能を提供しています。 【会社の特徴】<ul><li>直近5年間で、加盟店は約5倍の10万店、アクティブユーザーは約657万人へ急成長。年間の配達件数は1億8600万件に上ります。</li><li>創業は1999年。20年以上の歴史と実績があり、デリバリー業界では珍しい“国産”サービスです。</li><li>2020年に、（現）LINEヤフーと資本業務提携を発表。グループの技術力やビッグデータも活かした新サービスも開発中の、第二創業期の真っただ中です。</li></ul>

what we use - テック企業の技術スタックデータベース

PHP+jQueryをReact+Next.jsに移行。出前館Webが選択したリプレイス戦略

500名規模の開発組織をマネジメントする知見。世界展開を目指すSansan VPoE／VPoPの思考の裏側

技術の導入によって「何の課題を解きたいのか」を常に意識する。カミナシCTOはこれまでどんな決断をしてきたか

Lupe

iCARE

Hacobu

Haul

株式会社ディーメイク

Magic Moment

コミューン株式会社

Rebase

メドピア

出前館

.css-1hyfx7x{display:none;}what we use - テック企業の技術スタック データベース.css-1sj2eu7{width:150px;cursor:pointer;}

PHP+jQueryをReact+Next.jsに移行。出前館Webが選択したリプレイス戦略

500名規模の開発組織をマネジメントする知見。世界展開を目指すSansan VPoE／VPoPの思考の裏側

技術の導入によって「何の課題を解きたいのか」を常に意識する。カミナシCTOはこれまでどんな決断をしてきたか

Lupe

iCARE

Hacobu

Haul

株式会社ディーメイク

Magic Moment

コミューン株式会社

Rebase

メドピア

出前館

what we use - テック企業の技術スタックデータベース