エンジニアとして初めてコーディング規約を作った話/登壇資料（松本 寛地）

株式会社Hacobu、株式会社ゆめみ主催
「うちのフロントエンドエンジニア、こんなことやってます！」

2024/01/25 (木) 19:00〜21:00
https://yumemi.connpass.com/event/304093/

Transcript

1. Confidential エンジニアとして初めてコーディング規約 を作った話 株式会社Hacobu 松本 寛地 2024年1月25日
2. Copyright Hacobu, Inc. 2 自己紹介 ❏ 松本寛地 ❏ 1993年生まれ、今年30歳 ❏ 2021年12月にHacobu入社 ❏ 入社してからずっとVistaのフロントエンドエンジニア ❏ 趣味はサッカー観戦、将棋、麻雀
3. Copyright Hacobu, Inc. 3 コーディング規約 作ったことありますか？
4. Copyright Hacobu, Inc. 4 目次 1. 導入することを決めた背景 2. 導入する上で気をつけたこと 3. 具体的な導入手順とその成果 4. まとめ
5. Copyright Hacobu, Inc. 5 導入することを決めた背景 1. 導入することを決めた背景 2. 導入する上で気をつけたこと 3. 具体的な導入手順とその成果 4. まとめ
6. Copyright Hacobu, Inc. 6 導入することを決めた背景 1. メンバーによって書き方がバラバラだった 2. 保守性と品質を高めたかった 3. オンボーディングコストが高い
7. Copyright Hacobu, Inc. 7 導入することを決めた背景 メンバーによって書き方がバラバラだった ❏ メンバーの入れ替わりがあった際に、メンバーそれぞれコーディングスタイルがバラバラだった ❏ 変数やファイル名等の命名規則が人それぞれ違う ❏ メンバー間で共有したことが Linterやドキュメントに明示されていなかった 定数だけど キャメルケースで書 いてる。。? この前話したけど 忘れてるだけ？
8. Copyright Hacobu, Inc. 8 導入することを決めた背景 保守性と品質を高めたかった ❏ コードの書き方が統一されておらず、一貫性がなかった ❏ プロダクトを使うユーザーが増えてきたので、品質を高めたかった
9. Copyright Hacobu, Inc. 9 導入することを決めた背景 オンボーディングコストが高い ❏ 初期の方のコードと新しいコードで書き方が全然違うので、どちらを参考にするべきか都度説明する必要 がある ❏ コーディング規約がないことでコードの理解に時間がかかる
10. Copyright Hacobu, Inc. 10 導入する上で気をつけたこと 1. 導入することを決めた背景 2. 導入する上で気をつけたこと 3. 具体的な導入手順とその成果 4. まとめ
11. Copyright Hacobu, Inc. 11 導入する上で気をつけたこと 1. 導入するコストを最小限にする 2. 背景などをドキュメントに残す 3. 機械的に制御する
12. Copyright Hacobu, Inc. 12 導入する上で気をつけたこと 導入するコストを最小限にする ❏ 作った後に運用することがゴールなので、作ることに時間や労力のコストをかけたくない ❏ 既にあるスタイルガイドなどに乗っかれるものは乗っかりたい ❏ Airbnbをコーディング規約の基盤とする ❏ ルールはなるべく緩めに設定して、最低限必要なものに絞る
13. Copyright Hacobu, Inc. 13 導入する上で気をつけたこと 背景などをドキュメントに残す ❏ 作り始める前に、まずはチーム内で合意形成をとる ❏ 今後新しく入るメンバーもコーディング規約の意図を知ることができる
14. Copyright Hacobu, Inc. 14 導入する上で気をつけたこと 機械的に制御する ❏ Linterなどで機械的に制御できる箇所は制御する ❏ ESLintにない独自ルールが出てきたら別途 ESLintのconfigで定義する
15. Copyright Hacobu, Inc. 15 導入することを決めた背景 1. 導入することを決めた背景 2. 導入する上で気をつけたこと 3. 具体的な導入手順とその成果 4. まとめ
16. Copyright Hacobu, Inc. 16 具体的な導入手順とその成果 1. 合意形成のためのドキュメントを書く 2. コードに落とし込む
17. Copyright Hacobu, Inc. 17 具体的な導入手順とその成果 合意形成のためのドキュメントを書く ❏ ドキュメント化の手法として、ADR（Architecture Decision Record）を採用 
 ❏ ref. https://cloud.google.com/architecture/architecture-decision-records?hl=ja
 
 ❏ どうしてその意志決定をしたかなどの、背景や結果をシンプルに書くことができる 
 
 ❏ ADRは「導入する背景のADR」と「コーディング規約の ADR」を分けて作りました
18. Copyright Hacobu, Inc. 18 具体的な導入手順とその成果 コードに落とし込む ❏ ESLintのconfigを新規に追加 ❏ monorepoの1つのpackageで新しいESLintの設定を導入してみる ❏ モジュールの循環参照など、自動で直せる箇所以外は手動で直す。。。 <- 今ここ
19. Copyright Hacobu, Inc. 19 導入することを決めた背景 1. 導入することを決めた背景 2. 導入する上で気をつけたこと 3. 具体的な導入手順とその成果 4. まとめ
20. Copyright Hacobu, Inc. 20 まとめ ❏ コーディング規約はいつでも作れるが、早めにやるに越したことはない ❏ プロダクトが大きくなるにつれて入れにくくなる ❏ 属人的だった規約を機械的に解決できるなら解決した方がいい ❏ monorepo構成にしておくとpackage毎にESLint導入できるから嬉しい