CDKで始めるTypeScript開発のススメ

Transcript

1. CDKで始めるTypeScript開発のススメ 2026/2/1 JAWS-茨城⽀部 x CDK⽀部コラボ回
2. 2 ⾃⼰紹介 • 部署 ◦ クラウド事業本部 • ニックネーム ◦ つくぼし • 最近推しているようでいないAWSサービス ◦ AWS App Runner • SNS/ブログ ◦ X(@tsukuboshi0755) ◦ DevelopersIO(つくぼし) 職種歴： 1. インフラエンジニア：3年 2. クラウドエンジニア：3.5年 3. 開発エンジニア：2年
3. CDKからTypeScriptを学んだ元インフラエンジニアの⾃分が、 開発にも取り組む中で気づいたポイントを紹介したい 3
4. 対象者 4 • CDKでのみTypeScriptを書いた事がある⽅ • CDKは書いているけど、開発は未経験という⽅ • TypeScriptで開発もやってみたいと思っているCDKユーザ
5. 普段からアプリ開発している⽅にとっては、 それ基本的な事では？と思われるかもしれません。 何卒シバくのだけはお許し下さい🙏 5
6. TypeScriptという⾔語のすごさ
7. JavaScriptやTypeScriptという⾔語が 何者か知ってますか？ 7
8. JavaScriptとは何者か • 1995年に作られた、様々なWebブラウザでインタラクティブなWebページを動的に作 成するための⾔語 ◦ 当時から現在に⾄るまで、WebサイトやアプリのUI(≒フロントエンド)は原則 HTML‧CSS‧JavaScriptの3技術で成り⽴つ(※WebAssemblyという例外はある) • 元々はクライアンドサイドのみ対応していたが、2009年にNode.jsの登場によりサーバ サイドのプログラムも書けるようになった ◦ いわゆるPython/Ruby/PHP等のバックエンドを⽤いてプログラムを書く場合と同 等の要件を実現できる 8
9. TypeScriptとは何者か • Microsoftにより2012年に作成された、JavaScriptの上位互換⾔語 • 主にTypeScriptコードをコンパイル(=変換)してJavaScriptコードを⽣成し、そのコー ドがフロントエンドやバックエンドで実⾏される • 基本的な⽂法はJavaScriptに沿いつつ、変数や関数の引数に対して静的型付けを強制 する事でバグを事前に発⾒しやすくなる特徴を持つ 9 JavaScriptの書き方 const add= (a, b) => a + b; add("5", 3); // 正しくは”8”だが、エラーにならず"53"と表示される（実行時までバグに気づかない） TypeScriptの書き方 const add = (a: number, b: number): number => a + b; add("5", 3); // コンパイル時に文字列が入っているためエラーとなる！（事前にバグを発見できる）
10. TypeScriptとは フロントエンドとバックエンドの両⽅で動き かつ型によりバグを発⽣させにくくさせた⾔語 10
11. TypeScriptの⻑所 • フロントエンドとバックエンド、さらにインフラの⾔語を全て統⼀できる ◦ 同じ⾔語や型定義を使い回せるため、チーム内での認識のズレが減りやすい • 世界最⼤級のJavaScriptパッケージ管理システム(npm)をそのまま活⽤できる ◦ 世界中の開発者が様々なライブラリを作成しているため、⼤抵のやりたい事は npmのライブラリを取り込む事で簡単に実現できる • 型によりエディタ補完やAI駆動開発との相性が良い ◦ 型の情報を元に、コードエディタ(VSCode等)の補完機能が賢く動きやすい ◦ 型が明⽰されているコードはAIが⽂脈を理解しやすく、コーディングエージェント (Claude Code等)によるコード⽣成の精度も上がりやすい 11
12. TypeScriptで対応できる開発要件及び代表フレームワーク フロントエンド React.js Next.js Vue.js etc… バックエンド Hono Express Fastify etc… インフラ その他 12 AWS CDK Pulumi etc… Mobile:React Native GAS:clasp Desktop:Electron AI Agent:Mastra etc…
13. TypeScriptだけで幅広い開発要件に対応できる 13
14. 余談 - TypeScriptの⽋点 • バージョンアップデートが早い ◦ バックエンドやインフラのみに使⽤すると、アップデートタスクが 多くて⼤変かも • 実⾏速度が他の⾔語と⽐べてイマイチ ◦ 最近はコンパイルツールであるtsc→tsgo移⾏等の取り組みで改善し つつある • フレームワークが乱⽴気味でどれを使えば良いか正解が難しい ◦ 特にバックエンドは定番といえるフレームワークが決まっていない 印象 14
15. CDKからTypeScript開発に取り組む際のポイント
16. CDKからTypeScriptを学ぶメリットは たくさんあります！ 16
17. インフラ領域からアプリ開発に参⼊しやすい 17 • インフラエンジニアがIaCでCDKを利⽤する場合、⼤抵の場合利⽤例の⼤多数を占める TypeScriptを採⽤する事になる • アプリ開発に取り組む際、TypeScriptの対応領域が幅広いため同じ⾔語で統⼀しやす く、結果TypeScriptの知識をそのまま活かせる • さらにAWSサービスのAmplifyやLambdaと組み合わせれば、さらにCDKプロジェクト の中でTypeScriptアプリケーションを完結できて相性が良い ◦ CDK + Lambda(Node.js)でバックエンドアプリケーションを作ったり ◦ CDK + Amplify(React.js)でフロントエンドアプリケーションを作ったり
18. TypeScriptを通してプログラミングの基本的な習慣を学べる 18 • 変数の型を考える習慣 ◦ 型定義を知る事で、「この変数にはどのような値が⼊るのか？」を意識できるよう になる • 変数スコープを絞る習慣 ◦ constとletの違いを知る事で、「この変数はどこまで使えるようにするべきか？」 を意識できるようになる • バグを先に潰す習慣 ◦ コードを動かす前にコンパイルエラーを表⽰できるので、まずバグを直してから動 かす事を意識できるようになる • エディタ補完を活⽤する習慣 ◦ タイプミスや⼿⼊⼒の⼿間を減らすために、候補から選んでコードを書く事を意識 できるようになる
19. TypeScript⾃体の需要が⾼まりつつある 19 • 幅広い開発要件に対応し、フルスタック開発を実現できる⾔語として注⽬されている ◦ フロントエンド開発では元から必須なので、UIを持つアプリケーションを作るなら 採⽤せざるをえない ◦ バックエンド開発もある程度成熟し始め、採⽤例を⾒かけるようになってきた • 最近流⾏しているAI駆動開発も、ファーストチョイスがTypeScriptとなりつつある ◦ フロントエンド+バックエンドを⼀緒に開発しようとすると、TypeScriptを⽤いて 開発⾔語を統⼀するのが⾮常に便利 ◦ 世の中にはTypeScriptのOSSが⼤量に公開されているため、AIの学習教材も豊富で 精度を向上させやすい
20. 今ならAI駆動開発もあるし、 CDKでTypeScriptさえ学べば アプリ開発も余裕...？ 20
21. 全然そんなことはない 21
22. CDKを経験した後に学ぶべき開発の主な知識 22 • ⼀般的なプログラミング作法 ◦ アルゴリズム/DRYの原則/関⼼の分離/エラーハンドリング⽅法/変数の命名規則/コ メントの書き⽅/etc… • アプリケーション側のセキュリティ ◦ ⼊⼒値の検証/認証‧認可の実装/SQLインジェクション対策/機密情報の管理/etc… • ソフトウェアアーキテクチャ ◦ フロントエンドではコンポーネント設計、バックエンドはDDDとクリーンアーキテ クチャが要になりやすい • テスト戦略 ◦ インフラはテスト仕様書による⼿動確認が多いが、アプリではテストコードによる ⾃動チェック(CI)が主となり⽂化⾃体が⼤きく違うので注意
23. アプリを作るだけならAI駆動開発で何とかなるかもしれないが、 そのアプリを問題起こさず運⽤するには開発知識が必要 23
24. まとめ
25. 最後に 25 • TypeScriptは様々な開発要件に対応できかつバグを発⽣ させにくくさせたすごい⾔語 • インフラエンジニアでもCDKを経験する事で⾃然と TypeScriptを学ぶ事になり、他の開発にも応⽤できる • とはいえ業務で本格的にアプリ開発する際は、ただ TypeScriptを学ぶだけでは知識が不⾜しがちなので注意
26. TypeScript開発は作れるモノの幅が広くて超絶⾯⽩いです！！！ 26