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

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

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

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

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

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

#heytalk 　　 STORES 予約アクセスの流れ APIリクエスト （管理画面） （サービス画面）

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

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

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

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

#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

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

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

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

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

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

#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

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

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

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

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

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

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

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

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

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

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

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