Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Yutorin
January 19, 2023

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

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

Yutorin

January 19, 2023
Tweet

More Decks by Yutorin

Other Decks in Programming

Transcript

  1. 2023/01/19
    Development Division / Lead Engineer
    Seiya Ishikawa (@yutorinD)
    新卒でサービス立ち上げから
    Hasuraを使って3年経った振り返り
    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
    爆速で開発できた2
    - 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. 42

    View Slide