生産性を爆上げするため入社後すぐBiomeを導入した話

1  本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。⽣産性を爆上げするため⼊社後すぐ Biomeを導⼊した話

2  © toggle holdings inc. 鈴⽊貴⼤所属 2024/07〜現在トグルホールディングス株式会社
出⾝兵庫県神⼾市フルスタックに TypeScriptで開発しています！

3  © toggle holdings inc. モノレポの format/lint を Biome に移⾏してみた

4  © toggle holdings inc. Full TypeScript 弊社の技術スタック © toggle
holdings inc.

5  © toggle holdings inc. モノレポで管理されている © toggle holdings inc.
過去の発表なぜ移⾏したかったのか

6  © toggle holdings inc. deno fmt/lint 移⾏前の環境モノレポの format/lint
を Biome に移⾏してみた

7  © toggle holdings inc. deno fmt/lint モノレポの format/lint を
Biome に移⾏してみた

8  © toggle holdings inc. Rust 製の非常に高速なフォーマット･静的解析ツール JavaScript, TypeScript, JSX,
CSS, JSON, GraphQL などをサポート Prettier と97%の互換性 ESLint, typescript-eslint, その他のソースに由来する 200以上のルールを備えているとは

9  © toggle holdings inc. なぜ移⾏したかったか

10  © toggle holdings inc. 開発環境の改善のためなぜ移⾏したかったか

11  © toggle holdings inc. 開発環境の改善移⾏前の状況 deno フォーマットは deno
fmt による CLI での実⾏ Lint は ESLint による静的解析ランタイムなぜ移⾏したかったのか

12  © toggle holdings inc. ランタイム開発環境の改善 deno fmt /
lint は Rust製で早いので､そのまま利⽤しかし... なぜ移⾏したかったのか deno fmt/lint

13  © toggle holdings inc. 設定ファイルで deno.enable を false に
しないとLSP が deno になってしまう • VSCode上に lint が表⽰されない • VSCodeで保存時にフォーマットされないコマンドを実⾏しなければ format / lint ができない Node.js 環境では VSCodeとdeno fmt / lint の相性が悪い

14  © toggle holdings inc. なぜ移⾏したかったのか - 開発環境の改善 VSCode に
lint 表⽰されないのは困る ⇒ ESLint を導⼊ • 機能が重複 • ESLintは各リポジトリでバージョン管理が必要 deno fmt/lint なぜ移⾏したかったのか

15  © toggle holdings inc. なぜ移⾏したかったか

16  © toggle holdings inc. なぜ移⾏したかったかサービスの成⻑とともに､モノレポのリポジトリは巨⼤化する

17  © toggle holdings inc. Full TypeScript モノレポで管理されている © toggle
holdings inc. なぜ移⾏したかったのか

18  © toggle holdings inc. モノレポで管理されているなぜ移⾏したかったのかリポジトリが巨⼤化するほど､移⾏へのハードルが⾼まるコード量が増えると､
フォーマットや静的解析の処理も重くなる

19  © toggle holdings inc. 移⾏へのハードル

20  © toggle holdings inc. 避けられないコンフリクトモノレポのため､リポジトリに関わる開発の⼈数が多い移⾏へのハードル IDE との相性
実⾏が早くても VSCode との相性が悪ければ､移⾏するメリットは薄い

21  © toggle holdings inc. TSKaigi kansai に Biomeへの移⾏をテーマでプロポーザルを出してみたら､社内受けが良かった！
避けられないコンフリクトモノレポのため､リポジトリに関わる開発の⼈数が多い移⾏へのハードル

22  © toggle holdings inc. リポジトリ関係者への周知が広まり､移⾏しやすくなった TSKaigi 駆動開発が始まった移⾏へのハードル

23  © toggle holdings inc. Biomeもいまのところモノレポとの相性はそれほど⾼くない IDE との相性実⾏が早くても VSCode
との相性が悪ければ､移⾏するメリットは薄い移⾏へのハードル

