toBエンプラのスタートアップで Remixを使ってチーム開発した軌跡

2024/12/12 フロントエンドの技術選定 ~2024年を振り返る~ Lunch LTの登壇資料

Transcript

1. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 1 STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. toBエンプラのスタートアップで Remixを使ってチーム開発した軌跡 2 0 2 4 / 1 2 / 1 2 フ ロ ン ト エ ン ド の 技 術 選 定 ~ 2 0 2 4 年 を 振 り 返 る ~ L u n c h L T
2. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 2 自己紹介 マッケイ @mackay_1503 2021年にAcompanyに入社。 現在はエンジニアリングマネージャーとして、 SaaSプロダクトの開発全般をリード。 開発からデザイン、マネジメント、プロダクトの 立ち上げなど、様々なカットで事業前進を進める。
3. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 3 会社紹介 1 Acompanyの技術選定の歴史 2 AcompanyのRemix環境 3 Remixにした恩恵 4 Remixへの期待 5 現時点では 6 もくじ
4. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 4 STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 会社紹介
5. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 5 暗号技術を軸にセキュリティ/プライバシーの課題解決するスタートアップ 会社概要 会社名 株式会社Acompany 設 立 2018年6月20日 所在地 愛知県名古屋市 人員数 約60名 資本金 100百万円 ※資本準備金を除く 主要 投資家 認 定
6. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 6 Acompanyについて 秘密計算 と プライバシー に精通する 次世代サイバーセキュリティカンパニー ✕ プライバシー 秘密計算 （Confidential Computing） AI時代に非常に重要となる
7. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 7 Acompanyの歩み 秘密計算の研究開発から個人情報の安全な利活用を軸にプライバシーテックへ発展 秘密計算MPC エンジンを独自開発 TEE、連合学習、 合成データ、 差分プライバシー etc. MPC以外の PETsを技術開発 PIA等を用いた データ分析の リスク分析を実施 プライバシー リスク分析 DeepTech事業 （秘密計算プラットフォーム） SaaS事業 （プライバシーガバナンス） 2020年~秘密計算R&D時代 2023年~サービス提供を開始 2022年~プライバシーテックに拡張 2023年4月~ 2024年4月~
8. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 8 本日のお話 DeepTech事業 （秘密計算プラットフォーム） SaaS事業 （プライバシーガバナンス） 2023年4月~ 2024年4月~ 本日の内容は、 Web系に限定した プロダクトのお話です （DeepなTechの話はなし）
9. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 9 STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. Acompanyの技術選定の歴史
10. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 10 技術選定の歴史(Web系のみ) GraphQL信仰期 迷走期 Remix期 プロトタイプをスクラップ&ビルドしながら、 技術選定もブラッシュアップ
11. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 11 技術選定の歴史(Web系のみ) GraphQL信仰期 Reactの組み合わせとして、相性が良く、盛り上がっていた。 バックエンドのメンバーも少なかったので、ノーコードでGraphQL サーバーが立てられるHasuraを採用。 【結果】 Hasura特有のルール/エラーに苦しめられる。 ユーザーの権限ロジックが魔境に… Hasura側とReact側のメンバー間の作業が分断
12. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 12 技術選定の歴史(Web系のみ) GraphQL信仰期 スピードが最最最優先だった プロダクトの立ち上げ時期に 開発スピードが鈍化 → 結果として、この時に作ったプロダクトもスクラップに
13. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 13 技術選定の歴史(Web系のみ) 2つの学びと、1つの固い決意 • 境界を作るほど、コミュニケー ションコストが爆増 • 新しいものづくしな構成は避け、 シンプルで馴染みのあるものを （技術はつまらなくあれ） • エンジニアがフルサイクルで 効率よく開発できるシンプルな ソリューションが必要
14. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 14 技術選定の歴史(Web系のみ) たどり着いた答え :
15. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 15 選ばれたのは：Remixでした Remixを採用した際のモチベーション • Reactをベースとした構成にしたい → チームのケイパビリティが、React中心だったため • Full-Stack TypeScriptな構成で、全てTypeScriptの世界で終わらせたい → エンジニアはTypeScriptだけ面倒を見ればよく、型や関数の共有をゼロコストに • とにかくシンプルに、Simple is Best、変なことをしない構成にしたい → 既存の知識や低い学習コストで、チームメンバーがヌルッと入れるコードベースに • 将来的な拡張も含めて、変更容易な構成にしたい → 便利だけど、ロックインが激しく、知識の再利用が難しい構成は避ける
16. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 16 STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. AcompanyのRemix環境
17. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 17 Terraformの世界観 TypeScriptの世界観 アプリケーション構成の概要 Remixの世界 Component Routing Server Validation ORM * RemixにBuilt-inされているライブラリと独自importしたライブラリあり インフラの世界
18. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 18 アプリケーション構成の概要 アプリケーションコードの見通しがクリアになり、責務が明確に → アプリケーションコード → 汎用UI → ルーティングとページコンポーネント → サーバー側の処理 → 外部ライブラリなど → インフラコード → DB周りのコード → expressのセットアップコード
19. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 19 アプリケーション構成の概要 Tarreform以外のコードはほぼTypeScript
20. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 20 STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. Remixにした恩恵
21. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 21 Remixの恩恵 メンバーはFull Stack前提で、基本的にはフルサイクルな開発へ → expressのセットアップコード 実装 設計 テスト デプロイ • 基本的には、一人のエンジニアがフルサイクルな開発を実現 • 全てのコードが統合されており、TypeScriptで全て完結 • Type-Safeな開発がゼロコストで実現
22. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 22 Remixの恩恵 とはいえ、必要な役割分担はシームレスに実現 → expressのセットアップコード • 各要素は、素結合な形で実現されているので、分割は容易 • メンバーの得手/不得手に合わせて、適切なスコープで分担が可能
23. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 23 Remixの恩恵 『特有の記述』が少なく済み、コードベースの把握が容易 → expressのセットアップコード • Remix特有の、という記法が少なく、Reactさえ理解できればコードベースの読み解きが容易 • すでに、何人かの新しいメンバーがチームに入ってきているが、スッと開発をスタートできている → 特に、クライアント側とサーバー側の責務が明確に切り離されており、バックエンドの開発者は Reactのコードを把握できなくとも、一般的なサーバーサイドの開発の流れで開発ができる
24. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 24 Remixの恩恵 Webの基本に忠実に、つまらないが必要十分な機能群 → expressのセットアップコード • Remixは、公式でもWebの基本的な機能を素直に使う（使わせる）コンセプトがあり、「普通はこう やって実現するよな」ということが、素直に実現できることが多い (例外はもちろんある) • チームで学ぶ知識がフレームワークに強く依存することなく、なるべくスタンダードな方向に向かっ て収束させられる安心感がある
25. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 25 Remixの恩恵 最後、ダメだったら別の選択肢への逃げが想定できる → expressのセットアップコード • Remixを最終的に捨てることになったとしても、中身はReactとルーティングとサーバー処理の塊な ので、別の構成への移行も大きな痛みを伴わずにできそう → 例えば、React x Honoのような構成にするとして、Remixの部分が薄く作られているので、 簡単に乗り換えられそう
26. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 26 STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. Remixへの期待
27. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 27 Remixの期待 フレームワーク自体の発展性 → expressのセットアップコード • フレームワークとしては、まだまだ成熟していない危うさは感じる • フレームワークとしては当然あって欲しいものが、普通にデフォルトで入っていないということもある → JavaScriptを使うなら、いい感じのものを組み合わせていくのは当たり前だろという話はありつつ… • 急に開発中止になる、みたいなものは無さそうだが、やはりまだまだ発展途上のフレームワークだなと感 じることはある
28. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 28 Remixの期待 自分たちで試行錯誤する部分が大きい → expressのセットアップコード • Remixがカバーする範囲が薄いが故に、自分たちで考えないといけないことは多い。 • Reactの設計と合わせて、サーバーサイドの設計、ロギングの仕組み、認証の仕組み、セッション管理な どなど、デファクトもない中で、自分たちにマッチする設計や運用を模索する体力が必要 • フレームワークとしてどんどんカバーしてもらう範囲を広げていって欲しさはある → ここもRemix的には、Webの基本に忠実にやれば問題ないよというスタンスなのかもしれない
29. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 29 Remixの期待 みんなもっと使ってほしい • 純粋に周りに使っている人がいないので、共感に乏しい • Remix = 気をてらった選択、ではなく、Remix = 普通に選択肢の一つ、という世界線になってほしい • 着実に採用実績は増えていっている印象なので、やはり今後に期待のフレームワークである
30. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 30 STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 現時点では
31. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 31 現時点では Remixを採用したことには恩恵が多い フルサイクルな開発文化を醸成でき、メンバーのコードベースに対するオーナーシップが高まった → 心理的にも、コードベース的にも、コードを触るハードルが下がった とりあえず、TypeScriptだけわかってもらえれば、開発をスタートできる Simple is Best. スピード感を落とさず、本質的なコードの生成とプロダクト価値に向き合っていくことが何より重要
32. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 32 Remix良いですよ 過去にも色々書いているので、気になる方はぜひ Speaker Deck Zenn https://zenn.dev/acompany/articles/123c29f46d213c https://speakerdeck.com/mackay_1503/full- typescriptnagou-cheng-wozhi-eruremixnoshi-tai
33. STRICTLY CONFIDENTIAL©️Acompany Co.,Ltd. 33 We are hiring!! Accompany On! → Acompany