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

Slide 1

Slide 1 text

2025/01/17 山梨蓮クラスメソッドのAWS CDK事情大公開スペシャル#2 　

Slide 2

Slide 2 text

自己紹介 @ren_yamanashi ・job 󰞵: web engineer (backend) ・lang 📝: TypeScript ・hobby 🚀: CDK Contribute

Slide 3

Slide 3 text

・TypeScriptを使用した開発を想定しています前提

Slide 4

Slide 4 text

自己紹介 CDKにおける「セオリー」とは？

Slide 5

Slide 5 text

・construct ID は PascalCaseで書く・propsのプロパティはreadonlyに CDKのセオリー・props/Constructで公開するリソースのプロパティはClassではなくInterfaceに　など

Slide 6

Slide 6 text

・特にCDK / TypeScript になれていない場合 CDKコーディングにおける課題・セオリーを意識しながらのコーディングが大変・メンバー間で認識のレベルに差がある

Slide 7

Slide 7 text

・特にCDK / TypeScript になれていない場合 CDKコーディングにおける課題レビューで毎回同じ指摘をする(される) ・セオリーを意識しながらのコーディングが大変・メンバー間で認識のレベルに差がある

Slide 8

Slide 8 text

・特にCDK / TypeScript になれていない場合 CDKコーディングにおける課題レビューで毎回同じ指摘をする(される) ・セオリーを意識しながらのコーディングが大変・メンバー間で認識のレベルに差がある（レビュー漏れも・・・）

Slide 9

Slide 9 text

自己紹介この課題を　 ESLintを使って解決する

Slide 10

Slide 10 text

・JS / TS コードを解析し、構文エラーやルール違反コードを検出するツール ESLintとは？・基本的なルールはESLintから提供される・ルールはユースケースに応じて自前で作成可能

Slide 11

Slide 11 text

課題 ESLintを使用した課題の解決・セオリーを一つ一つ意識するのが大変なこと解決方法・毎回同じ指摘をすること / レビュー漏れが起きること・ESLintを使用した機械的な解析によって自動検知する・意識しなくても / レビューしなくても勝手にエラーになる

Slide 12

Slide 12 text

自己紹介課題を解決するために

Slide 13

Slide 13 text

自己紹介 CDKに特化した ESLintルールを作りました

Slide 14

Slide 14 text

自己紹介

Slide 15

Slide 15 text

サポートしているルール(一部) eslint-cdk-pluginの紹介 ① construct ID は PascalCase で書く ② construct には必ず this を渡す ③ construct ID に変数を使用しない ④ propsやconstructで公開するリソースのプロパティはinterfaceにする ⑤ propsやconstructで公開するリソースのプロパティはreadonlyにする CDKのセオリー / ベストプラクティス強制するESLintルール

Slide 16

Slide 16 text

自己紹介 ① construct ID は PascalCase で書く

Slide 17

Slide 17 text

こちらの記事で紹介されているもの ① construct ID は PascalCase で書く

Slide 18

Slide 18 text

① construct ID は PascalCase で書く

Slide 19

Slide 19 text

自己紹介 ② construct には必ず this を渡す

Slide 20

Slide 20 text

CDKのメンテナである Rico Hermans (@rrix0rr) 氏から提案いただいたもの ② construct には必ず this を渡す

Slide 21

Slide 21 text

② construct には必ず this を渡す

Slide 22

Slide 22 text

construct に this を渡すことは正しいリソース階層を維持するために重要 scope のような値を使用すると・・・ ② construct には必ず this を渡す・生成されるCFnテンプレートのリソース階層が正しくない・予期しないリソースの命名のような問題が起こる

Slide 23

Slide 23 text

自己紹介 ③ construct ID に変数を使用しない

Slide 24

Slide 24 text

こちらもrrix0rr氏から提案いただいたもの ③ construct ID に変数を使用しない

Slide 25

Slide 25 text

③ construct ID に変数を使用しない

Slide 26

Slide 26 text

construct ID に変数を使用すると・・・ ③ construct ID に変数を使用しない・不要な重複・パラメータ変更時のリソース再作成のような問題が起こり得る・IDの一意性を重視するあまり、不要な文字列を混在させてしまう

Slide 27

Slide 27 text

自己紹介 ④ propsやconstructで公開するリソースのプロパティはinterfaceにする

Slide 28

Slide 28 text

こちらのスライドで紹介されているもの ④ propsやconstructで公開するリソースのプロパティは interfaceにする

Slide 29

Slide 29 text

④ propsやconstructで公開するリソースのプロパティは interfaceにする

Slide 30

Slide 30 text

④ propsやconstructで公開するリソースのプロパティは interfaceにする

Slide 31

Slide 31 text

自己紹介 ⑤ propsやconstructで公開するリソースのプロパティはreadonlyにする

Slide 32

Slide 32 text

同じく、こちらのスライドで紹介されているもの ⑤ propsやconstructで公開するリソースのプロパティは readonlyにする

Slide 33

Slide 33 text

⑤ propsやconstructで公開するリソースのプロパティは readonlyにする

Slide 34

Slide 34 text

⑤ propsやconstructで公開するリソースのプロパティは readonlyにする

Slide 35

Slide 35 text

まとめ・セオリーを自動適用するプラグインを紹介・導入方法などはドキュメントをご覧ください 🙏 　https://eslint-cdk-plugin.dev/ ・「こんなルールが欲しい」という要望もお待ちしております！！・Twitter(X): @ren_yamanashi ・Github: @ren-yamanashi