24  © toggle holdings inc. Biome もいまのところモノレポとの相性はそれほど⾼くない

25  © toggle holdings inc. ルートに共通の設定を書きつつ､各リポジトリで extendsする機能提供がある Biome もいまのところ
モノレポとの相性はそれほど⾼くない

26  © toggle holdings inc.   ├── biome.json  ├── package-lock.json
  ├── package.json   └── packages  ├── backend  │ ├── biome.json   │ ├── package.json   │ └── src  └── frontend  ├── biome.json   ├── package.json   └── src  モノレポのリポジトリをルートディレクトリで開いた場合は､ルートの設定が反映される CLIの場合は､各リポジトリで実⾏すれば個別の biome.json の設定を活⽤できる開いているディレクトリから⼀番近い biome.json を参照する Biome もいまのところモノレポとの相性はそれほど⾼くない

27  © toggle holdings inc. 今もモノレポ構成をネイティブにサポートするために議論されている Biome もいまのところモノレポとの相性はそれほど⾼くない

28  © toggle holdings inc. Biome もいまのところモノレポとの相性はそれほど⾼くない vscodeのbiomeプラグインでは､期待のリリースも

29  © toggle holdings inc. biome-vscode のモノレポサポートについて

30  © toggle holdings inc. 現在のプレリリース版から､ biome.projectsで複数のディレクトリを指定できるようになった biome-vscode のモノレポサポートについて

31  © toggle holdings inc. 現在のプレリリース版から､ biome.projectsで複数のディレクトリを指定できるようになった biome-vscode のモノレポサポートについて

32  © toggle holdings inc. biome-vscode のモノレポサポートについてただし､試したところうまく動かなかった配列の1つ⽬の定義がグローバルに及んだ

33  © toggle holdings inc. ･biome のネイティブサポート･vscode プラグインモノレポに関する機能は､期待⼤！
biome-vscode のモノレポサポートについて

34  © toggle holdings inc. 移⾏について

35  © toggle holdings inc. 移⾏について現在はルートの biome.json に設定共通の設定を定義
overrides で各リポジトリの定義を上書き

36  © toggle holdings inc. それぞれにおいて対象を絞ることが出来るディレクトリごとの移⾏がしやすい formatter linter
files 移⾏について

37  © toggle holdings inc. 移⾏について設定が爆速で出来た！！

38  © toggle holdings inc. 移⾏について設定⾃体はすぐ出来るが､エラーはかなり出た

39  © toggle holdings inc. 移⾏について ESLint と同様に､現時点で対応しないルールはOFFにできる。

40  © toggle holdings inc. 移⾏について ESLint と同様に抑制コメントによる lint の無視も可能

41  © toggle holdings inc. 移⾏について deno fmt (dprint) からの移⾏はフォーマットルールが違う
ため割と引っかかった。地道な対応は必要。

42  © toggle holdings inc. それでも... • ツールを 2 out
1 in で Biome に集約できるのはいい • 実⾏が早い • VSCode でも WebStorm でもバッチリ動く

43  © toggle holdings inc. FullTypeScript のモノレポは Biomeで爆速 ! TS
Kaigi 駆動開発できてよかったまとめ 1 2

44  © toggle holdings inc. 最後に

45  © toggle holdings inc. テクノロジーを活⽤して不動産仕⼊業務の⽣産性を爆上げする最後に

49  © toggle holdings inc. ベンチャーサミット2024でも優勝

