スタートアップのフロントエンド事情 GENBA #2 〜Front-End Opsの現場〜

概要
── 現場主義でプラクティカルな勉強会

「GENBA」は現場主義の勉強会です。明日から役立つ、仕事に使える知識の共有を目指し、抽象的な話よりも具体でプラクティカルであることがコンセプトの新しい勉強会シリーズです。

第2回目はFront-End Opsの現場というテーマで開催します。 中々大きくは注目されていないテーマですが、高速なユーザー体験の基盤はUIに直接貢献するものではありませんが、表示速度や安定性に貢献しますし、手元のビルド速度が向上すればPDCAの高速化に繋がります。まさに現場主義の勉強会に相応しいテーマで明日の開発を少しでも良くするべくタイミー、Sansan、ココナラ、X Mileの4社からそれぞれエンジニアが登壇し、知見を共有していただきます。

https://timeedev.connpass.com/event/308783/

Transcript

1. スタートアップの フロントエンド事情 X Mile株式会社 蝦名 潤
2. 自己紹介
3. 蝦名 潤 Jun Ebina Tech Lead { "出身": "青森県", "年齢": 27, "キャリア": ["不動産ベンチャー", "物流スタートアップ"], "技術スタック": ["Ruby on Rails", "Python", "AWS", "React/Next.js"], "最近の関心ごと": ["Cloudflare", "Hono"], "X": "@ebijun1007" } Company 自己紹介
4. 会社名 本社 大阪支社 福岡支社 資本金 社員数 事業内容 X Mile株式会社（クロスマイル） 東京都新宿区新宿6-27-30 新宿イーストサイドスクエア W7F 大阪府大阪市北区万歳町 4-12 浪速ビル東館6F 福岡県福岡市中央区大名 1-9-27 第一西部ビル3F 19.4億円（資本準備金含む） 200名 • ノンデスク事業者向けの経営支援 • 運輸企業向けの SaaS開発提供 所 在 地 2019年 6月 2019年12 月 2020年 6月 2020年12 月 2021年 6月 2021年 12月 2022年 6月 2022年12 月 社員数推移 2019/02〜2022/12 2 10 15 30 40 60 100 1 4 Company 会社概要 Copyright © 2022 X Mile All Rights Reserved.
5. 令和を代表する メガベンチャーを創る Mission 私たちは、今の日本に必要なのは経済を牽引するベンチャー企業だと考えます。 一番の問題は、戦前戦後や幕末に比べて、 日本人の起業家精神が薄れてしまっている一方で、その危機意識がないこと。 いつの時代も、イノベーションの担い手はハングリー精神のある新興企業から生まれています。 令和元年創業の私たちは、日本経済の活力を取り戻すために、新産業を創出し、 世界で勝負し、日本の次世代を担う人財を輩出する、歴史に残る企業を目指します。 私たちの使命 Copyright © X Mile All Rights Reserved.
6. 運輸事業者向け バーティカルSaaS 運輸業界では社会問題化する日本最大の ドライバー不足と同時に「多重化下請け構造」や 電話・紙・FAX を中心とした「低い労働生産性」など 多くの解決すべき業界課題が存在しています。 当社はそれらをソフトウェアによって解決し、 事業者様の売上最大化・コスト改善を図ることで、 インフラ産業である運輸業界を支えます。 Product プロダクト紹介 Copyright © 2022 X Mile All Rights Reserved.
7. 日本最大級・ノンデスク業界専門の 求人検索サイト 累計 100,000 名以上が登録している、日本最大級の ノンデスク業界専門の求人検索サービスです。 北海道~沖縄まで、全国の様々な業界の求人詳細を 閲覧できるサイトとなっています。 Copyright © 2022 X Mile All Rights Reserved. Product プロダクト紹介
8. 技術スタック Digital X Mileではプロダクト開発・環境に 対して、積極的に投資を行っており、 自社サービスについては開発・ Webマーケティング・セールスまでを 全て自社でシームレスに 業務構築しております。 また、事業部・コーポレート部署に ついてはバックオフィスSaaSを多数導入 することで、事業と組織の生産性を高め、 社員がコア業務に集中できる環境を、 創業期より整備してまいりました。 Copyright © X Mile All Rights Reserved.
9. ➢ ジョイン当時の状況 ➢ 技術選定 ➢ 早く開発するための取り組み・振り返り ➢ 今後やりたいこと 今日話すこと
10. 会社名 本社 大阪支社 福岡支社 資本金 社員数 事業内容 X Mile株式会社（クロスマイル） 東京都新宿区新宿6-27-30 新宿イーストサイドスクエア W7F 大阪府大阪市北区万歳町 4-12 浪速ビル東館6F 福岡県福岡市中央区大名 1-9-27 第一西部ビル3F 100名 • ノンデスク事業者向けの経営支援 • 運輸企業向けの SaaS開発提供 所 在 地 2019年 6月 2019年12 月 2020年 6月 2020年12 月 2021年 6月 2021年12 月 2022年 6月 2022年12 月 社員数推移 2019/02〜2022/12 2 10 15 30 40 60 100 1 10 Company 会社概要 ↑ このあたりのタイミングで 1人目のエンジニアとしてジョイン Copyright © 2022 X Mile All Rights Reserved. 19.4億円（資本準備金含む）
11. ➢ 新規事業としてSaaSをやりたい社長がいる ➢ 商談資料（Google Slides / Figma)がある 以上 ジョイン当時の状況
12. ➢ プロダクト（ロジポケ）リリースから1年半ほど ➢ 導入事業所数: 約xxx事業所 ➢ ARR（年間売上）: 約xxxx万円 ➢ エンジニア数: 正社員4人+業務委託6人 今の状況 気になる方は懇親会 / カジュ面で󰢛
13. ➢ ジョイン当時の状況 ➢ 技術選定 ➢ 早く開発するための取り組み・振り返り ➢ 今後やりたいこと 今日話すこと
14. ➢ メンテコストが低い ◦ 少人数（1人）での開発 ◦ インフラをある程度放っておける ➢ スケーラビリティ ◦ エンジニアが触りたいと思える技術 ◦ BtoB SaaSとして機能拡張が容易 ➢ 開発スピード ◦ MVPを早いサイクルで検証できる ◦ 開発者が増えても破綻しない 技術選定
15. ➢ バックエンド ◦ Ruby on Rails: 実務経験がある + 実例が多くググればなんと かなる ➢ インフラ ◦ AWS(ECS): 実務経験がある + お金を払えばスケールできる + 公式に問い合わせればなんとかなる ➢ フロントエンド ◦ React ▪ jQuery: エンジニア採用でイマイチ ▪ Vue: 2→3系の過渡期で心配 技術選定
16. ➢ ジョイン当時の状況 ➢ 技術選定 ➢ 早く開発するための取り組み・振り返り ➢ 今後やりたいこと 今日話すこと
17. 取り組み・振り返り ➢ 最初期に考えていたこと ◦ 素早くデプロイ出来る ◦ 人が増えた時に分業しやすい ◦ ライブラリの静的解析やエディタなどの恩恵をフ ル活用したい => モノリスなSPAを構築
18. 通常のモノリス /hoge /fuga /piyo モノリス サーバー
19. SPA /fuga /piyo FE BE 初回
20. モノリスSPA /hoge 初回 モノリス サーバー /piyo
21. 詳細な内容はテックブログで配信予定 1. create-react-appなどでSPAアプリを作る 2. FWのテンプレートエンジンでエントリーファイル （App.tsx等）を読み込む 3. ビルド時にバンドラでFWのアセットとしてSPAアプリ を取り込む モノリスSPAの作り方
22. Railsで実装したAPIの返却値をベースに “generate axios api client with type definition” とcursor に依頼=>
23. ➢ 1つのサーバで済む ◦ デプロイがシンプル ◦ CI/CDの構築も楽 ➢ SPAと似た書きっぷり ◦ エントリーポイント以外は疎結合 ◦ エディタの補完や静的解析も普通に使える ➢ 生成系ツールと噛み合った ◦ 次ページ モノリスSPAのメリット
24. Railsで実装したAPIの返却値をベースに “generate axios api client with type definition” とcursorに依頼 =>型定義、クエリ、エラーハンドリングなど 諸々出揃う
25. ➢ Railsの環境に依存してしまう ◦ 例: Node.jsのバージョン ◦ ライブラリ更新の影響範囲が広い ▪ 現状: Chromatic*を入れられない😭 * StoryBookベースのUIテストツール。ビジュアルテストやレビューに役立つ 今日のテーマに合わせるならChromaticを取り上げるスライドを作ればよかった モノリスSPAのデメリット
26. 今後やりたいこと ➢ インフラを分離していく ◦ FWのバンドラを使わず、Viteなどフロントエンドの エコシステムを活用 ◦ CI/CD環境でNodejsを用意し本番向けのビルドや CDNへのデプロイ ◦ モノレポは維持する予定 ➢ ORM、簡易BFFとしてフルスタックFWの活用模索