Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Avatar for Ren Yamanashi Ren Yamanashi
January 16, 2025
Programming
890
2

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

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

Avatar for Ren Yamanashi

Ren Yamanashi

January 16, 2025

More Decks by Ren Yamanashi

See All by Ren Yamanashi
保守性を高める AWS CDK のセオリー・ベストプラクティス
Avatar for Ren Yamanashi yamanashi_ren01
6
1.5k
CDK開発におけるコーディング規約の運用
Avatar for Ren Yamanashi yamanashi_ren01
3
750
AWS初心者ってどうやってAWSを学ぶ？〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
Avatar for Ren Yamanashi yamanashi_ren01
0
720

Other Decks in Programming

See All in Programming
モデルのリファクタリングが難しいと思ったら、そもそも複雑だったのはビジネス仕様だった ? / is-the-business-domain-the-real-complexity
Avatar for hatsu hatsu38
0
350
テストを司るデーモンに会いに行く 〜隔離した仮想マシンでテストを通すまで〜
Avatar for Hidemune Takahashi h1d3mun3
1
510
Starting & Sustaining Code-Based E2E Testing for Non-Coding QA Teams( #jasstniigata )
Avatar for teyamagu teyamagu
PRO
1
430
The Rails Doctrine Decade
Avatar for Koichi ITO koic
2
150
Webの地図
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
6
4.6k
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
220
What We Talk About When We Talk About XP
Avatar for seki at druby.org m_seki
2
660
Everything will be SERVERLESS — 信じて運用した10年の経験値 / Everything Will be Serverless — Lessons Learned from 10 Years of Operational Experience
Avatar for shiro seike seike460
PRO
1
290
Streamlitで実現する自然言語データアプリ開発
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
290
選挙速報を多くのユーザーへ 届ける Live Activities 設計
Avatar for kengo saito hamayokokuririn
0
150
App Intentsのビルドプロセスを支える技術
Avatar for kntk kntkymt
0
400
App Storeの外へ──日本のiOSサイドローディング入門 for iOSDC Japan 2026
Avatar for 野瀬田　裕樹 yuukiw00w
0
220

Featured

See All Featured
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
409
67k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
700
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
240
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.9k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.9k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.3k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
10k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
460
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
330

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