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

by takahiro suzuki

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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 もいまのところモノレポとの相性はそれほど⾼くない

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

44  © toggle holdings inc. 最後に

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

採⽤強化ポジションプロダクトエンジニア必須要件：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へ

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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 の設定を活用できる 

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

Slide 115

Slide 115 text

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

めちゃくちゃ早い！  

Slide 118

Slide 118 text

1ツールに集約  

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

No content