これまでHonoは数々の新しいことを提供してきました。正規表現を活かしたルーター、サーバーサイドの軽量JSX、TypeScriptの型によるRPC、Web Standardを使ったマルチランタイム対応などなど。アイデアと実装力で世界と戦って来たわけです。 本日私達が紹介するのは「Hono CLI」です。 Hono CLIは全く新しいコンセプトのコマンドラインインターフェースです。 create-* ではありません ただの開発用（dev&build&deploy）のコマンドではありません Viteのラッパーではありません 人間とAIのためのCLIです。インストールすると のようにhonoコマンドを使うことができます。5つのサブコマンドがあります。 hono docs hono search hono request hono serve hono optimize では一つ一つを見ていきまし

松尾研究所では、Python開発における標準ツールとしてuvを推奨しています。uvはPythonのパッケージ管理ツールで、依存関係の管理や仮想環境の構築を自動化し、高速で再現性のある開発を可能にすることが特長です。 Pythonパッケージだけでなく、Node.jsやブラウザ周りのツールなど他の依存も扱うときには、uvとDockerを併用するケースもあるかと思います。Dockerのコンテナ上でuvを使用する方法について社内で話題になったとき、調べたところいくつか方法があることが分かったので、それぞれの方法の違いと松尾研究所推奨の環境構築方法についてまとめました。 推奨方針まとめ Python開発はuvを標準とする Docker運用はAstral公式のuv+pythonイメージの使用を推奨 Astral公式のuvイメージ、または公式インストーラ（install.sh）によるuvの直接インストー

なぜSerena MCP Serverを使うとAIのコード編集が正確になるのか AIがコードを理解する二つのアプローチ 現在のAI開発ツールは、コードを理解するために主に二つのアプローチを活用している。一つは「意味的な類似性」で関連コードを発見するRAG（Retrieval-Augmented Generation）、もう一つは「構文的な構造」を解析するLSPといった技術だ。重要なのは、これらは対立する技術ではなく、それぞれに強みがあるということである。 CursorやGitHub Copilotといった主流のAI開発ツールは、RAGによる埋め込み検索を中心に据えている。コードを数値ベクトルに変換し、意味的に類似したコードを高速に発見する。「ユーザー認証の処理を探したい」といった曖昧な要求に対して、authenticationやlogin、validateといった概念的に関連するコードを幅

（上記、Github の README.md を一部日本語に翻訳して引用） Unsloth の良い点としては、学習の高速さやVRAM消費量が小さいことに加え、学習の効率化において近似計算を一切使用していないことから、精度低下がゼロと自信を持って書かれていることや、Huggingface において様々な動的量子化/GGUFモデル等を公開していることが挙げられます。 また、Unsloth を用いてLLMのダウンロードを行うと、謎の仕組みで高速に進みます。(Unsloth: Fast downloading is enabled と出てくるので多分早くなっている) インストールは以下のコマンドで行えます。 余談ですが、Unsloth の公式ドキュメントに書かれた LLM のファインチューニングガイド、どのモデルを使うべきか？、LoRA のハイパラのガイド は情報が綺麗にまとまっていて個人的にかな

本記事では「JWTベースの認証・認可」という表現を使用しています。 認証（Authentication）：ユーザーの本人確認（ログイン時のID/パスワード検証） 認可（Authorization）：リソースへのアクセス権限の確認（JWTによる権限検証） JWTは主に認可の仕組みとして機能しますが、認証から認可までの一連のシステムを指して「JWTベースの認証・認可」と表現しています。 1.1 JWTの登場背景と従来の認証方式の課題 従来のWebアプリケーションでは、「セッション・Cookie認証」が認証方式の主流でした。これは、サーバー側でユーザーの認証状態をセッションとして管理する方式です。 セッション・Cookie認証の基本的な流れ ユーザーがログインすると、サーバーはセッションIDを発行します。 サーバーは、そのセッションIDとユーザー情報を紐付けて自身のストレージ（セッションストレー

