Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Agentic Coding と 山登り と TypeScript〜体系的に考えてみよう!〜/...

Agentic Coding と 山登り と TypeScript〜体系的に考えてみよう!〜/Agentic Coding, Mountain Climbing and TypeScript~Let's think systematically!~

登壇者名:佐藤 拓人
登壇したイベントタイトル:TSKaigi 2025 After Night 〜セッションおかわりの会!〜
登壇したイベントのURL:https://bitkey.connpass.com/event/351174/

More Decks by 株式会社ビットキー / Bitkey Inc.

Transcript

  1. © 2025 Bitkey Inc. Agentic Coding と 山登り と TypeScript

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

    〜体系的に考えてみよう!〜 株式会社ビットキー 佐藤拓人 2025/05/27
  3. 3 Copyright © 2025 Bitkey Inc. All right reserved. 目次

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

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

    佐藤 拓人 Sato Takuto ← TSKaigi 2024での写真
  6. 7 Copyright © 2025 Bitkey Inc. All right reserved. 1.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    次の3つの要素で説明できる 1. 登山ルート 2. 地図の活用 3. シャトルバスの運行 2. 「解空間」と「Reconciliation Loop」
  31. 33 Copyright © 2025 Bitkey Inc. All right reserved. ・指定の標高以上を「理想

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

    どのような「登山ルート」がより好ましいかという観点で考えてみる 3. 登山ルートを考えてみる 登山ルートで考えてみるとは?
  33. 35 Copyright © 2025 Bitkey Inc. All right reserved.  前提1:

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

    ・一般的なドメイン / アルゴリズム / 命名 ・一般的なアーキテクチャ …で構成される実装 ex) テトリスなど 3. 登山ルートを考えてみる 登山ルートで考えてみるとは?
  35. 38 Copyright © 2025 Bitkey Inc. All right reserved. 一方で凹凸が複数ある場合には難易度が高くなる

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

    適切に判断することができないからである 3. 登山ルートを考えてみる 登山ルートで考えてみるとは?
  37. 40 Copyright © 2025 Bitkey Inc. All right reserved. 一方で凹凸が複数ある場合には難易度が高くなる

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

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

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

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

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

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

    ・不要なファイルがが「ある」状態 ・複数の異なる設計方針が混在している状態 3. 登山ルートを考えてみる 登山ルートで考えてみるとは?
  44. 49 Copyright © 2025 Bitkey Inc. All right reserved. 凹凸が緩やかすぎる範囲がある場合も山頂に辿り着けない

    ・設計思想が明瞭でない状態 3. 登山ルートを考えてみる 登山ルートで考えてみるとは?
  45. 50 Copyright © 2025 Bitkey Inc. All right reserved. 実現したいこと

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

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

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

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

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

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

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

    シャトルバスを運行してみる
  53. 59 Copyright © 2025 Bitkey Inc. All right reserved. シャトルバスで山の中腹まで連れて行ってくれるルートを開拓する!

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

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

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

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

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

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

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

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