カートのデータレイヤーに秩序をもたらすステートマシン「XState」について/about-xstate-a-state-machine-that-controls-the-carts-data-layer

https://base.connpass.com/event/231346/

こちらのイベントの LT 資料です。

Next.js を使ったカート大規模リプレイスでは、カートの状態管理に XState というライブラリを利用しています。

複雑な状態遷移に対応するためのフロントエンドステートマシン XState について、実際に使ってみてどうだったかなどをご紹介しています。

簡易カートのコード: https://github.com/ryamakuchi/xstate-cart-demo
簡易カートのデモサイト: https://xstate-cart-demo.vercel.app/

Transcript

1. © 2012-2021 BASE, Inc. 1
   カートのデータレイヤーに
   秩序をもたらすステートマシン
   「XState」について
   BASE Tech Talk #1 〜Next.jsを使ったカート大規模リプレイスPJの裏側〜
   @rry
   

   View Slide

2. © 2012-2021 BASE, Inc. 2
   自己紹介
   rry（りりぃ）
   ● 2021年4月に BASE 株式会社へ入社
   ○ 2021年4月〜9月くらいまで今回の PJ を担当
   ● アクセシビリティやっていきをしています
   ○ https://devblog.thebase.in/entry/2021/12/
   06/111517
   ● メンターは先ほど発表してくれた Ayako さん
   ● アイコンはスイカじゃなくてコザクラインコ
   ：@ryamakuchi
   

   View Slide

3. © 2012-2021 BASE, Inc. 3
   XState とは？
   

   View Slide

4. © 2012-2021 BASE, Inc. 4
   https://xstate.js.org/docs/
   https://github.com/statelyai/xstate
   XState とは？
   JS / TS で使えるステートマシン
   （State Machine・State Chart）のライブラリ
   

   View Slide

5. © 2012-2021 BASE, Inc. 5
   XState とは？
   状態遷移図を見ることができる
   

   View Slide

6. © 2012-2021 BASE, Inc. 6
   XState とは？
   React 専用というわけではなく
   Vue や Svelte などからも利用できる
   

   View Slide

7. © 2012-2021 BASE, Inc. 7
   カートの状態遷移
   

   View Slide

8. © 2012-2021 BASE, Inc. 8
   

   View Slide

9. © 2012-2021 BASE, Inc. 9
   ← すごく簡略化したカートの状態遷移図
   ・initializing（初期状態）
   ・empty（カートが空）
   ・checkout（カートの編集・確認・更新）
   　・editing（編集中）
   　・finalizing（注文完了後の後始末中）
   　・completed（注文および後始末完了）
   ・orderCompleted（注文完了を表示）
   簡略化してもこれだけある
   状態の遷移
   

   View Slide

10. © 2012-2021 BASE, Inc. 10
    状態と密接に結びつくデータ
    それぞれの状態に密接に結びついたデータ（Context）を保持している
    https://xstate.js.org/docs/guides/context.html
    Context は状態遷移するときのイベントで変化したりする
    

    View Slide

11. © 2012-2021 BASE, Inc. 11
    状態の遷移に伴う副作用
    状態の遷移に伴う副作用を宣言的に記述することができる
    https://xstate.js.org/docs/guides/effects.html
    同期的な副作用も、非同期的な副作用もどちらも扱える
    

    View Slide

12. © 2012-2021 BASE, Inc. 12
    XState を利用すると
    

    View Slide

13. © 2012-2021 BASE, Inc. 13
    XState を利用した簡易的なカートのデモを用意
    https://github.com/ryamakuchi/xstate-cart-demo/
    https://xstate-cart-demo.vercel.app/
    

    View Slide