採⽤強化ポジションプロダクトエンジニア必須要件：e-Typing 250点以上、Git 及び GitHub を用いた開発経験がある   歓迎要件：自社サービス開発 /運営を行う企業における
Web開発の経験など求める人物像：当社 Purpose / Mission に共感できる方詳細はHRMOSへ AIエンジニア必須要件：Git 及び GitHub を用いた開発経験がある、数理的にあるいはデータ構造的に、取り扱う難易度が高い技術に向き合うことが好きな方など   歓迎要件：SQL / R / Pythonなどのツール (いずれかで可 )を利用したデータ分析の経験求める人物像：当社 Purpose / Mission に共感できる方詳細はHRMOSへプラットフォームエンジニア必須要件：e-Typing 250点以上、Git 及び GitHub を用いた開発経験がある   歓迎要件：コンピュータサイエンスを専攻、またはソフトウェア開発の経験など求める人物像：当社 Purpose / Mission に共感できる方詳細はHRMOSへ QAエンジニア必須要件：ソフトウェアテストの実施設計業務経験2年以上など   歓迎要件：TypeScript、Python で開発された Webサービスの開発経験など求める人物像：当社 Purpose / Mission に共感できる方詳細はHRMOSへエンジニアリングマネージャー必須要件：e-Typing 250点以上、Git 及び GitHub を用いた開発経験がある   歓迎要件：自社サービス開発・運営を行う企業での Webアプリケーション開発の経験、テックリード等のサービス設計開発を主導した経験、エンジニアリングマネージャーの経験など求める人物像：当社 Purpose / Mission に共感できる方詳細はHRMOSへ

51  © toggle holdings inc. ご興味を持った⽅はぜひQRコードより、募集職種をご覧ください

本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。  生産性を爆上げするため  入社後すぐ  Biomeを導入した話  

自己紹介  名前: 鈴木貴大  所属: トグルホールディングス株式会社   2024/07 〜現在 
出身: 兵庫県神戸市  フルスタックにTypeScriptで開発しています！ 

目次  1. モノレポ環境の format/lint を Biome に移行してみた  2. なぜ移行したかったのか  3.
移行方法  4. IDE と Biome について  5. 会社紹介  6. まとめ 

deno fmt/lint   モノレポの format/lint を Biome に移行してみた移行前の環境 

deno fmt/lint   モノレポの format/lint を Biome に移行してみた

とは  • Rust 製の非常に高速なフォーマット・静的解析ツール  • JavaScript, TypeScript, JSX, CSS, JSON,
GraphQL   などをサポート  • Prettier と97%の互換性  • ESLint, typescript-eslint, その他のソースに由来する  200以上のルールを備えている 

なぜ移行したかったか   弊社の場合は、     　　　　　　　開発環境の改善  

なぜ移行したかったのか - 開発環境の改善   移行前の状況     • フォーマットは deno
fmt による CLI での実行   • Lint は ESLint による静的解析  

なぜ移行したかったのか - 開発環境の改善   移行前の状況     • フォーマットは deno
fmt による CLI での実行   • Lint は ESLint による静的解析   ランタイム  

なぜ移行したかったのか - 開発環境の改善   ランタイム   deno fmt/lint は Rust製で早いので、そのまま利用
    しかし...  

なぜ移行したかったのか - 開発環境の改善   Node.js 環境では VSCode と deno fmt/lint
の相性が悪い   設定ファイルで deno.enable を false にしないと  LSP が deno になってしまう    • VSCode 上に lint が表示されない  • VSCode で保存時にフォーマットされない  コマンドを実行しなければ format / lint ができない  

なぜ移行したかったのか - 開発環境の改善   VSCode に lint 表示されないのは困る   ⇒
ESLint を導入   deno fmt/lint   • 機能が重複  • ESLint は各リポジトリでバージョン管理が必要 

なぜ移行したかったのか   サービスの成長とともに、   モノレポのリポジトリは巨大化する  

なぜ移行したかったのか - モノレポで管理されている   Full TypeScript   過去の発表  

なぜ移行したかったのか - モノレポで管理されている   • リポジトリが巨大化するほど、移行へのハードルが高まる     • コード量が増えると、フォーマットや静的解析の処理も重くなる
 

移行へのハードル   避けられないコンフリクト     　モノレポのため、リポジトリに関わる開発の人数が多い    IDE との相性  
  　実行が早くても VSCode との相性が悪ければ、移行するメリットは薄い　 

