持続可能な開発のためのミニマリズム

■ イベント
TECH BATON in 東京 〜うちのフロントエンド進化のツボ ！コード長持ちのための技術〜
https://findy.connpass.com/event/380541/

■ 発表者
技術本部 Eight Engineering Unit Product Devグループ
鳥山 らいか

■ エンジニア 採用情報
https://media.sansan-engineering.com

Transcript

1. Sansan株式会社 部署 名前 持続可能な開発のための ミニマリズム TECH BATON in 東京 〜うちのフロントエンド進化のツボ ！コード⻑持ちのための技術〜 pvcresin
2. ⿃⼭らいか / pvcresin 所属 Sansan で Eight の Webエンジニア 興味 フロントエンド / デザイン / 型 趣味 アニメ / お笑い / 謎解き ⾃⼰紹介
3. ミニマリズムとは
4. minimal（最⼩限）+ ism（主義）
5. 必要最⼩限まで要素を減らす考え⽅
6. - 依存ライブラリ - 技術の地層 - コード本体 持続可能な開発のために減らしているもの
7. 依存ライブラリ を減らす
8. 依存ライブラリを減らす - 簡単なものであれば、⾃作して置き換え - 例: Lodashの関数はES6で1-2⾏で書けるものも多い - Web標準に準拠 - 例: 簡単なDialogやTooltipは専⽤ライブラリをやめてみる → 運⽤時間やbundle sizeが削減され、Web標準のキャッチアップにも
9. 技術の地層 を減らす
10. - 同じ役割で新しい技術を導⼊する場合は、古い部分も移⾏していく - 例: jQuery → React → Svelte - 例: XHR → Axios → fetch 技術の地層を減らす → コードの⼀貫性が保たれ、モダン化が促進し、⼈もAIも学習が容易に
11. コード本体 を減らす
12. - 未使⽤コードの削除 - 例: ESLint, ts-unused-exports, Knip - メンテが重く、利⽤率が低いマイナーUIの簡素化や削除 - 例: 誰も使ってないDnDによる並び替え機能 - 例: ほぼ起こり得ないエラーのための専⽤UI コード本体を減らす → コードリーディングが容易に
13. 得られる効果
14. 得られる効果 - 運⽤時間が減り、議論や実装の時間が増加 - コードの書き⽅が整理され、AI⽣成コードの品質が向上 - 技術スタックがモダンになり、⼈材採⽤・育成がしやすく
15. まとめ
16. - 持続可能な開発のため、 依存ライブラリ・技術の地層・コード本体を減らすことを⽇々意識 - これにより、プロダクトの価値向上に必要な 開発時間の確保と組織⼒の強化を同時に達成 まとめ