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

by izumin5210

Slide 1

Slide 1 text

Web エンジニアが JavaScript で AI Agent を作る 2025-11-16 JSConf JP 2025 @izumin5210

Slide 2

Slide 2 text

@izumin5210 © LayerX Inc. whoami LayerX バクラク事業部 (2022-09 -) Platform Engineering 部 Enabling チーム Staff Software Engineer バックエンドや Web フロントエンドが専門です ISUCON14 4位好きな AI SDK 6 の機能は callOptionsSchema

Slide 3

Slide 3 text

今日話すこと © LayerX Inc. AI の活用 - Coding Agent のいい感じの使い方とか AI の開発 - プロダクトの AI 機能の開発 3

Slide 4

Slide 4 text

ゴール © LayerX Inc. AI Agent や LLM をプロダクトに組み込むことへの抵抗感をなくすそこにある技術的なチャレンジにワクワクしてもらう 4

Slide 5

Slide 5 text

AI Agent を使うだけでなく作る © LayerX Inc. 5

Slide 6

Slide 6 text

AI Agent 作ってる？ © LayerX Inc. AI Agent 使ってますか？ Coding Agent: Claude Code, Codex, GitHub Copilot, ... Deep Research とか AI Agent 作ってますか？（Web Engineer だから / AI の専門スキルないから）といって見て見ぬふりをしてないか？ Prompt Engineering とか興味ないなあ… と見て見ぬふりをしてないか？僕はちょっとしてました実際やってみると、これまでの延長線でもできること・挑戦すべきことが多い！ …というのを感じてもらうのが発表の目的 6

Slide 7

Slide 7 text

今までの AI/機械学習と LLM との違い

Slide 8

Slide 8 text

AI Agent や LLM で何が変わるかモデルが REST API になる © LayerX Inc. モデルが巨大になったことで、自前で学習・ホストせずプロバイダがホストするモデルを REST API 経由で使うことが主流にステートレスであり、JSON を投げたら JSON が返ってくる見慣れた形式の API 8

Slide 9

Slide 9 text

AI Agent や LLM で何が変わるかモデルが REST API になる © LayerX Inc. 9

Slide 10

Slide 10 text

モデルが REST API になると？ © LayerX Inc. 機械学習周りのエコシステムへの依存度が下がり、言語選択にある程度の自由度が出る Python でなくてもいい範囲が広がる JavaScript にも、 OpenAI Agents SDK や Vercel AI SDK といったライブラリあるいは Mastra のようなフレームワークが登場挙動の制御・最適化が学習ではなく入力（コンテキスト）でなされるようになった 1つの REST API で様々なタスクに対応できる従来の Web Backend/Frontend のフィールドで扱える範囲が広がっている 10

Slide 11

Slide 11 text

AI Agent を知る

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

AI Agent の振る舞い: Agent Loop © LayerX Inc. 13

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

AI Agent 実装を単純化すると… これだけ見ると単純な JSON のやり取りでしかない © LayerX Inc. ステートレスな REST API にプロンプトを投げ、レスポンスを見るだけレスポンスが「ツール実行指令」だったら、その通りに実行続けてメッセージを投げるときは、これまでのメッセージ履歴に追記してコンテキストとして投げる 16

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Vercel AI SDK による簡単な Agent の例 https://ai-sdk.dev/docs/getting-started/nextjs-app-router

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

実際に POST されるメッセージ配列の例 © LayerX Inc. 22

Slide 23

Slide 23 text

確率的挙動という課題

Slide 24

Slide 24 text

LLM/AI Agent 特有の課題 © LayerX Inc. 同じ入力でも出力が変わる内部の処理フローが実行ごとに異なる「正解」が一意に定まらない 24

Slide 25

Slide 25 text

確率的挙動に立ち向かう例 Web エンジニアに馴染みのある概念に関連付けてみていく © LayerX Inc. Observability テスト・評価 (Evals) 25

Slide 26

Slide 26 text

Observability 改善の例: Langfuse © LayerX Inc. LLM の呼び出しをトレースコスト・レイテンシ・トークン数を可視化ツール呼び出しの履歴を記録 26

Slide 27

