Web エンジニアが JavaScript で AI Agent を作る / JSConf JP 2025 sponsor session

Transcript

1. Web エンジニアが JavaScript で AI Agent を作る 2025-11-16 JSConf JP 2025 @izumin5210
2. @izumin5210 © LayerX Inc. whoami LayerX バクラク事業部 (2022-09 -) Platform Engineering 部 Enabling チーム Staff Software Engineer バックエンドや Web フロントエンドが専門です ISUCON14 4位 好きな AI SDK 6 の機能は callOptionsSchema
3. 今日話すこと © LayerX Inc. AI の活用 - Coding Agent のいい感じの使い方とか AI の開発 - プロダクトの AI 機能の開発 3
4. ゴール © LayerX Inc. AI Agent や LLM をプロダクトに組み込むことへの抵抗感をなくす そこにある技術的なチャレンジにワクワクしてもらう 4
5. AI Agent を使うだけでなく作る © LayerX Inc. 5
6. AI Agent 作ってる？ © LayerX Inc. AI Agent 使ってますか？ Coding Agent: Claude Code, Codex, GitHub Copilot, ... Deep Research とか AI Agent 作ってますか？ （Web Engineer だから / AI の専門スキルないから）といって見て見ぬふりをしてないか？ Prompt Engineering とか興味ないなあ… と見て見ぬふりをしてないか？ 僕はちょっとしてました 実際やってみると、これまでの延長線でもできること・挑戦すべきことが多い！ …というのを感じてもらうのが発表の目的 6
7. 今までの AI/機械学習と LLM との違い
8. AI Agent や LLM で何が変わるか モデルが REST API になる © LayerX Inc. モデルが巨大になったことで、自前で学習・ホストせず プロバイダがホストするモデルを REST API 経由で使うことが主流に ステートレス であり、JSON を投げたら JSON が返ってくる 見慣れた形式の API 8
9. AI Agent や LLM で何が変わるか モデルが REST API になる © LayerX Inc. 9
10. モデルが REST API になると？ © LayerX Inc. 機械学習周りのエコシステムへの依存度が下がり、 言語選択にある程度の自由度が出る Python でなくてもいい範囲が広がる JavaScript にも、 OpenAI Agents SDK や Vercel AI SDK といったライブラリ あるいは Mastra のようなフレームワークが登場 挙動の制御・最適化が 学習ではなく入力（コンテキスト） でなされるようになった 1つの REST API で様々なタスクに対応できる 従来の Web Backend/Frontend のフィールドで扱える範囲が広がっている 10
11. AI Agent を知る
12. AI Agent の定義 Agents, on the other hand, are systems where LLMs dynamically direct their own processes and tool usage, maintaining control over how they accomplish tasks. - Building effective agents * © LayerX Inc. * Anthropic, 2024, https://www.anthropic.com/engineering/building-effective-agents 12
13. AI Agent の振る舞い: Agent Loop © LayerX Inc. 13
14. © LayerX Inc. 14
15. © LayerX Inc. Tool(Function) Calling OpenAI, https://platform.openai.com/docs/guides/function-calling 15
16. AI Agent 実装を単純化すると… これだけ見ると 単純な JSON のやり取り でしかない © LayerX Inc. ステートレスな REST API にプロンプトを投げ、レスポンスを見るだけ レスポンスが「ツール実行指令」だったら、その通りに実行 続けてメッセージを投げるときは、 これまでのメッセージ履歴に追記 して コンテキストとして投げる 16
17. © LayerX Inc. HumanLayer, https://github.com/humanlayer/12-factor-agents/blob/d20c728/content/factor-12-stateless-reducer.md 17
18. Vercel AI SDK による簡単な Agent の例 https://ai-sdk.dev/docs/getting-started/nextjs-app-router
19. © LayerX Inc. 19
20. © LayerX Inc. 20
21. © LayerX Inc. 21
22. 実際に POST されるメッセージ配列の例 © LayerX Inc. 22
23. 確率的挙動という課題
24. LLM/AI Agent 特有の課題 © LayerX Inc. 同じ入力でも出力が変わる 内部の処理フローが実行ごとに異なる 「正解」が一意に定まらない 24
25. 確率的挙動に立ち向かう例 Web エンジニアに馴染みのある概念に関連付けてみていく © LayerX Inc. Observability テスト・評価 (Evals) 25
26. Observability 改善の例: Langfuse © LayerX Inc. LLM の呼び出しをトレース コスト・レイテンシ・トークン数を可視化 ツール呼び出しの履歴を記録 26
27. OpenTelemetry で計装できる © LayerX Inc. 27
28. © LayerX Inc. 28
29. © LayerX Inc. 29
30. Observability 改善の例: Langfuse © LayerX Inc. Langfuse のトレースからわかること 各ステップの実行時間 使用トークン数 ツール呼び出しの詳細 エラー発生箇所 APM ツール（DataDog, New Relic）と同じ感覚 参考: 安定したAIエージェント開発・運用を実現するLangfuse活用方法 30
31. テスト・評価の課題 確率的挙動をどうやって動作確認するのか？ © LayerX Inc. タスクが柔軟なことで入力も多様になり、どんな入力でも正常に動作する必要がある どうやって改善を回すか バージョンアップ（モデルの変更）の影響を推し量るには？ 出力が構造的でない場合、単純な assert で結果を検証することはできない 31
32. Evals (評価) テストの代わりに「評価」を行う © LayerX Inc. Input / Output の期待値を列挙（Parameterized Test 的） 結果を === で判断できないケースが多い LLM に評価させる: LLM-as-a-Judge Yes/No の判定 スコアリング (1-5点) 32
33. 簡単な Offline Eval の例: evalite © LayerX Inc. evalite ローカルで簡単に実行できる Vitest ライクな API データセット、タスク、スコアラーの3要素で構成 参考: Evaliteによるlocal nativeなLLM evals実行環境 33
34. © LayerX Inc. 構造化出力に対する Eval の例 34
35. Parameterized test (Table driven test) に似たかたちで評価を記述可能 © LayerX Inc. 構造化出力に対する Eval の例 35
36. TDD のようにデータ追加 → ロジック改善 の改善サイクルを回せる © LayerX Inc. 36
37. 構造化出力でない場合は LLM によってスコアを算出することも（LLM-as-a-Judge） © LayerX Inc. 37
38. Eval-driven Development 参考: 評価駆動開発（Eval-driven development） © LayerX Inc. 38
39. もちろん、確率的挙動の難しさはこれだけで制御できるわけではない。 そもそも難しさはこれだけじゃない…。 © LayerX Inc. 39
40. AI Agent 開発の 技術領域・技術的チャレンジ
41. Web Engineer の専門性が活きる領域 © LayerX Inc. 従来の延長線上にある課題: UI/UX → Long-running な処理、HITL 技術選定 → デファクトのフレームワークは（たぶん）まだない ワークフロー実装 → Durable Workflow アーキテクチャ → AI Agent のための Tool, Tool のためのアーキテクチャ 認証・認可 → B2B SaaS での AI Agent 認可 ... 新たな領域の課題 Context Engineering ... 41
42. UI/UX の課題 © LayerX Inc. Long-running な機能を、体験が悪くならないように提供するには？ 数秒〜数分かかる処理 バックグラウンド実行とステータス通知 最適な UI はチャットだけではない はず 例えば「ボタンを押すだけ」など、もっとラクに使える UI はないか あるいはイベントドリブンに勝手に動いてくれれば UI はそもそもなくせないか 参考: LangChain Blog: Introducing ambient agents HITL(Human-in-the-Loop) の体験 をどう設計するか タスクとインタラクションの設計が重要 42
43. デファクトのフレームワークは（たぶん）まだない © LayerX Inc. TypeScript で利用できるものでも有名なパッケージ・フレームワークがいくつかある Vercel AI SDK OpenAI Agents API mastra LangGraph.js ... 一方で、デファクトスタンダードと言えるものは存在しない 43
44. デファクトのフレームワークは（たぶん）まだない © LayerX Inc. 現状まだまだ AI Agent に関する様々な技術は発展途中である いま最適な抽象化だとしても、後から発見されたユースケースに対応できないかも e.g. 高度な Context Engineering を適用したい handoff など、高度な Agent 操作をしたい 単純なツール実行可否 yes/no を超えた HITL よって、現時点では抽象化を控えめにするモチベーションがある AI Agentフレームワークを使うべきなのか？ Ship AI recap: Agents, Workflows, and Python — w/ Vercel CTO Malte Ubl 44
45. デファクトのフレームワークは（たぶん）まだない © LayerX Inc. 逆に言えば、最先端を走っておけばここで覇権取れるチャンスも…？ 45
46. 耐久性のあるワークフロー実行 © LayerX Inc. Long-running な処理を確実に最後まで実行するのは意外と難しい サーバー再起動時にも処理を継続 リトライ・タイムアウト処理 ステート管理 HITL や外部システムからのイベントなど、 何らか別のイベントを待つ間はワークフローを中断したいこともある 46
47. 耐久性のあるワークフロー実行 © LayerX Inc. 耐久性(Durability)があり、中断・再開可能(Resumable)である ワークフロー実行基盤が必要 Temporal（※ 日時 API とは関係ない） Temporal Workflow で実現する Durable な AI Agent TemporalのDurableさを覗く Vercel Workflow 47
48. © LayerX Inc. 耐久性のあるワークフロー実行 - Temporal 48
49. © LayerX Inc. 耐久性のあるワークフロー実行 - Temporal 49
50. © LayerX Inc. 耐久性のあるワークフロー実行 - Vercel Workflow 50
51. © LayerX Inc. 耐久性のあるワークフロー実行 - Vercel Workflow 51
52. 耐久性のあるワークフロー実行 © LayerX Inc. Temporal, Vercel Workflow いずれも Durable な Workflow 実行をサポート 何らかの要因で処理が中断されても、そこから安全に再開できる 外部からのイベントを受ける（待ってる間は止まる）ようなワークフローも、 普通の関数のように記述できる ワークフローが1つの関数のように振る舞うので、状態管理も用意 52
53. Vercel Workflow の余談 © LayerX Inc. AI 関係なく、バックグラウンドジョブを簡潔に記述でき、 信頼性高く実行できる基盤としてアツい 最初期の技術選定では見落としがちかもしれないが、 プロダクト開発ではほぼ必須の要素 これをデファクトを備えているフレームワークは意外と少なく、 これが Next.js にインテグレーションしやすい形で出てきたのは大きい 53
54. Agent 向けのツールあるいは API 設計 A common error we’ve observed is tools that merely wrap existing software functionality or API endpoints—whether or not the tools are appropriate for agents. This is because agents have distinct “affordances” to traditional software—that is, they have different ways of perceiving the potential actions they can take with those tools - Writing effective tools for agents — with agents * © LayerX Inc. * Anthropic, 2025, https://www.anthropic.com/engineering/writing-tools-for-agents 54
55. Agent 向けのツールあるいは API 設計 AI Agent を構築する際、既存の API を薄くラップしたツールを作成するのは一つの方法です。特に、リソ ース指向の参照系 API であれば、一つの汎用的なツールで幅広いデータを取得できるため、一見すると理 にかなっています。 しかし、このアプローチは LLM にとって最適ではありませんでした。汎用的なツールを使うと、LLM はま ずデータを取得し、その結果を解釈してから次のアクションを推論するという多段階の思考を強いられま す。このプロセスが複雑になるほどエラーの可能性が高まり、さらに必要以上のデータを取得してコンテ キストウィンドウを圧迫するという問題も生じました。 - 申請作成 AI Agent の PoC での試行錯誤と学び * プロダクトで利用している API をただラップすればいいというものではない © LayerX Inc. * LayerX, 2025, https://tech.layerx.co.jp/entry/2025/09/19/191318 55
56. 認証・認可の課題 © LayerX Inc. 様々な Tool が接続され、プロダクト上のあらゆるリソースを操作可能な Agent に ユーザと同じ権限を与えてもいいのか B2B SaaS における AI Agent 向けの認可に向けた課題 IdP で中央集権的な認可の管理を実現できる(かもしれない) ID-JAG の紹介 56
57. 新たな問題領域 © LayerX Inc. 手触り感のあるContext Engineering バックテスト お客様が AI Agent 機能を安心して使えるようにするための、過去データに対する評価 AI Agentのビジネス価値を計るバックテスト基盤の構築 『AI Agentのビジネス価値を計るバックテスト基盤の構築』を支えるSnowflake上での任意時点のスナップショ ット取得を実現するデータパイプライン 57
58. ML/Data のような従来の専門技術が活きる課題 © LayerX Inc. 生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 AI Agent時代における「使えば使うほど賢くなるAI機能」の開発 LLMが苦手な麻雀点数計算問題生成タスクの精度を33%から90%に上げたMulti Agentの 力 Repeated Samplingを使ったLLM推論時スケーリングで麻雀点数計算問題生成タスクを 解くぞ！ Temporal Knowledge Graphで作る！時間変化するナレッジを扱うAI Agentの世界 58
59. ML/Data のような従来の専門技術が活きる課題 © LayerX Inc. AI明細仕訳機能におけるCodeAgentを用いたデータセット作成 Langfuse の Datasets 機能を利用した性能評価 Langfuse の Experiment Runner SDK を利用した AIエージェント機能の性能評価と実験 管理 59
60. などなど… © LayerX Inc. 60
61. AI Agent 開発の技術領域・技術的チャレンジ © LayerX Inc. Web Engineer の専門性が活きる領域 UI/UX, アーキテクチャ, Durable Workflow, 認証・認可 ... 新たな問題領域 Context Engineering ... ... 新しい技術的チャレンジが多数ある！ 61
62. まとめ LLM によって「できること」にどういう変化が起きたかや、 システム設計・アーキテクチャにどういう影響が起きるかを Web エンジニアも知っておくことは重要 © LayerX Inc. LLM の登場で、Backend / Web Frontend のエンジニアの専門領域から AI に触れやすくなる 一方で、自分たちの専門領域にも大きな変化・新たな技術的チャレンジが多数発生する 62
63. さらに学ぶためのリソース 各社が用意したドキュメントや、TypeScript による AI Agent 実装サンプルは意外と豊富 © LayerX Inc. What we learned building agents at Vercel AI SDK Cookbook OpenAI Cookbook 63
64. [宣伝] LayerX では AI Agent や JavaScript に関する記事を発信しています © LayerX Inc. https://tech.layerx.co.jp/ https://zenn.dev/layerx 64
65. #LayerX_AI_Agent_ ブログリレー やってます © LayerX Inc. 65
66. 技術書典にも出しています。 370ページ超の超大作！ © LayerX Inc. 66
67. JSConf JP 2025 にブースも出してます 実際の ADR と Design Doc を展示しています 今日の話を詳しく聞きたい / 普通にフロントエンドの話を聞きたい方もぜひ！ © LayerX Inc. 67