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

by Takechi

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

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