Slide 1

Slide 1 text

© 2025 Bitkey Inc. Agentic Coding と 山登り と TypeScript 〜体系的に考えてみよう!〜 株式会社ビットキー 佐藤拓人 2025/05/27

Slide 2

Slide 2 text

© 2025 Bitkey Inc. Agentic Coding と 山登り と TypeScript 〜体系的に考えてみよう!〜 株式会社ビットキー 佐藤拓人 2025/05/27

Slide 3

Slide 3 text

3 Copyright © 2025 Bitkey Inc. All right reserved. 目次 1. Agentic Coding ? 2. 「解空間」と「Reconciliation Loop」 3. 登山ルートを考えてみる 4. 地図を活用してみる 5. シャトルバスを運行してみる 6. まとめ

Slide 4

Slide 4 text

4 Copyright © 2025 Bitkey Inc. All right reserved. 自己紹介 佐藤 拓人 Sato Takuto 2015.04 2019.05 2020.01 大学(建築学専攻)卒業後、 株式会社ワークスアプリケーションズに入社 会計システムのソフトウェア開発を担当 特に財務会計の仕訳関連 ビットキーへ参画 ECサイトの開発 / 保守、社内システムの開発 TaKuTyの開発 今のHome事業の前身となるResidenceチームに配属 スマートロックを扱う管理画面やバックエンド、スマ ホアプリの開発に従事 Now Home事業のプロダクト責任者 複雑な事象を読み解いて構造化し、抽象化 / 汎用化で きるように設計し、低コストで多くの価値をだせる開 発をすることを好む

Slide 5

Slide 5 text

5 Copyright © 2025 Bitkey Inc. All right reserved. 自己紹介 佐藤 拓人 Sato Takuto ← TSKaigi 2024での写真

Slide 6

Slide 6 text

6 Copyright © 2025 Bitkey Inc. All right reserved. 1. Agentic Coding?

Slide 7

Slide 7 text

7 Copyright © 2025 Bitkey Inc. All right reserved. 1. Agentic Coding? Agentic Coding ? Agentic Coding とは? AIエージェントが自律的にソフトウェア開発を行う手法やアプローチ

Slide 8

Slide 8 text

8 Copyright © 2025 Bitkey Inc. All right reserved. 1. Agentic Coding? TSKaigi 2025 TSKaigi 2025 でも AIに関する発表 / ブース がありました!

Slide 9

Slide 9 text

9 Copyright © 2025 Bitkey Inc. All right reserved. AI Coding Agent Enablement in TypeScript 1. Agentic Coding?

Slide 10

Slide 10 text

10 Copyright © 2025 Bitkey Inc. All right reserved. AI Coding Agent Enablement in TypeScript 1. Agentic Coding?

Slide 11

Slide 11 text

11 Copyright © 2025 Bitkey Inc. All right reserved. Agentic Coding とは Reconciliation Loop である 1. Agentic Coding?

Slide 12

Slide 12 text

12 Copyright © 2025 Bitkey Inc. All right reserved. Agentic Coding とは Reconciliation Loop である 1. Agentic Coding?

Slide 13

Slide 13 text

13 Copyright © 2025 Bitkey Inc. All right reserved. つまり... 解空間? システム的に押し戻す? Reconciliation Loop? 評価関数? 1. Agentic Coding?

Slide 14

Slide 14 text

14 Copyright © 2025 Bitkey Inc. All right reserved. 1. Agentic Codingを促進するためには? つまり... 「山登り」だ!!

Slide 15

Slide 15 text

15 Copyright © 2025 Bitkey Inc. All right reserved. 2. 「解空間」と「Reconciliation Loop」

Slide 16

Slide 16 text

16 Copyright © 2025 Bitkey Inc. All right reserved. 2. 「解空間」と「Reconciliation Loop」 どうゆうことか紐解いてみよう!

Slide 17

Slide 17 text

17 Copyright © 2025 Bitkey Inc. All right reserved. 2. 「解空間」と「Reconciliation Loop」 どうゆうことか紐解いてみよう!

Slide 18

Slide 18 text

18 Copyright © 2025 Bitkey Inc. All right reserved. 2. 「解空間」と「Reconciliation Loop」 どうゆうことか紐解いてみよう!

