新卒でサービス立ち上げから Hasuraを使って３年経った振り返り

https://hasura-tokyo.connpass.com/event/268144/ で発表したものです。

Transcript

1. 2023/01/19
   Development Division / Lead Engineer
   Seiya Ishikawa (@yutorinD)
   新卒でサービス立ち上げから
   Hasuraを使って３年経った振り返り
   Hasura User Group Tokyo Meetup #2
   

   View Slide

2. 2
   - WASD Inc. Lead Engineer
   - 創業と同時に最初のエンジニアとして新卒でジョインした
   - 趣味: PCゲーム、ピアノ、ウイスキー、甘いもの
   - 中2の頃にPC自作してから洋ゲーばかりやってます
   - 初めての登壇です
   自己紹介
   Seiya Ishikawa
   ( Yutorin : @yutorinD )
   

   View Slide

3. 3
   Hasuraのすごい使い方の話とかは
   話しません
   話さないこと
   

   View Slide

4. 4
   自分語りします
   話すこと
   

   View Slide

5. 5
   もくじ
   ● Hasura is 何
   ● 弊社・サービスの紹介
   ● 運用について
   ● 開発の歴史
   ● Hasuraのよさみ
   ● 苦労していること
   

   View Slide

6. 6
   - Hasura GraphQL Engineのこと
   - DBからGraphQL APIを自動生成してくれるGraphQLサーバー
   - フロントエンドから色々データを扱える
   - DB操作がHasura上で出来る
   Hasura is 何
   

   View Slide

7. 7
   弊社・弊サービスについて
   

   View Slide

8. 8
   弊社について
   Mission
   意思疎通をもっと便利に
   

   View Slide

9. 9
   サービス紹介
   どこからでもかんたん呼び出し　お困りごとがすぐ伝わる
   

   View Slide

10. 10
    使い方
    スマホで二次元コード
    を読込み呼び出し
    かけつけ、遠隔等
    適切な手段で接客
    ブラウザやアプリで
    呼び出しを受信
    接客を評価
    お客様の行動 スタッフの行動 スタッフの行動 お客様の行動
    1 2 3 4
    

    View Slide

11. 全国の様々なゲームセンターや
    小売店などに
    導入されています
    11
    使ってみてね
    

    View Slide

12. 12
    実際の画面
    呼び出し画面
    

    View Slide

13. 13
    実際の画面
    管理画面 端末
    

    View Slide

14. 14
    伸びてます
    

    View Slide

15. 15
    運用
    

    View Slide

16. 16
    運用方法
    TypeScriptを主軸にフロントは Next.js
    サーバーサイドは Node.js でやっています
    組織戦略と GraphQL、Hasura
    https://speakerdeck.com/shinnoki/zu-zhi-zhan-lue-to-graphql-hasura?slide=9
    

    View Slide

17. 17
    main / develop にマージされると
    Allow List が更新されたり
    migration や metadata が反映されます
    CI / CD
    

    View Slide

18. 18
    開発の歴史
    

    View Slide

19. 19
    ● Apexをしていたら現CEOに誘われた
    ● ちょうどReact, TypeScriptやGraphQLを触っていた
    ● 2020/1にジョインして開発開始
    始まり
    

    View Slide

20. 20
    - Firebase上にあげてモックを用意していた
    - DBはFirestoreでやる？とか悩んでいた
    開発開始
    管理画面 呼び出し画面
    

    View Slide

21. メンターだった@shinnoki（現CTO）がHasuraを紹介
    21
    ここで登場
    NoSQLで開発してしまうとDB設計が複雑
    化してきたときにツールや知見が世の中に
    転がっていなくて大変。
    Hasuraを使えば開発効率もいいし、SQLも
    使えるし、仮にHasuraをやめてバックエ
    ンドを書くことになってもDBはそのまま
    使えるからリスクが少ないよ。
    

    View Slide

22. 環境整備もラクだし
    運用もすごく簡単
    22
    Hasura👍
    

    View Slide

23. 23
    1ヶ月しないうちに基本的な機能が揃って
    PoC予定のお客様に見せることができた
    ほめられた🎉
    

    View Slide

24. 24
    店舗従業員向けのアプリを作る話になり
    React-Native / Expoで
    ゼロから2週間弱でストアリリース🎉
    アプリも作った
    

    View Slide

25. 25
    半年経って二人エンジニアがジョイン🎉
    コーディング経験はあるが弊社の技術スタックはほぼ未経験
    人が増えた
    

    View Slide

26. 26
    2週間ほどで本番に
    Pull-Requestが出せるように
    初学者にもいい
    

    View Slide

27. 27
    Hasuraは
    学習コストが低く
    初めての人に教えるのも良い
    初学者にもいい
    

    View Slide

28. 28
    そして現在・・・
    

    View Slide

29. 29
    人も増えました
    

    View Slide

30. 30
    追加サービスも増えてます
    

    View Slide

31. 31
    ベータリリースから導入店舗数700店舗に至るまで
    長時間の障害もなく
    Hasuraで運用し続けられています
    

    View Slide

32. 32
    Hasuraのよさ
    

    View Slide

33. 33
    爆速で開発できた
    Hasuraのよさ
    

    View Slide

34. 34
    docker compose upだけ
    デジちゃいむリポジトリ内のREADME
    

    View Slide

35. 35
    爆速で開発できた２
    - code-generatorで型安全につなぎ込める
    - 学習コストが低いため、GraphQL経験がない人でもす
    ぐに開発に貢献できる
    - みんなフルスタックにできるようになる
    - 外部委託の方のキャッチアップも爆速で終わる
    - Migrationのおかげで環境を簡単に合わせられる
    

    View Slide

36. 36
    Hasura-Consoleが見るだけですぐ使える
    とりあえず使える
    Hasura - Quick Start with Docker
    https://hasura.io/docs/latest/getting-started/docker-simple/#try-out-a-query
    

    View Slide

37. 37
    よしなにやってくれる
    - n+1問題とかSQLインジェクション対策とか
    - Production Checklistに従えばより安全に
    - https://hasura.io/docs/latest/deployment/production-checklist/
    

    View Slide

38. 38
    苦労していること
    

    View Slide

39. 39
    ビジネスロジックについて
    - ビジネスロジックや状態管理が複雑になってくると辛い
    - ActionやRemote Schemaを使わないとフロントエンドに処
    理がばらけてしまい大変になる
    - デジちゃいむの場合、順番待ち機能の実装が思ったより
    も大変
    - 呼び出し機能はビジネスロジックとしては簡単
    

    View Slide

40. 40
    - Hasuraが便利すぎる
    - バックエンドの知見が深まりづらいかも？
    う～ん
    

    View Slide

41. 41
    Hasura使ってよかった～
    おわりに
    

    View Slide

42. View Slide