14. © 2012-2021 BASE, Inc. 14
    状態の遷移のコード
    const cartMachine = createMachine(
    {
    ...
    states: {
    initializing: {
    on: {
    LOAD_CHECKOUT: {
    target: 'checkout',
    actions: ['loadCheckout'],
    cond: 'checkoutValid',
    },
    },
    },
    checkout: {
    initial: 'editing',
    states: {
    editing: {
    on: {
    MUTATE_CHECKOUT: [
    {
    actions: ['mutateCheckout'],
    },
    ],
    ...
    ・initializing という状態から、LOAD_CHECKOUT という
    　Action が発火して checkout に遷移
    ・checkout の初期状態は checkout.editing なので
    　checkout.editing に遷移
    …
    といったように、宣言的に状態遷移を書くことができる。
    https://xstate.js.org/docs/guides/states.html
    

    View Slide

15. © 2012-2021 BASE, Inc. 15
    状態と密接に結びつくデータのコード
    export const loadCheckout = assign(
    (context, event) => {
    if (event.type !== 'LOAD_CHECKOUT') return context;
    const { customer, cart, checkout } = event;
    return {
    ...context,
    customer,
    cart,
    checkout,
    };
    }
    );
    ・データ（Context）を更新したい場合は、Assign Action 　
    を利用する
    ・例えば loadCheckout 関数では、event の payload で
    　渡ってきたデータを return して Context を更新している
    https://xstate.js.org/docs/guides/context.html#assi
    gn-action
    

    View Slide

16. © 2012-2021 BASE, Inc. 16
    状態の遷移に伴う副作用のコード
    finalizing: {
    invoke: {
    id: 'finalizeCheckout',
    src: 'finalizeCheckout',
    onDone: {
    target: 'xxx',
    },
    onError: 'yyy'
    },
    },
    …
    services: {
    finalizeCheckout: async () => {
    // 後始末的なコード
    },
    },
    ・Action を使うと同期的な副作用を及ぼすことが
    　できるが、非同期的な副作用を及ぼしたいときは
    　Invokeing Services を利用することができる
    ・例えば Invoking Promises を利用すると、services で
    　定義したコードが resolve したら onDone が発火、
    　reject したら onError が発火する
    https://xstate.js.org/docs/guides/communication.html
    

    View Slide

17. © 2012-2021 BASE, Inc. 17
    実際に使ってみて
    

    View Slide

18. © 2012-2021 BASE, Inc. 18
    実際に使ってみて
    思ったよりも多機能だった
    あれもこれもだいたいできる
    いくつか便利と思った機能をご紹介
    

    View Slide

19. © 2012-2021 BASE, Inc. 19
    ・複雑な状態遷移に対応するために、
    　State Nodes を利用して細かく状態遷移を
    　定義することができる
    ・簡易カートの例では checkout State が
    　editing, finalizing, completed という
    　State Nodes を持っている
    https://xstate.js.org/docs/guides/state
    nodes.html
    State Nodes
    状態（State）はさらに下位の状態（State Nodes）を持つことができる
    checkout: {
    initial: 'editing',
    states: {
    editing: {
    on: {
    FINALIZE_CHECKOUT: 'finalizing',
    },
    },
    finalizing: {
    invoke: {
    id: 'finalizeCheckout',
    onDone: 'completed'
    onError: 'completed',
    },
    },
    },
    },
    

    View Slide

20. © 2012-2021 BASE, Inc. 20
    Invoking Services
    ・「状態の遷移に伴う副作用のコード」でも
    　紹介したが、Invoking Services が便利
    ・簡易カートの例では後始末的なコードとして
    　適当なコードを書いているが、実際のカート
    　では主に作成・更新系の API を叩く処理
    　などでたくさん使っている
    https://xstate.js.org/docs/guides/comm
    unication.html
    状態遷移時に非同期処理などを実行できる
    finalizing: {
    invoke: {
    id: 'finalizeCheckout',
    src: 'finalizeCheckout',
    onDone: {
    target: 'completed',
    },
    onError: 'completed'
    },
    },
    …
    services: {
    finalizeCheckout: async () => {
    // 後始末的なコード
    },
    },
    

    View Slide

21. © 2012-2021 BASE, Inc. 21
    ・A の場合は A Action を実行したいが、
    　B の場合は B Action を実行したい、
    　みたいなときに便利
    ・他にも簡易カートの例のように、
    　バリデーションが通ったら次の状態に
    　遷移したい、というような使い方もできる
    https://xstate.js.org/docs/guides/guard
    s.html#guards-condition-functions
    Guards（Condition Functions）
    initializing: {
    meta: {
    label: 'cart に関する処理を開始',
    },
    on: {
    LOAD_CHECKOUT: {
    target: 'checkout',
    actions: ['loadCheckout'],
    cond: 'checkoutValid',
    },
    },
    },
    …
    export const checkoutValid = (_: CartMachineContext, event?: CartMachineEvent) => {
    if (event?.type === 'LOAD_CHECKOUT') {
    return (
    isCheckout(event.checkout) && isCart(event.cart) && isCustomer(event.customer)
    );
    }
    return false;
    };
    cond プロパティを使うことで条件による状態遷移ができる
    

    View Slide

22. © 2012-2021 BASE, Inc. 22
    まとめ
    

    View Slide

23. © 2012-2021 BASE, Inc. 23
    まとめ
    カートの状態とその遷移を柔軟に管理すること
    ができる
    状態に紐付くデータを管理できるため、データ
    レイヤーに秩序が生まれる
    本来やりたい開発（ユーザーへ価値を届ける実
    装）にリソースを集中できる
    １
    ２
    ３
    

    View Slide

24. © 2012-2021 BASE, Inc. 24
    ご静聴
    ありがとうございました！
    

    View Slide