Slide 19

Slide 19 text

19 Copyright © 2025 Bitkey Inc. All right reserved. 2. 「解空間」と「Reconciliation Loop」 どうゆうことか紐解いてみよう!

Slide 20

Slide 20 text

20 Copyright © 2025 Bitkey Inc. All right reserved. 2. 「解空間」と「Reconciliation Loop」 どうゆうことか紐解いてみよう!

Slide 21

Slide 21 text

21 Copyright © 2025 Bitkey Inc. All right reserved. 2. 「解空間」と「Reconciliation Loop」 どうゆうことか紐解いてみよう!

Slide 22

Slide 22 text

22 Copyright © 2025 Bitkey Inc. All right reserved. 2. 「解空間」と「Reconciliation Loop」 どうゆうことか紐解いてみよう!

Slide 23

Slide 23 text

23 Copyright © 2025 Bitkey Inc. All right reserved. 重要な観点 1. 理想の状態の定義を狭める まとめ 2. 「解空間」と「Reconciliation Loop」

Slide 24

Slide 24 text

24 Copyright © 2025 Bitkey Inc. All right reserved. 重要な観点 1. 理想の状態の定義を狭める 2. 成果物が理想か否か判断できる まとめ 2. 「解空間」と「Reconciliation Loop」

Slide 25

Slide 25 text

25 Copyright © 2025 Bitkey Inc. All right reserved. 重要な観点 1. 理想の状態の定義を狭める 2. 成果物が理想か否か判断できる 3. 改善の方向性を適切に判断できる まとめ 2. 「解空間」と「Reconciliation Loop」

Slide 26

Slide 26 text

26 Copyright © 2025 Bitkey Inc. All right reserved. まとめ 重要な観点 1. 理想の状態の定義を狭める 2. 成果物が理想か否か判断できる 3. 改善の方向性を適切に判断できる (方向性がズレているとロスが大きい) (矢印の長さが不適切だとロスが大きい) 2. 「解空間」と「Reconciliation Loop」

Slide 27

Slide 27 text

27 Copyright © 2025 Bitkey Inc. All right reserved. 「解空間」x「Reconciliation Loop」 はなんとなくわかった まとめ 2. 「解空間」と「Reconciliation Loop」

Slide 28

Slide 28 text

28 Copyright © 2025 Bitkey Inc. All right reserved. 1. Agentic Codingを促進するためには? でも... 「解空間」x「Reconciliation Loop」 はなんとなくわかった …で、どうすればいいの?

Slide 29

Slide 29 text

29 Copyright © 2025 Bitkey Inc. All right reserved. そうだ! 「山登り」だ!! 2. 「解空間」と「Reconciliation Loop」

Slide 30

Slide 30 text

30 Copyright © 2025 Bitkey Inc. All right reserved. そうだ! 「山登り」だ!! Agentic Codingを「山登り」に例えて もう少し要素分解してみます 2. 「解空間」と「Reconciliation Loop」

Slide 31

Slide 31 text

31 Copyright © 2025 Bitkey Inc. All right reserved. 山登りの要素 次の3つの要素で説明できる 1. 登山ルート 2. 地図の活用 3. シャトルバスの運行 2. 「解空間」と「Reconciliation Loop」

Slide 32

Slide 32 text

32 Copyright © 2025 Bitkey Inc. All right reserved. 3. 登山ルートを考えてみる

Slide 33

Slide 33 text

33 Copyright © 2025 Bitkey Inc. All right reserved. ・指定の標高以上を「理想 (=解空間)」と考える ・より高い標高に遷移するために改善を繰り返す ・指定の標高以上にたどり着いた時点で完了と判断する 3. 登山ルートを考えてみる 登山ルートで考えてみるとは?

Slide 34

Slide 34 text

34 Copyright © 2025 Bitkey Inc. All right reserved. この「山登り」の例えに対して どのような「登山ルート」がより好ましいかという観点で考えてみる 3. 登山ルートを考えてみる 登山ルートで考えてみるとは?

Slide 35

Slide 35 text

