スタートアップの フロントエンド事情 X Mile株式会社 蝦名 潤

自己紹介

蝦名 潤 Jun Ebina Tech Lead { "出身": "青森県", "年齢": 27, "キャリア": ["不動産ベンチャー", "物流スタートアップ"], "技術スタック": ["Ruby on Rails", "Python", "AWS", "React/Next.js"], "最近の関心ごと": ["Cloudflare", "Hono"], "X": "@ebijun1007" } Company 自己紹介

会社名 本社 大阪支社 福岡支社 資本金 社員数 事業内容 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.

令和を代表する メガベンチャーを創る Mission 私たちは、今の日本に必要なのは経済を牽引するベンチャー企業だと考えます。 一番の問題は、戦前戦後や幕末に比べて、 日本人の起業家精神が薄れてしまっている一方で、その危機意識がないこと。 いつの時代も、イノベーションの担い手はハングリー精神のある新興企業から生まれています。 令和元年創業の私たちは、日本経済の活力を取り戻すために、新産業を創出し、 世界で勝負し、日本の次世代を担う人財を輩出する、歴史に残る企業を目指します。 私たちの使命 Copyright © X Mile All Rights Reserved.

運輸事業者向け バーティカルSaaS 運輸業界では社会問題化する日本最大の ドライバー不足と同時に「多重化下請け構造」や 電話・紙・FAX を中心とした「低い労働生産性」など 多くの解決すべき業界課題が存在しています。 当社はそれらをソフトウェアによって解決し、 事業者様の売上最大化・コスト改善を図ることで、 インフラ産業である運輸業界を支えます。 Product プロダクト紹介 Copyright © 2022 X Mile All Rights Reserved.

日本最大級・ノンデスク業界専門の 求人検索サイト 累計 100,000 名以上が登録している、日本最大級の ノンデスク業界専門の求人検索サービスです。 北海道~沖縄まで、全国の様々な業界の求人詳細を 閲覧できるサイトとなっています。 Copyright © 2022 X Mile All Rights Reserved. Product プロダクト紹介

技術スタック Digital X Mileではプロダクト開発・環境に 対して、積極的に投資を行っており、 自社サービスについては開発・ Webマーケティング・セールスまでを 全て自社でシームレスに 業務構築しております。 また、事業部・コーポレート部署に ついてはバックオフィスSaaSを多数導入 することで、事業と組織の生産性を高め、 社員がコア業務に集中できる環境を、 創業期より整備してまいりました。 Copyright © X Mile All Rights Reserved.

➢ ジョイン当時の状況 ➢ 技術選定 ➢ 早く開発するための取り組み・振り返り ➢ 今後やりたいこと 今日話すこと

会社名 本社 大阪支社 福岡支社 資本金 社員数 事業内容 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億円（資本準備金含む）

➢ 新規事業としてSaaSをやりたい社長がいる ➢ 商談資料（Google Slides / Figma)がある 以上 ジョイン当時の状況

➢ プロダクト（ロジポケ）リリースから1年半ほど ➢ 導入事業所数: 約xxx事業所 ➢ ARR（年間売上）: 約xxxx万円 ➢ エンジニア数: 正社員4人+業務委託6人 今の状況 気になる方は懇親会 / カジュ面で󰢛

➢ ジョイン当時の状況 ➢ 技術選定 ➢ 早く開発するための取り組み・振り返り ➢ 今後やりたいこと 今日話すこと

➢ メンテコストが低い ○ 少人数（1人）での開発 ○ インフラをある程度放っておける ➢ スケーラビリティ ○ エンジニアが触りたいと思える技術 ○ BtoB SaaSとして機能拡張が容易 ➢ 開発スピード ○ MVPを早いサイクルで検証できる ○ 開発者が増えても破綻しない 技術選定

➢ バックエンド ○ Ruby on Rails: 実務経験がある + 実例が多くググればなんと かなる ➢ インフラ ○ AWS(ECS): 実務経験がある + お金を払えばスケールできる + 公式に問い合わせればなんとかなる ➢ フロントエンド ○ React ■ jQuery: エンジニア採用でイマイチ ■ Vue: 2→3系の過渡期で心配 技術選定

➢ ジョイン当時の状況 ➢ 技術選定 ➢ 早く開発するための取り組み・振り返り ➢ 今後やりたいこと 今日話すこと

取り組み・振り返り ➢ 最初期に考えていたこと ○ 素早くデプロイ出来る ○ 人が増えた時に分業しやすい ○ ライブラリの静的解析やエディタなどの恩恵をフ ル活用したい => モノリスなSPAを構築

通常のモノリス /hoge /fuga /piyo モノリス サーバー

SPA /fuga /piyo FE BE 初回

モノリスSPA /hoge 初回 モノリス サーバー /piyo

詳細な内容はテックブログで配信予定 1. create-react-appなどでSPAアプリを作る 2. FWのテンプレートエンジンでエントリーファイル （App.tsx等）を読み込む 3. ビルド時にバンドラでFWのアセットとしてSPAアプリ を取り込む モノリスSPAの作り方

Railsで実装したAPIの返却値をベースに “generate axios api client with type definition” とcursor に依頼=>

➢ 1つのサーバで済む ○ デプロイがシンプル ○ CI/CDの構築も楽 ➢ SPAと似た書きっぷり ○ エントリーポイント以外は疎結合 ○ エディタの補完や静的解析も普通に使える ➢ 生成系ツールと噛み合った ○ 次ページ モノリスSPAのメリット

Railsで実装したAPIの返却値をベースに “generate axios api client with type definition” とcursorに依頼 =>型定義、クエリ、エラーハンドリングなど 諸々出揃う

➢ Railsの環境に依存してしまう ○ 例: Node.jsのバージョン ○ ライブラリ更新の影響範囲が広い ■ 現状: Chromatic*を入れられない😭 * StoryBookベースのUIテストツール。ビジュアルテストやレビューに役立つ 今日のテーマに合わせるならChromaticを取り上げるスライドを作ればよかった モノリスSPAのデメリット

今後やりたいこと ➢ インフラを分離していく ○ FWのバンドラを使わず、Viteなどフロントエンドの エコシステムを活用 ○ CI/CD環境でNodejsを用意し本番向けのビルドや CDNへのデプロイ ○ モノレポは維持する予定 ➢ ORM、簡易BFFとしてフルスタックFWの活用模索