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. #heytalk    自己紹介 岩本 卓朗 Iwamoto Takuro @tak_rockbook(Twitter) 2020/9 Coubic(現・STORES

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

    フロントエンド技術スタックの変遷 • 踏み抜いたアンチパターンと現在のアーキテクチャ
  3. #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
  4. #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
  5. #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: オーナー様のサービス紹介 画面など
  6. #heytalk    宣伝 #6 #heytalk イベントのハッシュタグはこちら / 12 1(水) 19:30〜

    / 2021 「質・スピード」への挑戦 STORES 決済 / STORES 予約