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

JSConf 2021登壇資料

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