XStateでReactに秩序を与えたい

by gizm000

Slide 1

Slide 1 text

Reactに秩序が欲しい – XState – 営業製作所白石卓馬

Slide 2

Slide 2 text

会社紹介：営業製作所・設立 2020年4月・本社大阪 (肥後橋駅徒歩3分) ・従業員数約150名 (2024年4月時点) ・目的日本の製造業を支える・特徴泥臭い中にこそ本質がある

Slide 3

Slide 3 text

自己紹介・なまえ白石卓馬 (gizm000) ・出身地大阪・職種ソフトウェアエンジニア・経歴 SIer → 受託 → SaaS

Slide 4

Slide 4 text

営業製作所のざっくり技術スタック・フロントエンド：Next.js ・サーバーサイド：NestJS ・IaC：Terraform (CDKじゃないヨ) 業務で使う 80 98%以上がTypeScript

Slide 5

Slide 5 text

Reactが好き / 嫌い

Slide 6

Slide 6 text

Reactが好き / 嫌い

Slide 7

Slide 7 text

なぜReactは嫌われるのか？ ※ 私は嫌いじゃないです

Slide 8

Slide 8 text

自由度が高すぎるのが一因か？

Slide 9

Slide 9 text

従来のMVCはルールがある

Slide 10

Slide 10 text

Model, View, Controller 最低限のレイヤーが決まっている

Slide 11

Slide 11 text

Reactにももっとルール=秩序が欲しい

Slide 12

Slide 12 text

フロントエンド開発を分解していくと秩序を見出せる？

Slide 13

Slide 13 text

フロントエンド開発でやること

Slide 14

Slide 14 text

フロントエンド開発でやること・サーバーからデータを取得

Slide 15

Slide 15 text

フロントエンド開発でやること・サーバーからデータを取得 fetchするだけ！ codegenもあるし、秩序は守れる

Slide 16

Slide 16 text

フロントエンド開発でやること・サーバーからデータを取得・データを表示

Slide 17

Slide 17 text

フロントエンド開発でやること・サーバーからデータを取得・データを表示デザインぐらい。 Storybookとか使えばよい。

Slide 18

Slide 18 text

フロントエンド開発でやること・サーバーからデータを取得・データを表示・インタラクティブな操作

Slide 19

Slide 19 text

フロントエンド開発でやること・サーバーからデータを取得・データを表示・インタラクティブな操作・・・

Slide 20

Slide 20 text

フロントエンド開発でやること・サーバーからデータを取得・データを表示・インタラクティブな操作ケースバイケースでイイカンジに...

Slide 21

Slide 21 text

フロントエンド開発でやること・サーバーからデータを取得・データを表示・インタラクティブな操作ケースバイケースでイイカンジに...

Slide 22

Slide 22 text

インタラクティブな操作に秩序を与える

Slide 23

Slide 23 text

XState by Stately.ai https://stately.ai/docs/quick-start

Slide 24

Slide 24 text

XState is なに？・ステートマシン(ステートチャート)を使って、ロジックを管理・ステートマシンはイベントを通じて状態遷移・アクター同士でメッセージを送信・いろいろなことができるようです

Slide 25

Slide 25 text

Stately Studio 試してみる

Slide 26

Slide 26 text

どういう使い方をするのか？・状態を管理するところではどこでも使える・フロントエンドに限った技術でもない・非同期処理でも対応している・アクター同士は相互にメッセージを送信しあうこともできる・ステートマシンがクラスでアクターがインスタンスのようなイメージ

Slide 27

Slide 27 text

Examples こちらにたくさんあります

Slide 28

Slide 28 text

そもそもViewに秩序のある時代はあったのだろうか？

Slide 29

Slide 29 text

私のチームにはまだ秩序がありません...

Slide 30

Slide 30 text

他所のチームでどのように秩序を保っているのか？

Slide 31

Slide 31 text

精進あるのみ🔥

Slide 32

Slide 32 text

ご清聴ありがとうございました

Slide 33

Slide 33 text

さいごに・絶賛採用活動中です❗ → X, LinkedIn, Green, LAPRAS, … 　情報交換程度でも良いので、　よかったらご連絡を😆