Slide 27 text

OpenTelemetry で計装できる © LayerX Inc. 27

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Observability 改善の例: Langfuse © LayerX Inc. Langfuse のトレースからわかること各ステップの実行時間使用トークン数ツール呼び出しの詳細エラー発生箇所 APM ツール（DataDog, New Relic）と同じ感覚参考: 安定したAIエージェント開発・運用を実現するLangfuse活用方法 30

Slide 31

Slide 31 text

テスト・評価の課題確率的挙動をどうやって動作確認するのか？ © LayerX Inc. タスクが柔軟なことで入力も多様になり、どんな入力でも正常に動作する必要があるどうやって改善を回すかバージョンアップ（モデルの変更）の影響を推し量るには？出力が構造的でない場合、単純な assert で結果を検証することはできない 31

Slide 32

Slide 32 text

Evals (評価) テストの代わりに「評価」を行う © LayerX Inc. Input / Output の期待値を列挙（Parameterized Test 的）結果を === で判断できないケースが多い LLM に評価させる: LLM-as-a-Judge Yes/No の判定スコアリング (1-5点) 32

Slide 33

Slide 33 text

簡単な Offline Eval の例: evalite © LayerX Inc. evalite ローカルで簡単に実行できる Vitest ライクな API データセット、タスク、スコアラーの3要素で構成参考: Evaliteによるlocal nativeなLLM evals実行環境 33

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Parameterized test (Table driven test) に似たかたちで評価を記述可能 © LayerX Inc. 構造化出力に対する Eval の例 35

Slide 36

Slide 36 text

TDD のようにデータ追加 → ロジック改善の改善サイクルを回せる © LayerX Inc. 36

Slide 37

Slide 37 text

構造化出力でない場合は LLM によってスコアを算出することも（LLM-as-a-Judge） © LayerX Inc. 37

Slide 38

Slide 38 text

Eval-driven Development 参考: 評価駆動開発（Eval-driven development） © LayerX Inc. 38

Slide 39

Slide 39 text

もちろん、確率的挙動の難しさはこれだけで制御できるわけではない。そもそも難しさはこれだけじゃない…。 © LayerX Inc. 39

Slide 40

Slide 40 text

AI Agent 開発の技術領域・技術的チャレンジ

Slide 41

Slide 41 text

Web Engineer の専門性が活きる領域 © LayerX Inc. 従来の延長線上にある課題: UI/UX → Long-running な処理、HITL 技術選定 → デファクトのフレームワークは（たぶん）まだないワークフロー実装 → Durable Workflow アーキテクチャ → AI Agent のための Tool, Tool のためのアーキテクチャ認証・認可 → B2B SaaS での AI Agent 認可 ... 新たな領域の課題 Context Engineering ... 41

Slide 42

Slide 42 text

UI/UX の課題 © LayerX Inc. Long-running な機能を、体験が悪くならないように提供するには？数秒〜数分かかる処理バックグラウンド実行とステータス通知最適な UI はチャットだけではないはず例えば「ボタンを押すだけ」など、もっとラクに使える UI はないかあるいはイベントドリブンに勝手に動いてくれれば UI はそもそもなくせないか参考: LangChain Blog: Introducing ambient agents HITL(Human-in-the-Loop) の体験をどう設計するかタスクとインタラクションの設計が重要 42

Slide 43

Slide 43 text

デファクトのフレームワークは（たぶん）まだない © LayerX Inc. TypeScript で利用できるものでも有名なパッケージ・フレームワークがいくつかある Vercel AI SDK OpenAI Agents API mastra LangGraph.js ... 一方で、デファクトスタンダードと言えるものは存在しない 43

Slide 44

Slide 44 text

デファクトのフレームワークは（たぶん）まだない © 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

Slide 45

Slide 45 text

デファクトのフレームワークは（たぶん）まだない © LayerX Inc. 逆に言えば、最先端を走っておけばここで覇権取れるチャンスも…？ 45

Slide 46

Slide 46 text

耐久性のあるワークフロー実行 © LayerX Inc. Long-running な処理を確実に最後まで実行するのは意外と難しいサーバー再起動時にも処理を継続リトライ・タイムアウト処理ステート管理 HITL や外部システムからのイベントなど、何らか別のイベントを待つ間はワークフローを中断したいこともある 46

