地方から都内へフロントエンドエンジニアとしての成長と挑戦
by
Takechi
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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
課 題 ご清聴いただき、ありがとうございました。