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

JSConf 2021登壇資料

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/ 詳細はこちらで検索