Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

目 次 自己紹介 01 地方での経験 02 トレタでの経験 03 専用版お客様からの要望対応 04 まとめ 06 管理画面での取り組み 05

Slide 3

Slide 3 text

自 己 紹 介 武市和也 フロントエンドエンジニア 愛媛県出身、沖縄在住の元飲食店経営者。 飲食店経営で培った経験を活かしたいと思 い、TORETAに入社。変化の激しい飲食業 界で、迅速かつ柔軟に対応できるシステム 設計を心がけています。 気軽に質問してください!

Slide 4

Slide 4 text

地 方 で の 経 験 フィットネス予約アプリ開発 PHPとjQueryが主流。 独学で勉強を進めるうちにVueや Reactに興味が湧き担当する プロジェクトへ導入

Slide 5

Slide 5 text

地 方 で の 経 験 フィットネスアプリ 全体構成 シンプルな構成。 バックエンドはアプリケーション からのリクエストを受け取り その内容に応じて認証、予約管 理、決済管理や入口の開錠制御と いった外部サービスと連携

Slide 6

Slide 6 text

心 境 俺いけるやんけ

Slide 7

Slide 7 text

ト レ タ で の 経 験 トレタO/X 「店内モバイルオーダー」 メニューやオーダーお会計をデジタル化 専用版 飲食店の個別ニーズに合わせた フルオーダーメイド パブリック版 「世界一柔軟なモバイルオーダー」 誰でも簡単にメニューを作成 カスタマイズできるモバイルオーダー

Slide 8

Slide 8 text

ト レ タ で の 経 験 O/X 全体構成 マイクロサービスアーキテクチャ を採用。モバイルオーダー、ハン ディ、決済管理、POS、ユーザ登 録、店舗登録などのアプリケーシ ョン、認証基盤、注文管理、決済 管理、プリント管理など、各機能 が独立したサービスとして構築 なんじゃこりゃ

Slide 9

Slide 9 text

心 境 レベチやん

Slide 10

Slide 10 text

ト レ タ で の 経 験 トレタO/X 専用版 飲食店の個別ニーズに合わせた フルオーダーメイドのモバイルオーダー

Slide 11

Slide 11 text

ア プ リ 紹 介 ブランドが持つ世界観やこだわり

Slide 12

Slide 12 text

ア プ リ 紹 介 注文カスタマイズ性特化 洗練されたUI/UX

Slide 13

Slide 13 text

ア プ リ 紹 介 圧倒的な料理のシズル感

Slide 14

Slide 14 text

ト レ タ で の 経 験 専用版 構成 各社別々のプロジェクトとしてデ ィレクトリごと分かれて開発。 コンテンツはContentfulというヘッ ドレスCMSで管理 各サービス向けにはBFFが用意され ており、ユーザー情報や注文履歴 など、複数のAPIから取得したデー タを統合し、クライアント側で利 用しやすい形式にデータを加工し ます。

Slide 15

Slide 15 text

商品ごとのクリック率や どの動線からの注文率が最も高いのか知りたい 要 望

Slide 16

Slide 16 text

要 望 商品ごとのクリック率、どの動線からの注 文率が最も高いのかを把握し、顧客行動を 詳細に分析 データ収集 視覚的にわかりやすい形でレポートとして 提供 データを可視化

Slide 17

Slide 17 text

来店前にモバイルオーダーを提供したい 要 望

Slide 18

Slide 18 text

要 望 Vercelのブランチ機能 CircleCI_Workflow リクエストをインターセプト 要件1 UIや商品、価格などのコンテン ツを現行のモバイルオーダーと 同じものにすること 要件2 注文導線を排除し、メニュー閲 覧のみ可能にすること

Slide 19

Slide 19 text

ア プ リ 紹 介 O/X 管理画面 O/X パブリック版の 商品や価格レイアウトなどを管理 働く皆様にとって使いやすいUI/UX よ り 働 く 皆 様 に と っ て 使 い や す く、効果的なツールを提供できる ようになっています。

Slide 20

Slide 20 text

ト レ タ で の 経 験 マイクロサービスの特性上 各サービスとリリースタイミングを合わせる必要がある

Slide 21

Slide 21 text

ト レ タ で の 経 験 GitFlowからtrank baseへ

Slide 22

Slide 22 text

ト ラ ン ク ベ ー ス 開 発 と は 一日に複数回、小さな変更をトラ ンクにコミット 開発作業を一つの 中央ブランチで行う 新しい機能や変更を導入するとき には、フィーチャーフラグを活用 常にデプロイ可能な状 態を保つようにする トランクが常にデプロイ可能な状 態に保たれているので、必要に応 じていつでも最新の変更を本番環 境にリリースすることができる 頻繁なリリースが奨励

Slide 23

Slide 23 text

フ ィ ー チ ャ ー フ ラ グ の 例 想定するシナリオ 「新しいダッシュボード」を段 階的に導入したいというもので す。 フィーチャーフラグを利用し て、この機能を特定のユーザー に対してのみ有効化します。

Slide 24

Slide 24 text

ト ラ ン ク ベ ー ス 開 発 トランクベース開発:現状の成果 GitFlowで見られた開発ブランチの長期的な管理が不要に。 大きなマージコンフリクトのリスクが減少し、開発プロセスがスムーズに進行。 リリーススピードの向上と、継続的な改善が可能に。 フィーチャーフラグを活用し、機能のON/OFFを簡単に切り替えることで、サー ビス間の連携を維持。 現状の課題 ブランチが長期間トランクから切り離される。

Slide 25

Slide 25 text

課 題 日々試行錯誤 変 更 容 易 性

Slide 26

Slide 26 text

社 長 メ ッ セ ー ジ 顧客のニーズに迅速かつ的確 に対応するための取り組み リファクタリングやアーキテクチャについ ては、弊社のブログにも書いていますの で、ぜひご覧ください https://tech.toreta.in/

Slide 27

Slide 27 text

課 題 リードエンジニアとして働いています

Slide 28

Slide 28 text

トレタの開発は常に飲食店様のニーズに寄り添い どのように技術で実現するかを追求しています。

Slide 29

Slide 29 text

課 題 ご清聴いただき、ありがとうございました。