35 Copyright © 2025 Bitkey Inc. All right reserved.  前提1: 山の全体を俯瞰的に判断することはできない                      常に限られた視界(コンテキスト)のなかで、進む方向を判断する必要がある 3. 登山ルートを考えてみる 登山ルートで考えてみるとは?

Slide 36

Slide 36 text

36 Copyright © 2025 Bitkey Inc. All right reserved. 凹凸が1つしかない山であれば簡単に登頂することができる 3. 登山ルートを考えてみる 登山ルートで考えてみるとは?

Slide 37

Slide 37 text

37 Copyright © 2025 Bitkey Inc. All right reserved. 凹凸が1つしかない山であれば簡単に登頂することができる ・一般的なドメイン / アルゴリズム / 命名 ・一般的なアーキテクチャ …で構成される実装 ex) テトリスなど 3. 登山ルートを考えてみる 登山ルートで考えてみるとは?

Slide 38

Slide 38 text

38 Copyright © 2025 Bitkey Inc. All right reserved. 一方で凹凸が複数ある場合には難易度が高くなる 3. 登山ルートを考えてみる 登山ルートで考えてみるとは?

Slide 39

Slide 39 text

39 Copyright © 2025 Bitkey Inc. All right reserved. 狭い視野(コンテキスト)ではどちらに進むべきか 適切に判断することができないからである 3. 登山ルートを考えてみる 登山ルートで考えてみるとは?

Slide 40

Slide 40 text

40 Copyright © 2025 Bitkey Inc. All right reserved. 一方で凹凸が複数ある場合には難易度が高くなる ・固有のドメイン / 暗黙的な前提 ・カスタマイズされたアーキテクチャや実装パターン ・異なる実装方針が混在する場合 ・条件によっては参照してはいけないファイル …などがあるほど凹凸は激しくなる 3. 登山ルートを考えてみる 登山ルートで考えてみるとは?

Slide 41

Slide 41 text

41 Copyright © 2025 Bitkey Inc. All right reserved. 前提2: 周囲を散策することで視界を広げることができ どちらに進むべきかをより高い確度で判断できるようになる 3. 登山ルートを考えてみる 登山ルートで考えてみるとは?

Slide 42

Slide 42 text

42 Copyright © 2025 Bitkey Inc. All right reserved. 前提2: 周囲を散策することで視界を広げることができ どちらに進むべきかをより高い確度で判断できるようになる 3. 登山ルートを考えてみる 登山ルートで考えてみるとは?

Slide 43

Slide 43 text

43 Copyright © 2025 Bitkey Inc. All right reserved. 前提2: 周囲を散策することで視界を広げることができ どちらに進むべきかをより高い確度で判断できるようになる ・Build Error ・Lint Error ・テスト …などシステム的なチェック機構があるほど視界を広げやすい 3. 登山ルートを考えてみる 登山ルートで考えてみるとは?

Slide 44

Slide 44 text

44 Copyright © 2025 Bitkey Inc. All right reserved. 凹凸が複数あっても小刻みであれば 周囲を散策することで山頂まで確実に辿り着くことができる 3. 登山ルートを考えてみる 登山ルートで考えてみるとは?

Slide 45

Slide 45 text

45 Copyright © 2025 Bitkey Inc. All right reserved. 凹凸が複数あっても小刻みであれば 周囲を散策することで山頂まで確実に辿り着くことができる ・全体的に整合性のとれた設計思想 +    ・Build / Lint / テスト のシステム的なチェック 3. 登山ルートを考えてみる 登山ルートで考えてみるとは?

Slide 46

Slide 46 text

46 Copyright © 2025 Bitkey Inc. All right reserved. 1つ1つの凹凸が大きいと散策を駆使しても山頂に辿り着けない 3. 登山ルートを考えてみる 登山ルートで考えてみるとは?

Slide 47

Slide 47 text

47 Copyright © 2025 Bitkey Inc. All right reserved. 1つ1つの凹凸が大きいと散策を駆使しても山頂に辿り着けない ・不要なファイルがが「ある」状態 ・複数の異なる設計方針が混在している状態 3. 登山ルートを考えてみる 登山ルートで考えてみるとは?

Slide 48

Slide 48 text

