Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ESLintプラグインを使用してCDKのセオリーを適用する
Search
Ren Yamanashi
January 16, 2025
Programming
2
630
ESLintプラグインを使用してCDKのセオリーを適用する
クラスメソッドのAWS CDK事情大公開スペシャル#2 で発表したLTのスライドになります
https://classmethod.connpass.com/event/337711/
Ren Yamanashi
January 16, 2025
Tweet
Share
More Decks by Ren Yamanashi
See All by Ren Yamanashi
保守性を高める AWS CDK のセオリー・ベストプラクティス
yamanashi_ren01
6
1k
CDK開発におけるコーディング規約の運用
yamanashi_ren01
3
410
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
570
Other Decks in Programming
See All in Programming
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
230
React 使いじゃなくても知っておきたい教養としての React
oukayuka
13
1.7k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
2
220
型で語るカタ
irof
1
850
新しいモバイルアプリ勉強会(仮)について
uetyo
1
190
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
190
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
250
階層化自動テストで開発に機動力を
ickx
1
440
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.3k
QA x AIエコシステム段階構築作戦
osu
0
210
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
570
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Facilitating Awesome Meetings
lara
54
6.5k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Rails Girls Zürich Keynote
gr2m
95
14k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
How GitHub (no longer) Works
holman
314
140k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Transcript
2025/01/17 山梨 蓮 クラスメソッドのAWS CDK事情大公開スペシャル#2
自己紹介 @ren_yamanashi ・job : web engineer (backend) ・lang 📝: TypeScript
・hobby 🚀: CDK Contribute
・TypeScriptを使用した開発を想定しています 前提
自己紹 介 CDKにおける「セオリー」とは?
・construct ID は PascalCaseで書く ・propsのプロパティはreadonlyに CDKのセオリー ・props/Constructで公開するリソースのプロパティはClassではなくInterfaceに など
・特にCDK / TypeScript になれていない場合 CDKコーディングにおける課題 ・セオリーを意識しながらのコーディングが大変 ・メンバー間で認識のレベルに差がある
・特にCDK / TypeScript になれていない場合 CDKコーディングにおける課題 レビューで毎回同じ指摘をする(される) ・セオリーを意識しながらのコーディングが大変 ・メンバー間で認識のレベルに差がある
・特にCDK / TypeScript になれていない場合 CDKコーディングにおける課題 レビューで毎回同じ指摘をする(される) ・セオリーを意識しながらのコーディングが大変 ・メンバー間で認識のレベルに差がある (レビュー漏れも・・・)
自己紹 介 この課題を ESLintを使って解決する
・JS / TS コードを解析し、構文エラーやルール違反コードを検出するツール ESLintとは? ・基本的なルールはESLintから提供される ・ルールはユースケースに応じて自前で作成可能
課題 ESLintを使用した課題の解決 ・セオリーを一つ一つ意識するのが大変なこと 解決方法 ・毎回同じ指摘をすること / レビュー漏れが起きること ・ESLintを使用した機械的な解析によって自動検知する ・意識しなくても /
レビューしなくても 勝手にエラーになる
自己紹 介 課題を解決するために
自己紹 介 CDKに特化した ESLintルールを作りました
自己紹 介
サポートしているルール(一部) eslint-cdk-pluginの紹介 ① construct ID は PascalCase で書く ② construct
には必ず this を渡す ③ construct ID に変数を使用しない ④ propsやconstructで公開するリソースのプロパティはinterfaceにする ⑤ propsやconstructで公開するリソースのプロパティはreadonlyにする CDKのセオリー / ベストプラクティス強制するESLintルール
自己紹 介 ① construct ID は PascalCase で書く
こちらの記事で紹介されているもの ① construct ID は PascalCase で書く
① construct ID は PascalCase で書く
自己紹 介 ② construct には必ず this を渡す
CDKのメンテナである Rico Hermans (@rrix0rr) 氏から提案いただいたもの ② construct には必ず this を渡す
② construct には必ず this を渡す
construct に this を渡すことは正しいリソース階層を維持するために重要 scope のような値を使用すると・・・ ② construct には必ず this
を渡す ・生成されるCFnテンプレートのリソース階層が正しくない ・予期しないリソースの命名 のような問題が起こる
自己紹 介 ③ construct ID に変数を使用しない
こちらもrrix0rr氏から提案いただいたもの ③ construct ID に変数を使用しない
③ construct ID に変数を使用しない
construct ID に変数を使用すると・・・ ③ construct ID に変数を使用しない ・不要な重複 ・パラメータ変更時のリソース再作成 のような問題が起こり得る
・IDの一意性を重視するあまり、不要な文字列を混在させてしまう
自己紹 介 ④ propsやconstructで公開する リソースのプロパティはinterfaceにする
こちらのスライドで紹介されているもの ④ propsやconstructで公開するリソースのプロパティは interfaceにする
④ propsやconstructで公開するリソースのプロパティは interfaceにする
④ propsやconstructで公開するリソースのプロパティは interfaceにする
自己紹 介 ⑤ propsやconstructで公開する リソースのプロパティはreadonlyにする
同じく、こちらのスライドで紹介されているもの ⑤ propsやconstructで公開するリソースのプロパティは readonlyにする
⑤ propsやconstructで公開するリソースのプロパティは readonlyにする
⑤ propsやconstructで公開するリソースのプロパティは readonlyにする
まとめ ・セオリーを自動適用するプラグインを紹介 ・導入方法などはドキュメントをご覧ください 🙏 https://eslint-cdk-plugin.dev/ ・「こんなルールが欲しい」という要望もお待ちしております!! ・Twitter(X): @ren_yamanashi ・Github: @ren-yamanashi