XStateでReactに秩序を与えたい

Transcript

1. Reactに秩序が欲しい – XState – 営業製作所 白石 卓馬
2. 会社紹介：営業製作所 ・設立 2020年4月 ・本社 大阪 (肥後橋駅 徒歩3分) ・従業員数 約150名 (2024年4月時点) ・目的 日本の製造業を支える ・特徴 泥臭い中にこそ本質がある
3. 自己紹介 ・なまえ 白石 卓馬 (gizm000) ・出身地 大阪 ・職種 ソフトウェアエンジニア ・経歴 SIer → 受託 → SaaS
4. 営業製作所のざっくり技術スタック ・フロントエンド：Next.js ・サーバーサイド：NestJS ・IaC：Terraform (CDKじゃないヨ) 業務で使う 80 98%以上がTypeScript
5. Reactが 好き / 嫌い
6. Reactが 好き / 嫌い
7. なぜReactは 嫌われるのか？ ※ 私は嫌いじゃないです
8. 自由度が高すぎる のが一因か？
9. 従来のMVCは ルールがある
10. Model, View, Controller 最低限のレイヤーが 決まっている
11. Reactにももっと ルール=秩序が欲しい
12. フロントエンド開発を 分解していくと 秩序を見出せる？
13. フロントエンド開発でやること
14. フロントエンド開発でやること ・サーバーからデータを取得
15. フロントエンド開発でやること ・サーバーからデータを取得 fetchするだけ！ codegenもあるし、 秩序は守れる
16. フロントエンド開発でやること ・サーバーからデータを取得 ・データを表示
17. フロントエンド開発でやること ・サーバーからデータを取得 ・データを表示 デザインぐらい。 Storybookとか 使えばよい。
18. フロントエンド開発でやること ・サーバーからデータを取得 ・データを表示 ・インタラクティブな操作
19. フロントエンド開発でやること ・サーバーからデータを取得 ・データを表示 ・インタラクティブな操作 ・・・
20. フロントエンド開発でやること ・サーバーからデータを取得 ・データを表示 ・インタラクティブな操作 ケースバイケースでイ イカンジに...
21. フロントエンド開発でやること ・サーバーからデータを取得 ・データを表示 ・インタラクティブな操作 ケースバイケースでイ イカンジに...
22. インタラクティブな 操作に秩序を与える
23. XState by Stately.ai https://stately.ai/docs/quick-start
24. XState is なに？ ・ステートマシン(ステートチャート)を使って、ロジックを管理 ・ステートマシンはイベントを通じて状態遷移 ・アクター同士でメッセージを送信 ・いろいろなことができるようです
25. Stately Studio 試してみる
26. どういう使い方をするのか？ ・状態を管理するところではどこでも使える ・フロントエンドに限った技術でもない ・非同期処理でも対応している ・アクター同士は相互にメッセージを送信しあうこともできる ・ステートマシンがクラスでアクターがインスタンスのようなイメージ
27. Examples こちらにたくさんあります
28. そもそもViewに 秩序のある時代は あったのだろうか？
29. 私のチームにはまだ 秩序がありません...
30. 他所のチームで どのように秩序を 保っているのか？
31. 精進あるのみ🔥
32. ご清聴ありがとうご ざいました
33. さいごに ・絶賛採用活動中です❗ → X, LinkedIn, Green, LAPRAS, … 　情報交換程度でも良いので、 　よかったらご連絡を😆