移行へのハードル   避けられないコンフリクト     　モノレポのため、リポジトリに関わる開発の人数が多い　  TSKaigi kansai に Biome
への移行をテーマで   プロポーザルを出してみたら、社内受けが良かった！  

移行へのハードル   リポジトリ関係者への周知が広まり、移行しやすくなった   TSKaigi 駆動開発が始まった  

移行へのハードル   IDE との相性     実行が早くても VSCode との相性が悪ければ、移行するメリットは薄い　  Biome
もいまのところモノレポとの相性はそれほど高くない  

Biome もいまのところモノレポとの相性はそれほど高くない   ルートに共通の設定を書きつつ、   各リポジトリで extends する機能提供がある  

Biome もいまのところモノレポとの相性はそれほど高くない   開いているディレクトリから一番近い biome.json を参照する   .  ├──
biome.json  ├── package-lock.json  ├── package.json  └── packages  ├── backend  │ ├── biome.json  │ ├── package.json  │ └── src  └── frontend  ├── biome.json  ├── package.json  └── src  モノレポのリポジトリをルートディレクトリ  で開いた場合は、ルートの設定が反映される  CLIの場合は、各リポジトリで実行すれば  個別の biome.json の設定を活用できる 

Biome もいまのところモノレポとの相性はそれほど高くない   今もモノレポ構成をネイティブにサポートするために議論されている  

Biome もいまのところモノレポとの相性はそれほど高くない   vscode の biome プラグインでは、期待のリリースも  

biome-vscode のモノレポサポートについて   現在のプレリリース版から、  biome.projects で複数のディレクトリを指定できるようになった 

biome-vscode のモノレポサポートについて   ただし、試したところうまく動かなかった  配列の1つ目の定義が  グローバルに及んだ 

biome-vscode のモノレポサポートについて   • biome のネイティブサポート  • vscode プラグイン   
モノレポに関する機能は、期待大！ 

移行について   現在はルートの biome.json に設定  共通の設定を定義  overrides で  各リポジトリの定義を上書き 

移行について   • formatter  • linter  • files    それぞれにおいて対象を絞ることが
出来る      ディレクトリごとの   移行がしやすい  

移行について   設定自体はすぐ出来るが、エラーはかなり出た 

移行について   ESLint と同様に、  現時点で対応しないルールは OFF に  できる。 

移行について   ESLint と同様に抑制コメントによる lint の無視も可能 

移行について   deno fmt (dprint) からの移行はフォーマットルールが違うため  割と引っかかった。地道な対応は必要。 

それでも  • ツールを 2 out 1 in で Biome に集約できるのはいい 
  • 実行が早い    • VSCode でも WebStorm でもバッチリ動く 

まとめ  • FullTypeScript のモノレポは Biome で爆速！    • TSKaigi 駆動開発できてよかった 

最後に  会社紹介 - テクノロジーを活用して不動産仕入業務の生産性を爆上げする 

最後に  会社紹介 - ベンチャーサミット2024でも優勝 

短期間でSaaS製品をリリース  

トレードオフで開発環境に手が回らなかった   機能開発＞開発環境改善   きっと誰かがやってくれる  

なぜ移行をしたかったか   • ランタイムとの整合性  • ツールの統一  • 巨大化するリポジトリ 

技術スタック - backend   ランタイム 

開発効率  • deno fmt / lint はRust製なので実行速度は早い。  • しかし毎回、コマンド実行が必要。  •
コマンド実行を忘れたまま、GithubにPushするとCIで落ちる。  • format/lint をローカルで回して再度CIを回す。    無駄 

解決策  • husky 入れる。precommit  • cmd + S をトリガーにするプラグインを入れる   
  根本解決ではない。    そして何より、夢がない。 

Deno の設定   deno.enabled: false に設定することで、LSP が deno になることは避け
られるが、lint の表示が VSCode に表示されなくなる。 

