Upgrade to Pro — share decks privately, control downloads, hide ads and more …

STORES予約を支えるフロントエンド技術

C832fe4470555df3cf7ac6fa2f389261?s=47 Takuro
November 29, 2021

 STORES予約を支えるフロントエンド技術

JSConf 2021登壇資料

C832fe4470555df3cf7ac6fa2f389261?s=128

Takuro

November 29, 2021
Tweet

More Decks by Takuro

Other Decks in Programming

Transcript

  1.    ©hey, Inc STORES 予約を支えるフロントエンドの技術 予約本部 プロダクトグループ エンジニア 岩本 卓朗(@tak_rockbook)

  2. #heytalk    自己紹介 岩本 卓朗 Iwamoto Takuro @tak_rockbook(Twitter) 2020/9 Coubic(現・STORES

    予約)入社 STORES 予約のフロントエンド、バックエンド 開発を行っています。 最近の興味はDenoとRust
  3. #heytalk    お話しすること • STORES 予約のご紹介 • STORES 予約の歴史 •

    フロントエンド技術スタックの変遷 • 踏み抜いたアンチパターンと現在のアーキテクチャ
  4. #heytalk    STORES 予約について 予約の「めんどう」を 解決する ガイドに沿って設定するだけで、 あっという間に専用の予約サイトを作成。

  5. #heytalk    STORES 予約について オーナーさん向け 予約者さん向け フリーミアム SaaS としての月額利用料 予約決済手数料

    (オンライン決済導入時)
  6. #heytalk    STORES 予約フロントエンドの歴史 2013 〜 2018 2018 〜 2021

    2021 〜
  7. #heytalk    STORES 予約アクセスの流れ APIリクエスト (管理画面) (サービス画面)

  8. #heytalk    フロントエンドの技術スタック 管理画面(2021 ~ ) サービス画面(2018 ~ )

  9. 踏み抜いてきたアンチパターンと 現在のアーキテクチャ

  10. #heytalk    挿絵の説明 よくなかった実装 改善した内容 ※ サンプルコードは疑似コードで、そのまま動作するものではないです

  11. #heytalk    アンチパターン: presenterとcontainerを分けていない スタイルと副作用が同じ コンポーネントに含まれている 全てが/components/配下にある...

  12. #heytalk    現在のディレクトリ構成 • atoms: HTML標準のタグに固有のスタイルを持つ • molecules: アプリケーション固有の型、複数atomsを持つ •

    organisms: atoms, moleculesに副作用が入ったモノ(context, 状態管理ライブラリのstate, APIリクエストなど) • templates: Next.jsの/pagesに配置するコンポーネント • hooks: APIリクエストやロジックなどのcustom hooks • contexts: ReactのContext APIを使用したグローバルな値 • interfaces: 共通で使用する型 ├── atoms ├── molecules ├── organisms ├── templates ├── hooks ├── contexts ├── interfaces
  13. #heytalk    アンチパターン: コンポーネントのpropsにclassNameを持たせている コンポーネント外部からスタイルを当てることができ、関心が分離できていない

  14. #heytalk    現在のスタイルの当て方 外部のスタイルはタグでラップする スタイルをvariantなどのpropsで受け取る

  15. #heytalk    アンチパターン: 不必要なreduxの多用

  16. #heytalk    アンチパターン: APIの戻り値の型をPropsで使用する

  17. #heytalk    アンチパターン:クライアントのタイムゾーンで時刻を算出している 予約サービスのオーナー様のtimezoneで 予約時刻を計算する。 クライアントのtimezoneが予約サービス と異なる場合に不整合が発生する。

  18. #heytalk    アンチパターン: 認証情報が必要なページでSSRする リクエスト時に明示的に認証情報を付与 する必要がある。 If your page contains

    frequently updating data, and you don’t need to pre-render the data, you can fetch the data on the client side. An example of this is user-specific data. https://nextjs.org/docs/basic-features/data-fetching
  19. #heytalk    現在のデータ取得のポリシー (管理画面) (サービス画面) CSR CSR + SSR This

    approach works well for user dashboard pages, for example. Because a dashboard is a private, user-specific page, SEO is not relevant and the page doesn’t need to be pre-rendered. The data is frequently updated, which requires request-time data fetching. https://nextjs.org/docs/basic-features/data-fetching • CSR: 予約時の入力画面など • SSR: オーナー様のサービス紹介 画面など
  20. 各種ライブラリについてご紹介

  21. #heytalk    ユースケースごとにSWRをラップした custom hookを作る SWR

  22. #heytalk    更新処理もラップする。 画面への反映はSWRのキャッシュを 更新することで行う。 SWR

  23. #heytalk    Tailwind CSS + clsx 全社的なデザインシステムのcssフレームワーク 共通化できるクラスの変数化 (やりすぎは注意)

  24. #heytalk    React Hook Form validationライブラリのyupと使用

  25. #heytalk    OpenAPI APIのスキーマ定義に使用 クライアント生成ライブラリのデファクトがない? • ⭐ ferdikoomen/openapi-typescript-codegen • OpenAPITools/openapi-generator-cli(公式)

  26. #heytalk    現状の課題 • パフォーマンス改善(CDNなどのキャッシュ戦略) • クライアントサイドが増えてきたが、一つのRailsサーバーでAPIを 補っていること (BFF, GraphQLなど)

  27. #heytalk    まとめ • STORES 予約フロントエンドのこれまでをお話ししました。 • これからも適切な技術選定とアーキテクチャを取り入れながら、 開発していきます!

  28. #heytalk    宣伝 #6 #heytalk イベントのハッシュタグはこちら / 12 1(水) 19:30〜

    / 2021 「質・スピード」への挑戦 STORES 決済 / STORES 予約
  29. 募集中の職種 hey採用 https://hello.hey.jp/ 詳細はこちらで検索