地方から都内へフロントエンドエンジニアとしての成長と挑戦

トレタのエンジニア、武市和也が飲食店向けデジタルサービスの開発と進化について語ります。
地方からトレタへの転身、店内モバイルオーダーシステム「トレタO/X」の開発、そして顧客ニーズに応える技術的取り組みを紹介。UI/UXの最適化、データ分析ツールの活用、来店前メニュー確認機能の実装など、具体的な事例を交えて解説。
さらに、開発プロセスの改善としてトランクベース開発への移行やフィーチャーフラグの活用にも触れ、現在の課題と今後の展望を示します。
飲食業界のデジタル化における技術的挑戦と、顧客ニーズに迅速に対応するための開発手法の進化を学べる内容です。

Transcript

1. TORETAUPDATE TORETAUPDATE TORETAUPDATE TORETAUPDATE TORETAUPDATE 地方から都内へ フロントエンドエンジニ アとしての成長と挑戦 武市和也
2. 目 次 自己紹介 01 地方での経験 02 トレタでの経験 03 専用版お客様からの要望対応 04 まとめ 06 管理画面での取り組み 05
3. 自 己 紹 介 武市和也 フロントエンドエンジニア 愛媛県出身、沖縄在住の元飲食店経営者。 飲食店経営で培った経験を活かしたいと思 い、TORETAに入社。変化の激しい飲食業 界で、迅速かつ柔軟に対応できるシステム 設計を心がけています。 気軽に質問してください！
4. 地 方 で の 経 験 フィットネス予約アプリ開発 PHPとjQueryが主流。 独学で勉強を進めるうちにVueや Reactに興味が湧き担当する プロジェクトへ導入
5. 地 方 で の 経 験 フィットネスアプリ 全体構成 シンプルな構成。 バックエンドはアプリケーション からのリクエストを受け取り その内容に応じて認証、予約管 理、決済管理や入口の開錠制御と いった外部サービスと連携
6. 心 境 俺いけるやんけ
7. ト レ タ で の 経 験 トレタO/X 「店内モバイルオーダー」 メニューやオーダーお会計をデジタル化 専用版 飲食店の個別ニーズに合わせた フルオーダーメイド パブリック版 「世界一柔軟なモバイルオーダー」 誰でも簡単にメニューを作成 カスタマイズできるモバイルオーダー
8. ト レ タ で の 経 験 O/X 全体構成 マイクロサービスアーキテクチャ を採用。モバイルオーダー、ハン ディ、決済管理、POS、ユーザ登 録、店舗登録などのアプリケーシ ョン、認証基盤、注文管理、決済 管理、プリント管理など、各機能 が独立したサービスとして構築 なんじゃこりゃ
9. 心 境 レベチやん
10. ト レ タ で の 経 験 トレタO/X 専用版 飲食店の個別ニーズに合わせた フルオーダーメイドのモバイルオーダー
11. ア プ リ 紹 介 ブランドが持つ世界観やこだわり
12. ア プ リ 紹 介 注文カスタマイズ性特化 洗練されたUI/UX
13. ア プ リ 紹 介 圧倒的な料理のシズル感
14. ト レ タ で の 経 験 専用版 構成 各社別々のプロジェクトとしてデ ィレクトリごと分かれて開発。 コンテンツはContentfulというヘッ ドレスCMSで管理 各サービス向けにはBFFが用意され ており、ユーザー情報や注文履歴 など、複数のAPIから取得したデー タを統合し、クライアント側で利 用しやすい形式にデータを加工し ます。
15. 商品ごとのクリック率や どの動線からの注文率が最も高いのか知りたい 要 望
16. 要 望 商品ごとのクリック率、どの動線からの注 文率が最も高いのかを把握し、顧客行動を 詳細に分析 データ収集 視覚的にわかりやすい形でレポートとして 提供 データを可視化
17. 来店前にモバイルオーダーを提供したい 要 望
18. 要 望 Vercelのブランチ機能 CircleCI_Workflow リクエストをインターセプト 要件1 UIや商品、価格などのコンテン ツを現行のモバイルオーダーと 同じものにすること 要件2 注文導線を排除し、メニュー閲 覧のみ可能にすること
19. ア プ リ 紹 介 O/X 管理画面 O/X パブリック版の 商品や価格レイアウトなどを管理 働く皆様にとって使いやすいUI/UX よ り 働 く 皆 様 に と っ て 使 い や す く、効果的なツールを提供できる ようになっています。
20. ト レ タ で の 経 験 マイクロサービスの特性上 各サービスとリリースタイミングを合わせる必要がある
21. ト レ タ で の 経 験 GitFlowからtrank baseへ
22. ト ラ ン ク ベ ー ス 開 発 と は 一日に複数回、小さな変更をトラ ンクにコミット 開発作業を一つの 中央ブランチで行う 新しい機能や変更を導入するとき には、フィーチャーフラグを活用 常にデプロイ可能な状 態を保つようにする トランクが常にデプロイ可能な状 態に保たれているので、必要に応 じていつでも最新の変更を本番環 境にリリースすることができる 頻繁なリリースが奨励
23. フ ィ ー チ ャ ー フ ラ グ の 例 想定するシナリオ 「新しいダッシュボード」を段 階的に導入したいというもので す。 フィーチャーフラグを利用し て、この機能を特定のユーザー に対してのみ有効化します。
24. ト ラ ン ク ベ ー ス 開 発 トランクベース開発：現状の成果 GitFlowで見られた開発ブランチの長期的な管理が不要に。 大きなマージコンフリクトのリスクが減少し、開発プロセスがスムーズに進行。 リリーススピードの向上と、継続的な改善が可能に。 フィーチャーフラグを活用し、機能のON/OFFを簡単に切り替えることで、サー ビス間の連携を維持。 現状の課題 ブランチが長期間トランクから切り離される。
25. 課 題 日々試行錯誤 変 更 容 易 性
26. 社 長 メ ッ セ ー ジ 顧客のニーズに迅速かつ的確 に対応するための取り組み リファクタリングやアーキテクチャについ ては、弊社のブログにも書いていますの で、ぜひご覧ください https://tech.toreta.in/
27. 課 題 リードエンジニアとして働いています
28. トレタの開発は常に飲食店様のニーズに寄り添い どのように技術で実現するかを追求しています。
29. 課 題 ご清聴いただき、ありがとうございました。