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

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

Takuro
November 29, 2021

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

JSConf 2021登壇資料

Takuro

November 29, 2021
Tweet

More Decks by Takuro

Other Decks in Programming

Transcript

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

    View Slide

  2. #heytalk   
    自己紹介
    岩本 卓朗 Iwamoto Takuro
    @tak_rockbook(Twitter)
    2020/9 Coubic(現・STORES 予約)入社
    STORES 予約のフロントエンド、バックエンド
    開発を行っています。
    最近の興味はDenoとRust

    View Slide

  3. #heytalk   
    お話しすること
    ● STORES 予約のご紹介
    ● STORES 予約の歴史
    ● フロントエンド技術スタックの変遷
    ● 踏み抜いたアンチパターンと現在のアーキテクチャ

    View Slide

  4. #heytalk   
    STORES 予約について
    予約の「めんどう」を
    解決する
    ガイドに沿って設定するだけで、
    あっという間に専用の予約サイトを作成。

    View Slide

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

    View Slide

  6. #heytalk   
    STORES 予約フロントエンドの歴史
    2013 〜 2018
    2018 〜 2021
    2021 〜

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  13. #heytalk   
    アンチパターン: コンポーネントのpropsにclassNameを持たせている
    コンポーネント外部からスタイルを当てることができ、関心が分離できていない

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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: オーナー様のサービス紹介
    画面など

    View Slide

  20. 各種ライブラリについてご紹介

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. #heytalk   
    宣伝
    #6
    #heytalk
    イベントのハッシュタグはこちら
    /
    12 1(水) 19:30〜
    /
    2021
    「質・スピード」への挑戦
    STORES 決済 / STORES 予約

    View Slide

  29. 募集中の職種
    hey採用
    https://hello.hey.jp/
    詳細はこちらで検索

    View Slide