ESLintプラグインを使用してCDKのセオリーを適用する

クラスメソッドのAWS CDK事情大公開スペシャル#2 で発表したLTのスライドになります
https://classmethod.connpass.com/event/337711/

Transcript

1. 2025/01/17 山梨 蓮 クラスメソッドのAWS CDK事情大公開スペシャル#2 　
2. 自己紹介 @ren_yamanashi ・job 󰞵: web engineer (backend) ・lang 📝: TypeScript ・hobby 🚀: CDK Contribute
3. ・TypeScriptを使用した開発を想定しています 前提
4. 自己紹 介 CDKにおける「セオリー」とは？
5. ・construct ID は PascalCaseで書く ・propsのプロパティはreadonlyに CDKのセオリー ・props/Constructで公開するリソースのプロパティはClassではなくInterfaceに 　など
6. ・特にCDK / TypeScript になれていない場合 CDKコーディングにおける課題 ・セオリーを意識しながらのコーディングが大変 ・メンバー間で認識のレベルに差がある
7. ・特にCDK / TypeScript になれていない場合 CDKコーディングにおける課題 レビューで毎回同じ指摘をする(される) ・セオリーを意識しながらのコーディングが大変 ・メンバー間で認識のレベルに差がある
8. ・特にCDK / TypeScript になれていない場合 CDKコーディングにおける課題 レビューで毎回同じ指摘をする(される) ・セオリーを意識しながらのコーディングが大変 ・メンバー間で認識のレベルに差がある （レビュー漏れも・・・）
9. 自己紹 介 この課題を　 ESLintを使って解決する
10. ・JS / TS コードを解析し、構文エラーやルール違反コードを検出するツール ESLintとは？ ・基本的なルールはESLintから提供される ・ルールはユースケースに応じて自前で作成可能
11. 課題 ESLintを使用した課題の解決 ・セオリーを一つ一つ意識するのが大変なこと 解決方法 ・毎回同じ指摘をすること / レビュー漏れが起きること ・ESLintを使用した機械的な解析によって自動検知する ・意識しなくても / レビューしなくても 勝手にエラーになる
12. 自己紹 介 課題を解決するために
13. 自己紹 介 CDKに特化した ESLintルールを作りました
14. 自己紹 介
15. サポートしているルール(一部) eslint-cdk-pluginの紹介 ① construct ID は PascalCase で書く ② construct には必ず this を渡す ③ construct ID に変数を使用しない ④ propsやconstructで公開するリソースのプロパティはinterfaceにする ⑤ propsやconstructで公開するリソースのプロパティはreadonlyにする CDKのセオリー / ベストプラクティス強制するESLintルール
16. 自己紹 介 ① construct ID は PascalCase で書く
17. こちらの記事で紹介されているもの ① construct ID は PascalCase で書く
18. ① construct ID は PascalCase で書く
19. 自己紹 介 ② construct には必ず this を渡す
20. CDKのメンテナである Rico Hermans (@rrix0rr) 氏から提案いただいたもの ② construct には必ず this を渡す
21. ② construct には必ず this を渡す
22. construct に this を渡すことは正しいリソース階層を維持するために重要 scope のような値を使用すると・・・ ② construct には必ず this を渡す ・生成されるCFnテンプレートのリソース階層が正しくない ・予期しないリソースの命名 のような問題が起こる
23. 自己紹 介 ③ construct ID に変数を使用しない
24. こちらもrrix0rr氏から提案いただいたもの ③ construct ID に変数を使用しない
25. ③ construct ID に変数を使用しない
26. construct ID に変数を使用すると・・・ ③ construct ID に変数を使用しない ・不要な重複 ・パラメータ変更時のリソース再作成 のような問題が起こり得る ・IDの一意性を重視するあまり、不要な文字列を混在させてしまう
27. 自己紹 介 ④ propsやconstructで公開する リソースのプロパティはinterfaceにする
28. こちらのスライドで紹介されているもの ④ propsやconstructで公開するリソースのプロパティは interfaceにする
29. ④ propsやconstructで公開するリソースのプロパティは interfaceにする
30. ④ propsやconstructで公開するリソースのプロパティは interfaceにする
31. 自己紹 介 ⑤ propsやconstructで公開する リソースのプロパティはreadonlyにする
32. 同じく、こちらのスライドで紹介されているもの ⑤ propsやconstructで公開するリソースのプロパティは readonlyにする
33. ⑤ propsやconstructで公開するリソースのプロパティは readonlyにする
34. ⑤ propsやconstructで公開するリソースのプロパティは readonlyにする
35. まとめ ・セオリーを自動適用するプラグインを紹介 ・導入方法などはドキュメントをご覧ください 🙏 　https://eslint-cdk-plugin.dev/ ・「こんなルールが欲しい」という要望もお待ちしております！！ ・Twitter(X): @ren_yamanashi ・Github: @ren-yamanashi