ユーザー「MCP使ってブラウザで確認して」 AI『分かりました！...エラーが出ているので代わりにcurlを利用します！』 ユーザー「は？？？？？？？」 どれだけClaude Codeを制御しようと、上のように勝手な解釈で意味のない代替行動をやるClaude Codeに日々ブチギレてるみなさんのストレスと無駄に消えるトークンを少しでも解消する方法を提案します ※全体的にAIに対しての文章がキツくみえるかもしれませんが、コンテキスト節約のために短文にしてます 訪れる未来 この記事の通りにセットアップすると、上記のように自動的に対応してくれるようになるので同じことを1億回言わなくて良くなりストレスが非常に減ります NG Word集を設定しよう 例えばはずや代わり、別のと言った用語が含まれていたら自動でブチギレるような設定にするとかなりストレスが減ります NG Command集を設定しよう 例え

講習会用にまとめたもの。可能なら公式ドキュメントを参照するのを推奨するが、この資料ではサッと使いはじめるために要点を絞って解説する。 claude-code は claude-code 自身で開発されており、恐ろしい速度で更新されてる点に注意。この資料は一瞬で古くなる。 アカウントの契約等は省略 インストールと実行

repomixとは repomixとはLLMに渡すためのコードコンテキストを１つのファイルにまとめてくれるツールです。yamadashy (やまだし)さんによって制作されており、ご本人のZenn記事も公開されています。 最近ではOpen Source Awards 2025のPowered by AI部門にもノミネートされているホットなツールです。 なぜVibeCodingにrepomixを使うのか VibeCodingにおいて実装計画を作成するのは必須です。実装計画を作成せずに自ら実装の指示プロンプトを考えるのは骨が折れますし、ハルシネーションが起きやすく、本当にやってほしい実装から外れたコードを生成されることが多くあります。 実際ClineではPlanモードという機能が実装されており、推論モデルにやりたい実装を計画させてから実装するフローが推奨されています。 この実装計画の作成にあたっ

本稿で扱うデータフェッチは高速なサーバー間通信を前提にしているため、バックエンドは細粒度なREST APIで設計することが最適だと考えます。 データフェッチの設計パターン 筆者の考えでは、データフェッチの設計は大きく2パターンに分けられます。データフェッチ層を設けるなどするような中央集権型の設計と、データフェッチコロケーションに代表される自律分散型の設計です。 中央集権型: 責務を集約し、一元管理を重視する 自律分散型: 責務を末端に分散し、自律性を重視する MetaやReactにおける自律分散型の設計の歴史については、筆者の前回の記事で詳細に解説しています。興味のある方はご参照ください。 解説 冒頭で触れたように、Metaでは自律分散型の設計が重視されており、特に大規模開発の保守性において重要だと考えられています。データフェッチ層を設けるような中央集権型の設計はなぜ好まれないのでしょう？

はじめに こんにちは、リーナーの 小久保（ id:yusuke-k, X:@yusuke_kokubo ）です。 リーナーのプロダクト開発で、もっとデザイン面を強化できるといいよね、という話になったので、ここに記録として残しておくために書きました。 リーナーについて リーナーは調達購買領域で、BtoB SaaSを開発提供しているスタートアップです。 調達購買とはいわゆる「企業の買い物」です。複雑なプロセスが絡み合う領域ですが、現在はその中でも、見積や購買（発注）における業務を中心に扱っています。 リーナー見積, リーナー購買 というプロダクトを主力にしています。 前提として、リーナーの開発組織について リーナーでプロダクト開発に直接的に関わる役割は「プロダクトエンジニア」「デザインエンジニア」があります。 ただし、これらの役割はあくまで、便宜上のラベリングでしかありません。 リーナーでは、

