フロントエンド技術選定の裏側

Transcript

1. STORES 株式会社 Findy Job LT wattanx フロントエンド技術選定の裏側 直面する技術的課題
2. Ryota Watanabe（wattanx） ・STORES 株式会社 ソフトウェアエンジニア。 ・猫が好き。大阪在住。 ・Nuxt コミッター、Nuxt Bridge のメンテナ。 自己紹介
3. Agenda STORES について 技術選定の背景 技術的な課題 01 02 03
4. STORES のミッション こだわりや情熱、たのしみに駆動される経済をつくる 熱中しているひとたちから生み出される、 多様な商品やサービスが街に溢れる世界。 その経済を支える、デジタルインフラを提供する。
5. STORES について ネットショップ開設・運営 お店のキャッシュレス オンライン予約システム POSレジ 店舗アプリ作成 顧客・ロイヤリティ管理 モバイルオーダーシステム データ分析 顧客データとソフトウェアの力であらゆるお店の売上成長に
6. STORES について ネットショップ開設・運営 お店のキャッシュレス オンライン予約システム POSレジ 店舗アプリ作成 顧客・ロイヤリティ管理 モバイルオーダーシステム データ分析 顧客データとソフトウェアの力であらゆるお店の売上成長に
7. 今日話す内容について STORES モバイルオーダーの中にいくつかアプリケーションがある • 顧客が利用するアプリケーション • 事業者が利用する管理画面 • キッチンディスプレイ
8. 今日話す内容について STORES モバイルオーダーの中にいくつかアプリケーションがある • 顧客が利用するアプリケーション 👈 今日話す • 事業者が利用する管理画面 • キッチンディスプレイ
9. チームについて 開発初期のチーム体制（エンジニアの人数） • 顧客側のアプリケーション ◦ 3人 • 注文システムおよび管理画面 ◦ 5〜6人 (今はチームとしてはまとまっている)
10. チームについて どんな感じで開発しているか • フロントエンド・バックエンドエンジニアみたいに分かれていない • 2 week のスプリントでスクラム開発
11. 技術選定の背景
12. 技術選定の背景 なぜ技術選定が必要だったのか
13. STORES ネットショップ ノーコードかつ低コストで本格的な EC構築・管理を実現させるEC作成サービス 制作会社なしで構築可能 豊富な決済機能やストアデザインなど、ネットショップ運営に必要な機能がはじめから備 わっているため、制作会社不要ですぐに構築・販売開始が可能です。 店舗の在庫・注文も一元管理 実店舗をお持ちの場合、STORES レジ と連携の上ご利用いただくことで、実店舗とECの商 品・在庫・売上データを一元管理できます。 店舗の顧客情報も一元管理 STORES レジ、STORES ブランドアプリ と連携の上ご利用いただくことで顧客情報をひとつ に集約し、おもてなしを最大化。店舗の売上アップに貢献します。 ※購入者さまにクレジットカード決済をご利用いただくためには審査が必要です。審査には最短4営業日程度お時間をいただきます。 STORES ネットショップ の特徴 料金について フリープラン 月額料金 0円 決済手数料 5.5% ベーシックプラン 月額料金 2,980円/月（税込） 決済手数料 3.6%〜※3 ※1 クレジットカードでお支払いの場合でも、月払いにすると¥3,480/月の請求となります。コンビニ払いの場合、まとめ払いに関わらず一律¥3,480/月の請 求となります。※2 初月無料はクレジットカードでプラン料金をお支払いの場合に適用されます。※3 Amazon Pay は決済手数料3.9%です。 初月0円※2 ※1
14. 技術選定の背景 商品を選んでカートにいれて注文する
15. 技術選定の背景 商品を選んでカートにいれて注文する 注文した場所まで取りに行く
16. 技術選定の背景 商品を選んでカートにいれて注文する 注文した場所まで取りに行く
17. 技術選定の背景 テイクアウトの注文に対応すれば モバイルオーダーができる！
18. 技術選定の背景 STORES ネットショップの技術スタック • AngularJS • Vue (2系) • erb
19. 技術選定の背景 新しく作った方が早く開発できるのでは 新しく作ってそこに STORES ネットショップを移行するのがよいのでは
20. 技術選定の背景 新しくつくろう！
21. 技術選定の背景 技術選定しました
22. 技術選定の背景 STORES モバイルオーダーの技術スタック • Next.js • CSS Modules • Vitest • GraphQL ◦ graphql-request • AWS ECS
23. 技術選定の背景 Next.js にした背景 • Server-side Rendering が必要 • Partial PreRendering にひかれた • motion (framer motion) をつかう予定があったので React にした ◦ vue 版はしばらく出ないと思ってた ◦ 12月くらいに vue 版の motion がリリースされた
24. 技術選定の背景 CSS Modules にした背景 • 事業者側のプロダクトでは tailwindcss を使っている • デザイントークンも決まっておらず、事業者側のトークンをそのまま 使うべきではないと判断した • tailwindcss だけはやめようという決断だけしれっと CSS Modules をつかっていた
25. 技術選定の背景 GraphQL にした背景 • STORES ではシステム間通信に GraphQL を多く採用しているので、 STORES モバイルオーダーでも採用した
26. 技術選定の背景 リリース後技術選定を振り返って • 今回の技術選定でよかったのかどうかはまだわからない
27. 技術的な課題
28. 技術的な課題 Datadog APM の導入 • 課題1: Instrumentation で設定できない • 課題2: docker image のサイズが膨れ上がる
29. 技術的な課題 • 監視ツールやロギングツールをアプリケーションに統合できる • https://nextjs.org/docs/app/building-your-application/op timizing/instrumentation Instrumentation
30. 技術的な課題 Instrumentation を使ってみた結果 • ビルドが失敗するな... • トレースが送れてない...
31. 技術的な課題 課題1の解決策 Instrumentation を使わずにアプリケーションの起動より前に Datadog Tracer を初期化する
32. 技術的な課題 Datadog Tracer の初期化処理をするファイルを作成する
33. 技術的な課題 アプリケーション起動前に初期化処理を実行する ※ dd-trace が standalone に含まれないので node_modules を全部 コピーした
34. 技術的な課題 アプリケーション起動前に初期化処理を実行する ※ dd-trace が standalone に含まれないので node_modules を全部 コピーした 👈 これの影響で docker image が大きくなる
35. 技術的な課題 課題2の解決策 Instrumentation で dd-trace を import する
36. 技術的な課題 課題2の解決策 Instrumentation で dd-trace を import だけする docker image のサイズが 半分になった 🎉
37. 今後やっていきたいこと • 購入体験をよくするためにパフォーマンスやアクセシビリティにこだ わりたい • Partial PreRendering の導入 ◦ 現状ほぼすべてのページを Dynamic Rendering にしている ◦ まだ Partial PreRendering も検証できていない
38. エ ン ジ ニ ア 募 集 中 採 用 サ イ ト 見 て ね