Slide 47

Slide 47 text

耐久性のあるワークフロー実行 © LayerX Inc. 耐久性(Durability)があり、中断・再開可能(Resumable)であるワークフロー実行基盤が必要 Temporal（※ 日時 API とは関係ない） Temporal Workflow で実現する Durable な AI Agent TemporalのDurableさを覗く Vercel Workflow 47

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Slide 51

Slide 51 text

Slide 52

Slide 52 text

耐久性のあるワークフロー実行 © LayerX Inc. Temporal, Vercel Workflow いずれも Durable な Workflow 実行をサポート何らかの要因で処理が中断されても、そこから安全に再開できる外部からのイベントを受ける（待ってる間は止まる）ようなワークフローも、普通の関数のように記述できるワークフローが1つの関数のように振る舞うので、状態管理も用意 52

Slide 53

Slide 53 text

Vercel Workflow の余談 © LayerX Inc. AI 関係なく、バックグラウンドジョブを簡潔に記述でき、信頼性高く実行できる基盤としてアツい最初期の技術選定では見落としがちかもしれないが、プロダクト開発ではほぼ必須の要素これをデファクトを備えているフレームワークは意外と少なく、これが Next.js にインテグレーションしやすい形で出てきたのは大きい 53

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

認証・認可の課題 © LayerX Inc. 様々な Tool が接続され、プロダクト上のあらゆるリソースを操作可能な Agent にユーザと同じ権限を与えてもいいのか B2B SaaS における AI Agent 向けの認可に向けた課題 IdP で中央集権的な認可の管理を実現できる(かもしれない) ID-JAG の紹介 56

Slide 57

Slide 57 text

新たな問題領域 © LayerX Inc. 手触り感のあるContext Engineering バックテストお客様が AI Agent 機能を安心して使えるようにするための、過去データに対する評価 AI Agentのビジネス価値を計るバックテスト基盤の構築『AI Agentのビジネス価値を計るバックテスト基盤の構築』を支えるSnowflake上での任意時点のスナップショット取得を実現するデータパイプライン 57

Slide 58

Slide 58 text

ML/Data のような従来の専門技術が活きる課題 © LayerX Inc. 生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 AI Agent時代における「使えば使うほど賢くなるAI機能」の開発 LLMが苦手な麻雀点数計算問題生成タスクの精度を33%から90%に上げたMulti Agentの力 Repeated Samplingを使ったLLM推論時スケーリングで麻雀点数計算問題生成タスクを解くぞ！ Temporal Knowledge Graphで作る！時間変化するナレッジを扱うAI Agentの世界 58

Slide 59

Slide 59 text

ML/Data のような従来の専門技術が活きる課題 © LayerX Inc. AI明細仕訳機能におけるCodeAgentを用いたデータセット作成 Langfuse の Datasets 機能を利用した性能評価 Langfuse の Experiment Runner SDK を利用した AIエージェント機能の性能評価と実験管理 59

Slide 60

Slide 60 text

Slide 61

Slide 61 text

AI Agent 開発の技術領域・技術的チャレンジ © LayerX Inc. Web Engineer の専門性が活きる領域 UI/UX, アーキテクチャ, Durable Workflow, 認証・認可 ... 新たな問題領域 Context Engineering ... ... 新しい技術的チャレンジが多数ある！ 61

Slide 62

Slide 62 text

まとめ LLM によって「できること」にどういう変化が起きたかや、システム設計・アーキテクチャにどういう影響が起きるかを Web エンジニアも知っておくことは重要 © LayerX Inc. LLM の登場で、Backend / Web Frontend のエンジニアの専門領域から AI に触れやすくなる一方で、自分たちの専門領域にも大きな変化・新たな技術的チャレンジが多数発生する 62

Slide 63

Slide 63 text

さらに学ぶためのリソース各社が用意したドキュメントや、TypeScript による AI Agent 実装サンプルは意外と豊富 © LayerX Inc. What we learned building agents at Vercel AI SDK Cookbook OpenAI Cookbook 63