Claude 3.7 Sonnetに代表される現在の主力なコーディングモデルやソフトウェア開発タスクの自動化に利用されるLLMは、知識のカットオフにより2024年後半頃までにネット上に存在する情報をもとにしたソースコードしか書くことができない。例えばAnthropicのAPIを直接利用して確認すると、「React Routerの最新バージョンはv6です」と返答が来る。しかし、最新版はv7だ。v7.0.0はちょうどこの時期にリリースされたため境界にあり、つまりv7の実践的な知識はない。これに限らず、LLMの世界ではNext.jsはv14、Flaskはv2、Railsはv7と一世代遅れたバージョンを認識していることになっている。 これらのアップデートによって入った変更は、既存のソースコードに記述していればLLMが空気を読んで従う。加えて、ユーザーがカスタムルールとしてエディタ側で追加情報を設定

こんにちはまたはこんばんは、バクラク事業部 Platform Engineering 部でID基盤などを管理するチームに所属してあれこれやっている id:convto といいます。 認可などに関連することからバクラクでも「組織図」と表現されるリソースを弊チームで管理しているのですが、今回はその組織図についてお話しします。 この記事で取り扱う組織図リソースについて この記事で「組織図」と表現されるものは、組織の階層をあらわす木構造と、それぞれのチームの従業員所属情報などを管理するリソース全体を指します。 よくある例を簡易的な図で示します。 組織図の例 各社に合わせた情報統制を実現しようとしたとき、組織図は重要な情報です。この組織図をベースにたとえば「あるチームに所属していたらある申請を承認可能にしたい」や、「上位部門に所属している場合はそれ以下のチームに関連するリソースを閲覧可能にしたい」な