48 Copyright © 2025 Bitkey Inc. All right reserved. 凹凸が緩やかすぎる範囲がある場合も山頂に辿り着けない 3. 登山ルートを考えてみる 登山ルートで考えてみるとは?

Slide 49

Slide 49 text

49 Copyright © 2025 Bitkey Inc. All right reserved. 凹凸が緩やかすぎる範囲がある場合も山頂に辿り着けない ・設計思想が明瞭でない状態 3. 登山ルートを考えてみる 登山ルートで考えてみるとは?

Slide 50

Slide 50 text

50 Copyright © 2025 Bitkey Inc. All right reserved. 実現したいこと 1. 凹凸をできるだけ少なく / 小刻みにする ・できるだけ一般的な手法に則る ・全体的に整合性のとれた設計思想とする 2. 周囲を散策するための手段を用意する ・Build / Lint のシステム的なチェック ・カスタムLint ・Type First ・自動テスト ・BDD / TDD ・全体的に整合性のとれた設計思想 +    ・Build / Lint / テスト のシステム的なチェック 3. 登山ルートを考えてみる まとめ

Slide 51

Slide 51 text

51 Copyright © 2025 Bitkey Inc. All right reserved. 避けるべきこと 1. 大きな(不要な)凹凸を作らないようにする ・不要なファイルは除去する ・複数の異なる設計思想が混在しないようにする 2. 凹凸が極端にない領域を作らないようにする ・設計思想 / 実装方針が明瞭な状態とする ・不要なファイルがが「ある」状態 ・複数の異なる設計方針が混在している状態 ・設計思想が明瞭でない状態 3. 登山ルートを考えてみる まとめ

Slide 52

Slide 52 text

52 Copyright © 2025 Bitkey Inc. All right reserved. 4. 地図を活用してみる

Slide 53

Slide 53 text

53 Copyright © 2025 Bitkey Inc. All right reserved. 前提3: 限られた視界で、判断できない場合でも...地図を使うことができる!! 4. 地図を活用してみる 地図を活用してみるとは?

Slide 54

Slide 54 text

54 Copyright © 2025 Bitkey Inc. All right reserved. 前提4: ただし地図を活用するためには以下が必要 1. 精緻で適切な縮尺の地図 2. 周囲の情報から現在地と自身の方角を判断可能 4. 地図を活用してみる 地図を活用してみるとは?

Slide 55

Slide 55 text

55 Copyright © 2025 Bitkey Inc. All right reserved. 以下が揃って初めて、進むべき方向を判断することができる 1. 精緻で適切な縮尺の地図 2. 周囲の情報から現在地と自身の方角を判断可能 4. 地図を活用してみる 地図を活用してみるとは?

Slide 56

Slide 56 text

56 Copyright © 2025 Bitkey Inc. All right reserved. 以下が揃って初めて、進むべき方向を判断することができる 1. 精緻で適切な縮尺の地図 2. 周囲の情報から現在地と自身の方角を判断可能 精緻で適切な縮尺の地図 ・正確で適量なルール / ドキュメントなどの情報 ・適切に境界が分割された状態 現在地と自身の方角を判断可能 ・重要な情報が明示的に宣言されている ・状態などの状況が容易に観測可能 4. 地図を活用してみる 地図を活用してみるとは?

Slide 57

Slide 57 text

57 Copyright © 2025 Bitkey Inc. All right reserved. 実現したいこと 1. 精緻で適切な縮尺の地図 ・正確で適量なルール / ドキュメントなどの情報 ・適切に境界が分割された状態 ・DDD ・BFF / モジュラーモノリス / マイクロサービス 2. 現在地と自身の方角を判断可能 ・情報の痕跡を明示的に残す ・Event Sourcing ・Result型 (エラーを値として扱う、 Effect推し!) ・状態の推測を容易化する ・Immutable 4. 地図を活用してみる まとめ

Slide 58

Slide 58 text

58 Copyright © 2025 Bitkey Inc. All right reserved. 5. シャトルバスを運行してみる

Slide 59

Slide 59 text

