自律型エージェントの実装 ~ ReAct パターン
はじめに エージェントについて理解ができていなかったため、理解を深めるために一から実装してみました。 今回 ReAct パターンを導入して、自律型エージェントを実装しています。 登場する概念 ReAct パターン ReAct パターンとは推論(Reasoning)と行動(Action)を繰り返すことを指しています。 もう少し細かく見ると、下図のように思考(Thought)、行動(Action)、観察(Observation)というプロセスを繰り返すパターンです。 Function Calling LLM が使用可能なツールをあらかじめ定義しておき、どのツールを使用するか判断させる手法です。 上図だと ツール仕様の読み込み で使用可能なツールの定義を LLM に提供します。 LLM は Action: ツール選択 で使用するツールを決定します。 アプリケーション側はツールを実行して結果を O
階層的 RAG (Hierarchical RAG) の実装
はじめに シンプルなベクトル検索から一歩踏み込んで、 階層的 RAG (Hierarchical RAG) を実装してみました。 ベクトル検索だけでは物足りないと感じる場合、精度向上の一つの選択肢になるはずです。 今回 HHKB (Happy Hacking Keyboard) の取扱説明書から、設定情報を抽出するサンプルコードを用意しています。 階層的 RAG (Hierarchical RAG) とは ドキュメントを単なるフラットなテキストの塊としてではなく、見出しや段落といった階層構造を保持しながら管理・検索する手法です。 技術スタック Python ChromaDB: ベクトルデータベース PyMuPDF4LLM: PDF を Markdown に変換する変換器 hotchpotch/japanese-reranker-tiny-v2: 検索結果を精査するためのリランカー 実装ポイ
PostgreSQLでハイブリッド検索 vector × BM25 を RRF で統合
はじめに 最も一般的な RDB の一つである PostgreSQL を使い、ベクトル検索と BM25 検索を組み合わせたハイブリッド検索を実装する方法を紹介します。 RAG（Retrieval-Augmented Generation）において、検索精度を上げるために「意味で探すベクトル検索」と「単語で探すキーワード検索」を併用する手法は非常に有効です。 使用する技術スタック Python Gemini API: テキストのベクトル化 Sudachi: 日本語の形態素解析（分かち書き） pgvector: PostgreSQL でのベクトル検索 pg_textsearch: PostgreSQL での BM25 検索 RRF (Reciprocal Rank Fusion): 検索結果の統合アルゴリズム DB コンテナの作成 まず、検証用の環境を準備しましょう。 ベクトル検索には pgve
月当たり$5でClaudeにコードレビューしてもらおう
あらまし 私「個人開発のコードをレビューしてもらって学習品質を高めていきたいなぁ」 AIくん「最近なら個人開発でも俺たちがコードレビューしてやるで」 私「昔にCodeRabbitってのを使ったことあったな......え、月に$24もかかるんか。これはチーム開発向けやな」 MCPくん「ClaudeCodeなりCursorなりにGitHubのMCP入れたらできるで」 私「せやなー。月に$20やからCodeRabbitくんよりは安上がりやなぁ。でも個人開発は出来る限り自分でプログラミングしたいからちょっと勿体無い感もあるなぁ」 Claudeくん「API Token買ってくれたら、Claude Code GitHub Actionsでコードレビューしたるで」 私「良さげやな。おーいClaude、プログラミングしようぜ。お前レビュアーな」 そんなわけで、Claude Code GitHub Acti
MCP サーバーへのリクエストをキャンセルする
MCP サーバーへのリクエストをクライアント側からキャンセルする場合の 実装方法について残します。 前提 クライアント側の実装には TypeScript, @modelcontextprotocol/sdk を使用。 キャンセルのフロー Model Context Protocol の公式ドキュメントのフロー図から クライアント側はリクエストIDを保持して、 リクエストIDを使用して notification/cancelled を 送信する必要があることがわかります。 実装方針 リクエスト ID を自前で保持して notifications/cancelled を送信しようとしていましたが それらをよしなにやってくれる AbortController が存在することに気づきました。 今回 AbortController を使用して実装します。 実装例 AbortController の使
AI開発で増えがちな個人的なファイルをgitの管理対象から除外する
AIを使った開発を進める上で、ツールによっては以下のようなファイルがリポジトリ内に配置されることがあります。 CLAUDE.md AGENTS.md .serena これらのファイルをチーム全体で共有しているリポジトリであれば問題ありませんが、そうでない場合はGitの管理対象から除外する必要があります。 以前はこれらのファイルをgit addの際に手動で除外していましたが、より良い方法が見つかったので記事として残しておきます。 ユーザー側の設定で除外する Gitには、プロジェクトの.gitignoreとは別に、ユーザー個人の環境でファイルを除外するための設定ファイルが用意されています。これを使えばチームに一切影響を与えずに、自分の環境だけで特定のファイルやディレクトリを除外できます。 特定リポジトリのみ設定する方法 そのリポジトリでのみ無視したい個人的なファイルは、リポジトリ内の.git/
Context7で最新のドキュメントを元にした回答を生成させる
Context7とは Context7は、LLMに最新のライブラリやツールのドキュメント情報を提供するMCPサーバーです。トレーニングデータに含まれていない新しいバージョンの情報や、最新のAPIドキュメントを参照することで、より正確なコード生成や回答が可能になります。 LLMは、学習データに含まれていない最新のライブラリの仕様変更（例: 非推奨になったメソッドなど）を把握できず、古い記述方法でコードを生成してしまう場合があります。Context7は、こうした問題を解決するのに役立ちます。 公式: https://context7.com GitHub: https://github.com/upstash/context7 導入方法 READMEにワンクリックで導入できるボタンが用意されており、これを利用するのが最もスムーズです。 以下に、マニュアルでの導入例をいくつか記載します。 Cla
Aprender社で主に使用しているWebフロントエンドライブラリ紹介
Aprender 社（以下、当社）に入社後、 Web フロントエンド開発に携わる中で、今まで実務での使用経験がなかったライブラリに触れる機会が多くなりました。 個人的に実務で使用している技術スタックを整理していく中で、それぞれの選定理由や実際の使用感について知見が蓄積されたため、今回記事として共有します。 バックエンドやモバイル開発についてはまだ経験が浅いため、今回は Web フロントエンドに焦点を当てて紹介します！ おおまかなライブラリ構成 現時点（2025 年 7 月）で採用している開発スタックは以下の通りです（いずれも複数の受託開発案件ですでに使用中の構成）。 言語: TypeScript フレームワーク: Next.js / React リンター・フォーマッター: ESLint / Prettier スタイリング: Tailwind CSS UI ライブラリ: Radix UI デ
React Hook FormがZod v4に公式対応しました🎉
はじめに 先日 Zod バージョン 4（以下 v4）がリリースされましたね 🎉！ v4 ではパフォーマンス向上や、ライブラリのバンドルサイズの大幅削減、 そして軽量版の Zod Mini の登場など、開発者にとって嬉しいアップデートが多く含まれています。 （なお、これまでのバージョン 3 (v3) のサポートも継続されます。） 一方で Zod を利用している開発者の中には、React Hook Form との連携における v4 のサポート状況について気になっている方もいるかと思います。 公式の対応方法に関する情報もまだ少ないので、v4 と React Hook Form を連携させるための具体的な方法について共有します。 対応方法 v4 に対応するためには、@hookform/resolvers を v5.1.0 以降にアップデートすることで連携が可能です！ Zod 作者自らが出した修正
プログラミング未経験からWebエンジニアへ：私の3年間の軌跡と学び
はじめに こんにちは。この記事は、大学で法律を学んでいたプログラミング完全未経験の私が、新卒でWebエンジニアとしてのキャリアをスタートさせ、経験を積んだのちに現職に入社し、今に至るまでの3年間を振り返るものです。 社会人になるまでコードに触れたことがなかった私が、今こうしてエンジニアとして働いているという事実から、プログラミング未経験からでもエンジニアを目指すことは可能であるということをお伝えしたいと思います。 この記事が、これからエンジニアを目指したいと考えている方、特にプログラミング経験がないことに不安を感じている方にとって、キャリアパスの一例として、少しでも参考になれば幸いです。 これまでの経歴：紆余曲折を経てエンジニアへ 私の経歴は少し変わっているかもしれません。 高校一年: 将来はITエンジニアになりたいと考え、理系的な分野に興味を持つ。 浪人生: 受験勉強をする中で日本史の面
開発・テスト用にFirestoreエミュレータをセットアップする
はじめに 本記事では、開発・テスト用のFirestoreエミュレータのセットアップ方法について解説します。 テストデータはNode.jsでセットすることを想定しています。 最後に、手動でデータを編集した際の永続化方法も記載しています。 本記事で紹介する手順は以下の通りです。 Firebase Local Emulator Suiteをコンテナ内で立ち上げる ブラウザから確認できるUIとFirestoreを使用できるように設定 別のNode.jsのコンテナから、Firestoreにテストデータをセットする ブラウザからテストデータを確認する エミュレータで編集したデータを永続化する 参考までに、本記事で紹介する手順では以下のような構成でファイルを作成します。（データの永続化部分は除いています。） work-dir ├── docker-compose.yaml ├── firebase │
【初学者向け】TypeScriptで網羅性チェックを活用しよう
本記事では、TypeScript初学者に向けて、網羅性チェックの重要性とその具体的な実装方法を解説します。 網羅性チェックとは 網羅性チェック（Exhaustiveness Checking）とは、コード内で型のすべてのケースが適切に処理されていることをコンパイラが保証する仕組みです。 網羅性チェックの重要性 予期せぬバグの防止 コードに未処理のケースが存在したときに、コンパイラが警告を出してくれる 保守性の向上 仕様変更時に未処理のケースがあれば、コンパイラの警告で気付くことができる 型のすべてのケースを明示的に扱うことで、コードの意図が分かりやすくなる 網羅性チェックが無い場合のリスク 以下の例では、網羅性チェックが無いためにケースが漏れている状態が発生しています。 type Status = 'success' | 'error' | 'loading' function handl
LexicalでIMEの有効状態を取得する方法
Lexical で IME の有効状態を取得する方法 本記事では、Lexicalを使用してIMEの有効状態を取得する方法を解説します。 結論 editor.isComposing() が true であればIMEが有効。 ※後述しますが、内部的には editor._compositionKey が null 以外であるかを判定基準としているようです。 実装方法 editor.registerUpdateListener を使用して状態の変化を監視し、リスナー内で editor.isComposing() を呼ぶことでIMEの有効状態を判定できます。 サンプルコード import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext' import type { FC } from 'react'
Firebase API KeyをGitHubにPushしたくない私の運用
前提として Firebase API KeyをGitHubにPushすること自体は問題ありません と公式が言っております。 通常、API キーは細心の注意を払って保護する必要があります（たとえば Vault サービスを使用したり、キーを環境変数として設定したりするなど）。しかし、Firebase サービスの API キーは、コードまたはチェックインされた構成ファイルに含めても問題ありません。 とはいえ、石橋をC4で破壊して「渡ったら死んでたな」と呟いてしまうほどにビビりな私としては万が一のことを考えてGitHubにはあげたくないなと思ってしまいます。 また、GoogleもAPI Keyに制限を適用することを推奨しています。 Firebase サービスの API キーをシークレットとして扱う必要はありませんが、特定の状況（以下を参照）では、API キーの不正使用からプロジェクトを保護するため
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
