© LayerX Inc. エンジニアの技術的な意思決定を支えるADR - LayerXの活用事例 TSKaigi 2024 松本駿

2 © LayerX Inc. 自己紹介 松本駿 2019年株式会社リクルート 新卒入社 不動産情報サイトSUUMOの新規機能開発やパフォーマンス改善、技術的負債の解消などを経験。 2022年2月株式会社LayerX 中途入社 バクラクシリーズのバックエンドからフロントエンドまで幅広く担当 趣味 車 Github: toshi1127 Twitter: toshi11274

3 © LayerX Inc. セッションの概要 今日伝えたいこと ● LayerXの事業の面白さ ● LayerXにおける技術的な意思決定の重要性 ● LayerXの技術的意思決定の文化 ● ADRを運用することのメリット ● 告知（ブース、イベントのご紹介）

4 © LayerX Inc. すべての経済活動を、デジタル化する。 会社概要 会社名 株式会社LayerX（レイヤーエックス） 代表取締役 代表取締役CEO　福島 良典 代表取締役CTO　松本 勇気 創業 2018年 8月1日 資本金 約132.6億円 拠点 東京本社　〒103-0012 東京都中央区日本橋堀留町１丁目９−８ 人形町PREX 関西支社　〒530-0003 大阪府大阪市北区堂島1-1-5 関電不動産梅田新道ビル 中部支社　〒453-6111 愛知県名古屋市中村区平池町4-60-12 グローバルゲート 九州支社　〒810-0801 福岡県福岡市博多区中洲3-7-24 従業員数 250名 （2023年12月末日時点）

5 © LayerX Inc. 「すべての経済活動を、デジタル化する。」をミッションに掲げ、 法人支出管理サービス「バクラク」や企業内業務のデジタル化を支援するサービスを提供しています。 事業紹介 バクラク事業 企業活動のインフラとなる法人支出 管理（BSM）SaaSを開発・提供 Fintech事業 ソフトウェアを駆使したアセットマネジメ ント・証券事業を合弁会社にて展開 AI・LLM事業 文書処理を中心とした、LLMの活用による プロセスのリデザイン

6 © LayerX Inc. バクラク事業紹介 稟議・支払申請・経費精算 仕訳・支払処理効率化 法人カードの発行・管理 帳票保存・ストレージ 帳票発行 ・AIが領収書を５秒でデータ化 ・スマホアプリとSlack連携あり ・領収書の重複申請などミス防止機能 ・AIが請求書を５秒でデータ化 ・仕訳・振込データを自動作成 ・稟議から会計までスムーズに連携 ・年会費無料で何枚でも発行可 ・インボイス制度・電帳法対応 ・すべての決済で1%以上の還元 ・AIが書類を5秒でデータ化 ・あらゆる書類の電子保管に対応 ・電子取引・スキャナ保存に完全対応 ・帳票の一括作成も個別作成も自由自在 ・帳票の作成・稟議・送付・保存を一本化 ・レイアウトや項目のカスタマイズも可能 バックオフィス系のSaaSを提供している事業

7 © LayerX Inc. バクラク事業紹介 圧倒的に使いやすいプロダクトで わくわくする働き方を。 3年で 6サービス リリースサービス数 開発スピードへの高い満足・期待(お客様の声を一部抜粋) ● 打ち合わせの場で「以前いただいた意見を受けて、新しい機能を開発しました」と新しい開発情報を共有していただけることも、大変助かっています。 (株式会社with様) ● 導入決定前であったにもかかわらず、弊社からの要望を「すぐに開発へ伝えます」と対応してくださり、実際にすぐ対応いただいたことには驚きました。 スピード感があり、ユーザーと一緒に成長できる点を特に評価しています。（株式会社クルーバー様） ● システムの検討の際には他社サービスとも比較しましたが、サービスサイトを見たときに機能アップデートのお知らせが多かったバクラクのほうが、 開発スピードが速いと判断しました。（一般社団法人コード・フォー・ジャパン様） アップデート回数 1年に ５００回 プロダクトVision 体験の良さと開発の速さが強み

8 © LayerX Inc. 現在のバクラクの開発体制 Product Enabling Data DevOps 請求書受取 申請 経費精算 カード 電子帳簿保存 請求書発行 Machine Learning データ基盤 Ops 各チームに2-5名程度。プロダクト開発チームとその生産性を上げる横断チームで構成