59 Copyright © 2025 Bitkey Inc. All right reserved. シャトルバスで山の中腹まで連れて行ってくれるルートを開拓する! 登り始めやすい位置まで運んでくれることで成果物の安定性向上が期待できる 5. シャトルバスを運行してみる シャトルバスを運行してみるとは?

Slide 60

Slide 60 text

60 Copyright © 2025 Bitkey Inc. All right reserved. シャトルバスで山の中腹まで連れて行ってくれるルートを開拓する! 登り始めやすい位置まで運んでくれることで成果物の安定性向上が期待できる AIの成果物のボトムアップ → 多少やんちゃしても影響を最小限とする土壌整備 5. シャトルバスを運行してみる シャトルバスを運行してみるとは?

Slide 61

Slide 61 text

61 Copyright © 2025 Bitkey Inc. All right reserved. 実現したいこと 1. 登り始めやすい位置まで運んでくれる ・やんちゃしても影響を最小限とする土壌整備 ・Always-Valid Domain Model ・クリーンアーキテクチャ / オニオンアーキテクチャ ..etc ・BFF / マイクロサービス ・Deno AIの成果物のボトムアップ → 多少やんちゃしても影響を最小限とする土壌整備 5. シャトルバスを運行してみる まとめ

Slide 62

Slide 62 text

62 Copyright © 2025 Bitkey Inc. All right reserved. 6. まとめ

Slide 63

Slide 63 text

63 Copyright © 2025 Bitkey Inc. All right reserved. 6. まとめ つまり... 結論 

Slide 64

Slide 64 text

64 Copyright © 2025 Bitkey Inc. All right reserved. 富士山が最強!! 6. まとめ つまり...

Slide 65

Slide 65 text

65 Copyright © 2025 Bitkey Inc. All right reserved. 山登りの例え 山登りに例えてみるとわかりやすい!...かも 要素としては大きく以下の3つ 1. 登山ルート 2. 地図の活用 3. シャトルバスの運行 6. まとめ

Slide 66

Slide 66 text

66 Copyright © 2025 Bitkey Inc. All right reserved. 実現したいこと 1. 凹凸をできるだけ少なく / 小刻みにする ・できるだけ一般的な手法に則る ・全体的に整合性のとれた設計思想とする 2. 周囲を散策するための手段を用意する ・Build / Lint のシステム的なチェック ・カスタムLint ・Type First ・自動テスト ・BDD / TDD ・全体的に整合性のとれた設計思想 +    ・Build / Lint / テスト のシステム的なチェック 登山ルート 6. まとめ

Slide 67

Slide 67 text

67 Copyright © 2025 Bitkey Inc. All right reserved. 避けるべきこと 1. 大きな(不要な)凹凸を作らないようにする ・不要なファイルは除去する ・複数の異なる設計思想が混在しないようにする 2. 凹凸が極端にない領域を作らないようにする ・設計思想 / 実装方針が明瞭な状態とする ・不要なファイルがが「ある」状態 ・複数の異なる設計方針が混在している状態 ・設計思想が明瞭でない状態 登山ルート 6. まとめ

Slide 68

Slide 68 text

68 Copyright © 2025 Bitkey Inc. All right reserved. 実現したいこと 1. 精緻で適切な縮尺の地図 ・正確で適量なルール / ドキュメントなどの情報 ・適切に境界が分割された状態 ・DDD ・BFF / モジュラーモノリス / マイクロサービス 2. 現在地と自身の方角を判断可能 ・情報の痕跡を明示的に残す ・Event Sourcing ・Result型 (エラーを値として扱う、 Effect推し!) ・状態の推測を容易化する ・Immutable 地図の活用 6. まとめ

Slide 69

Slide 69 text

69 Copyright © 2025 Bitkey Inc. All right reserved. 実現したいこと 1. 登り始めやすい位置まで運んでくれる ・やんちゃしても影響を最小限とする土壌整備 ・Always-Valid Domain Model ・クリーンアーキテクチャ / オニオンアーキテクチャ ..etc ・BFF / マイクロサービス ・Deno AIの成果物のボトムアップ → 多少やんちゃしても影響を最小限とする土壌整備 lシャトルバス 6. まとめ

Slide 70

Slide 70 text

70 End of File Copyright © 2025 Bitkey Inc. All right reserved.