実際にコードを用いてスタック領域とヒープ領域の概念を説明します。 person オブジェクトを宣言した時、JavaScript エンジンはオブジェクトの実体をヒープ領域にメモリ割り当てを行い、ヒープ領域にある実体への参照をスタック領域にメモリ割り当てを行います。 const person = { name: 'Taro', age: 24 }; 次のように新しい変数(newPerson)に再代入をすると参照がコピーされ、newPerson も person もヒープ領域に割り当てられた同じ実体に対する参照を持ちます。 const newPerson = person; Object.assign を使って新しいオブジェクトを生成するのは、参照コピーをしないための方法の一つで、よく使われる手法の1つです。 function getName(person) { return person.na

元々はJebbrains製のIDE（Goland、Webstorm）を利用していたのですがCursorを使い始めて数ヶ月経ちます。 Cusorを使い始める前よりもだいぶ早く実装できるようになったと感じます。 Cursorベストプラクティス ・Claude Sonnet 3.7を使え ・Project Rules（.cursor/rules）を使え ・ビルド、lint、テストなどで高速にフィードバックさせろ ・1セッションあたりで依頼することはできるだけ少なくしろ ・よく使うコマンドやライブラリはチートシート作れ — 今別府すてぃお (@suthio_) March 3, 2025 このプラクティスはCursor Agentに限ったものではなく、ClineやDevinを利用する際に活きてくることが非常に多いです。 Claude Sonnet 3.7を使えClaude Sonnet 3.7で解

CI まで一式動いてるのがここ pglite は postgres を wasm コンパイルしたもの。 これを deno + drizzle からマイグレーションして叩く。 なぜこの組み合わせか ローカルにAIエージェント用の簡単なDBツールを量産したかった。deno でスクリプトを書きまくってるので、 deno を前提に色々試した。 色々試したのだが、最終的に Pglite で Postgres を叩くことにした。インストールが不要で、DB周りのセットアップが一番手数が少ない。手数の少なさを最重要とした。 最低限これだけでいい。 import { PGlite } from "npm:@electric-sql/pglite"; const db = new PGlite(); // `{dataDir: ...}` で初期化パスを渡せる await db.exec("create ta

このドキュメントを書こうと思った理由 弊社はAIに関する新規事業開発を行っており、作る側もAIを使わない作業を極力なくそうと思っているのですが、AIの進化がやばすぎて人間側が振り回されている現状が何件もあったのでこのドキュメントを書くに至りました。 もし周りの方で困っている方いれば随時更新予定ですのでシェアしてあげてください。 ＊関係ない仕事の相談などもお待ちしております。 Cursorとは？ Cursorは、AIを活用した次世代のコードエディタで、VS Codeをベースに構築されており、AIによるコード補完・デバッグ・リファクタリング支援などの機能を備えた開発ツールです。 Cursorの最大のメリットは、プロジェクトフォルダ内のファイルやログを自動でインデックス化し、AIが適切に参照してくれることです。 これにより、開いていないファイルでもAIが内容を把握し、より適切なコード補完や修正を

Reactはシンプルなサイトから複雑なアプリケーションまで、非常に幅広く採用されている人気のフレームワークです。OSS化から10年以上の歴史がありながら、昨今もReact Server Componentsなど革新的なアイディアを我々に提案し続けています。 一方で、React Server Componentsへの批判的意見やBoomer Fetching問題などを見ていると、Reactチームと一部Reactユーザーの間には意見の相違が見て取れます。この意見の相違はそれぞれが置かれた状況の違いから生じるもの、つまり「見てる世界が違う」ことに起因してると筆者は感じています。 本稿では「Reactチームの見てる世界」を歴史的経緯を踏まえながら考察し、Reactの根本にある思想やコンセプトに対する読者の理解を深めることを目指します。 要約 ReactはMetaの大規模開発を支えるべく開発され、シ

お疲れさまです。とーちです。 MacOSでDockerを使用するために、Rancher Desktopを使っている方は多いのではないでしょうか？ 私も長らくRancher Desktopを使っていたのですが、つい最近、この記事でColimaというツールを知り「これは良さそう」と思ったので実際に試してみることにしました。 今回は、軽量なコンテナランタイムとして注目されている「Colima」への移行について、実際に試してみた経験を共有したいと思います。 とりあえずまとめ Colimaは軽量でシンプルなコンテナランタイム環境を提供 DockerCLIは別途インストールする必要あり Kubernetes環境も必要に応じて簡単に構築可能 そもそもなぜコンテナランタイムが必要なのか？ まず、MacOSでDockerを使用する際になぜコンテナランタイムが必要なんでしょうか？私は雰囲気でRancher D

React19のuseOptimisticの使いどころがそんなにわからないなと思っていた昨今ですが、めっちゃハマる使いどころを見つけたので共有します！ useOptimisticってなに？ 「楽観的更新をするためのHook」と記載されており、「データの更新→ロード→更新されたあとのデータを表示」の動作のロードの部分を割愛するための仕組みで、確実にデータの更新ができるであろうケースに使用するとアプリを高速で操作できるように見せることができるようです。 useOptimisticの使用の有無の比較 なし あり なしのほうがアイテムを離したあとに少しカクついていることがわかります。 DnDでデータを並び替える実装をみる（なし） ドラックアンドドロップ（以下DnD）で操作を行う場合の多くはDropしたときにDBのデータも書き換えたいものだと思います。今回はリストを並び替えるという動作を例にあげます

DevinとCursorを比較してみてわかった、マルチタスクエンジニアにはDevinこそが救世主である理由 はじめに こんにちは。Ubieでプロダクト開発エンジニア兼社内入稿システムのPOをしている、えんぴつと申します。 「完全自律型AIソフトウェアエンジニア」Devinと、次世代AIコードエディタCursor。どちらも大きく注目されていますが、「実際どう使い分けるの？」「スクラムや日常業務に組み込むには？」と悩む方も多いのではないでしょうか。 私自身の業務内容としては、 プロダクトの実装 Epicの立案やPBIの起票 レビュー対応・ドキュメント整備 採用関連やチーム外のステークホルダーとのアライン という感じで開発以外のタスクもなにかと抱えています。 まとまった時間を取りづらいため、Devinのようにスキマ時間を使って開発タスクを進められる仕組みは本当にありがたいです。一方、Cursor