9 © LayerX Inc. 技術的意思決定の重要性 それぞれの開発チームが爆速でお客様に価値を届けるために 技術の意思決定は、極力トップダウンではなく、各開発チームが行う Product Enabling Data DevOps 請求書受取 申請 経費精算 カード 電子帳簿保存 請求書発行 Machine Learning データ基盤 Ops Stream Aligned Team. 各プロダクトのエンジニアとPdMが、こだわり抜いて良いプロダクトと体験を届ける。

10 © LayerX Inc. LayerXの技術的意思決定の文化 バクラクでは 各チームでの意思決定を推進するために、ADR と Design Docs を運用 ● ADR ○ なぜその技術・設計を用いるのか ○ 意思決定の背景や比較した選択肢との優劣、決定事項を記載したもの ● Design Docs ○ 機能や仕組みを実装するために必要な設計情報 ○ どのような問題を解決するのか、具体的な実装指針を記したもの ■ アーキテクチャ ■ サービスのインターフェイス ■ データモデルなど ※ エンジニアが行う技術の意思決定は、組織全体で後押しする前提

11 © LayerX Inc. ADRの実例: PDFの指定分割機能 複数のPDFを、任意のページに分割する機能

12 © LayerX Inc. Context お客様のPCスペックによらず、大量のPDFデータを高速に表示できなければならない ● 任意のページでPDFを分割するためにプレビューが必要 ● 低スペック端末でも高速に処理しなければならない ● ファイル枚数/ファイルサイズが大きい場合も安定して動作しなければならない ○ PDFは最大100ファイルアップロード可能 ○ 1書類あたりの最大サイズは50MB

13 © LayerX Inc. Decision(決定事項） 画面の表示領域に入ったPDFのみをプレビュー表示することでプレビューを高速化 画像でよく行うLazyloadの仕組みを応用 ● 画面表示領域に含まれるものだけを処理するために、Intersection Observerを利用 ● PDFの該当ページをcanvasにレンダリングし、画像表示 マシンのスペックによらず、PDFを分割しアップロードできる状態に 表示領域外は処理しない

14 © LayerX Inc. 技術意思決定を残すことのメリット ● 議論の効率向上 ○ 議論の重複防止 ○ 意思決定項目の明確化 ○ テンプレートがあることにより誰でも議論を主導可能に ● 知見の横展開が容易 ○ ADRを通じた知識と経験の共有が効率的に ● 後で設計の理由を見失わない ○ ADRによる設計の理由の明確化 ○ チーム内外の迅速な情報共有が可能 ● 新規メンバーのオンボーディングの短縮 ○ ADRで重要ポイントを把握可能なことも 各チームでの意思決定を推進し、横断でのノウハウの共有にも役立っている

15 © LayerX Inc. スポンサーブースのご紹介 過去に議論されたADRやDesign Docsを用意してます！！ 興味がある方、議論してみたい方、お越しください！地下1階階段の正面です！ ● 統合GraphQL Gatewayの新設と、その周辺の技術選定 ● Node.jsのパッケージマネージャにpnpmを使う ● VueプロダクトをReactに移行するべきか ● 自動テストのモック生成ライブラリの選定 など....30個以上用意してます！

© LayerX Inc. 16 TSKaigi 2024 After Talk TSKaigi 2024スポンサー企業3社によるアフタートークイベントを開催します！ https://layerx.connpass.com/event/318123/

© LayerX Inc. 17 LayerXのプロダクトメンバーと美味しいお酒やご飯を囲み ながら、プロダクトやチーム、技術の話をゆる〜く行うイベン トを定期的に行っています。 直近の予定は以下のとおりです。 LayerX Casual Night ※原則招待制です。気になるかたはDM等でコンタクトください。 LayerX Casual Night LayerX Open Door アカウント登録が一切不要なカジュアル面談を公開しています。 ・私と雑談してみたい ・質問したいことがある ・選考に進むか悩んでいる などなど、お気軽にお申し込みください。 日程 テーマ 5/15(水) 19時ごろ〜 🍷ワイン Night 6/14(金) 19時ごろ〜 🍻Extended Night We are hiring!