ESLint の誕生   • 当時 deno で十分なlint が提供されていなかった  • VSCode
でエラーを表示できなかった 

そして、怒涛の製品開発へ...  

正直デメリットも多い   • 常時、いろいろなPRが上がっているのでコンフリクトは避けられない。  • 製品開発の合間に開発環境の向上に割く時間がない。  • 関係者が多いので、それぞれの方と歩幅を合わせる必要がある。   

移行って大変ですよね   • ライブラリのバージョンアップ   • フレームワークの移行   やる必要性があると思っていてもつい後回しになってしまう  

問題が顕在化するまで対処されない事が多い   • サポート期限の到来   • セキュリティインシデントの発生   • メンテナンスコストの増大
  • 既存システムで困難な対応   etc…    • ライブラリのバージョンアップ   • フレームワークの移行  

なぜいまか   - モノレポは今後も巨大化する　▶ 超巨大になる前に対処すべき - VSCode の激アツプラグインが対応した -
Biomeもリリースから利用実績が増え便利になった

まず何をしたか   TSKaigi kansai にプロポーザルを出してみた。 

結果  意外とCTOから好感触を得た。    社内でやろうぜ、みたいなノリが生まれた。    TSKaigi 偉大 

モノレポにおける Biome 移行のゴール   1. Deno lint / format +
ESLint の設定がうまくBiomeに移行できること    2. 開発効率を高めるため VSCode + Biome がうまく動作すること 

1. Deno lint / format + ESLint の設定がうまくBiomeに移行できること   1.
Deno lint / format + ESLint の設定がうまくBiomeに移行できること    2. 開発効率を高めるため VSCode + Biome がうまく動作すること 

biome lint   なにが lint に引っかかったかは教えてくれる 

モノレポにおける Biome 移行方法   1. それぞれのリポジトリにbiome.json を配置する  2. ルートに biome.json
を置く  3. vscode-biomejs プラグインの prerelease 版を使う 

モノレポにおける Biome 移行方法   1. それぞれのリポジトリにbiome.json を配置する      コマンドの実行が必要になる 

モノレポにおける Biome 移行方法   2. ルートに biome.json を置く    VSCode
の実行は可能。  ただし、exclude に手動で追加する必要がある。   

モノレポにおける Biome 移行方法   3. vscode-biomejs プラグインの prerelease 版を使う   
  バグが多い。動きはするがうまくいかなかった。  最近マージされた v3    今後の本命はこれになる。     

モノレポにおける Biome 移行方法   3. vscode-biomejs プラグインの prerelease 版を使う   
を見据えつつ、    1．それぞれのリポジトリにbiome.json を配置する    を採用。     

モノレポにおける Biome 移行方法   コードベースで、詳細書く     

ESLintとPrettierからの移行   公式に Migration ガイドがある。  マイグレーションも簡単ということを説明。    $ biome migrate
eslint --write $ biome migrate prettier --write 

移行作業の痛み   • ものすごくコンフリクトする    めちゃくちゃコンフリクトする画像を入れる。  • lint ルールのdisabled は必要。 
◦ いつ直すかが課題になる。 

めちゃくちゃ早い！  

1ツールに集約  

ドリンクスポンサーもやってるよ  

話を一字一句。スライドに書く。  

トグルホールディングスどんな会社？  

先日のベンチャーサミット優勝した  

短期間でSaaS製品をリリース  

短期間でSaaS製品をリリース       構想から3ヶ月でリリース  

短期間でSaaS製品をリリース     既存の製品を   ブラッシュアップ＆リプレイス    
4ヶ月でリリース  

短期間でリリース出来た理由     モノレポ構成のおかげで既存の資産を組み合わせながら   高速に開発することが出来た  

本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。 

生産性を爆上げするため入社後すぐBiomeを導入した話

生産性を爆上げするため入社後すぐBiomeを導入した話

More Decks by takahiro suzuki

Featured

Transcript