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

1. Project Rules とは Cursor の Project Rules（v0.45~） は、Cursor Chat/Composer での対話において、必要なコンテキストを与えるための機能です Cursor > General > Project Rules から設定できます。 これまで、Cursor では Rules for AI, .cursorrules といったカスタムルールを用いて、プロンプトのコンテキストを与えていました。 Project Rules は、これらのカスタムルールに加え、より具体的かつ個別にコンテキストを与えることができる機能です。 もちろん、Rules for AI や .cursorrules を併用することも可能です。 各ルールの特徴 Rules for AI Cursor のアプリケーション自体に設定するカスタムルールです。 Cursor で

DeepSeek-R1: 世界最高推論性能のOSSモデル こんにちはYosematです。 中華系のAI技術が進化していますね。OpenAIなど研究開発を進めて手法が確立されてきたタイミングで参入することで莫大な試行錯誤のコストを節約しお安いコストで仕上げている印象を受けています。 今日はぶっちぎりの話題性を誇るDeepSeek-R1について解説します。一般の読者が「お気持ちはわかった」状態になることと関連分野をかじってる人が「完全に理解した」状態になることを目指します。 DeepSeek-R1とは DeepSeek-R1は OSSの大規模言語モデル OpenAI o1に並ぶ性能を示す推論モデル 強化学習頼みで進化したモデル です。 APIも公開されていますがOutput Tokenあたりの値段はo1に比べて20倍以上安いです。 利用者目線でのすばらしさや社会に与える影響の考察は他の記事に譲

こんにちは、株式会社Berryの浅沼です。 この記事を書いている数週間前くらいから話題のClineを会社で導入し、開発に利用しています。最初はコードの自動生成から試していたのですが、.clinerulesを使ってプロジェクトごとのカスタム設定ができることを知り、どんどん活用の幅を広げていきました。 特に大きかったのが、プロジェクト内のコード構造・コーディングルールの設定に加えて、コミットメッセージやプルリクエストのタイトル・サマリーを生成するルールを追加したことです。これによって、「コードを書く→コミットメッセージを考える→プルリクを書く」という一連の作業がスムーズになり、全体の開発効率が格段に上がりました。 この記事では、実際の.clinerulesの内容も含めて、どのようにルールを作り、育て、活用しているのかを紹介します。特に、コードの自動生成以外の使い方にも触れますので、すでにCli

本記事は、DeepSeek-R1の論文とDeepSeekMathの論文を読んだ私の理解をもとに記載しています。 本論文で使われている技術に関しては、ある程度の知識を持っているので、大きくは外していないとは思いますが、私の主観も入っている部分もありますので、ご了承ください。 また、DeepSeek-R1の論文が公開される前に、小型モデルに対して同様の実験（強化学習）をしていたグループがあるようです。 そちらのレポートは下記になります。 意図せず、DeepSeek-R1-Zeroの再現実験のようなレポートになっていますが、レポートの著者はDeepSeek-R1論文の公開前から実験していると主張しています。 こちらも非常に興味深かったため紹介です。 本論文の興味深いところ 本論文は、大きく分けて3つの構成でできています 強化学習による思考能力の強化 LLM（DeepSeek-V3-Base）に対

ReclineというAIエージェントを使用してみたら、GitHub Copilotを初めて使用したときの感動を思い出しましたのでご紹介します。 Reclineとは ClineというVSCode上で動作するAIエージェントがあります。様々なLLM（GPTやClaudeなど）を使用し、コーディング支援をしてくれるものです。 GitHub Copilotとは異なり、指示をするだけでコーディング、各ファイルやディレクトリの作成など行ってくれるため、GitHub Copilotより一段階上を行くAIエージェントと言えます。 Clineは前述の通り、各LLMを使用する必要があるため、別途LLMの料金がかかります。 今回検証するReclineはそのClineをVSCodeのLanguage Model APIを経由したGitHub Copilotと組み合わせて使用できるものです。 つまり、GitHub

GitHub Copilot WorkspaceのTechnical PreviewがGitHub有償ユーザ向けに公開されました。GitHub Copilotを有償で利用している方は、すぐに使える状況になっていると思います。 僕も少しだけ使ってみたのですが、今後の開発プロセスを大きく変えていくだろうなという感触を持ったので、ではその「変わった先」というのがどういうものになると思っているのかを書いてみます。 GitHub Copilot Workspaceとは GitHub Copilot Workspaceの苦手なところ 僕たちのプロセスをどう変えるのか 課題はプロンプト生成 設計仕様とテスト工程の連携 では開発フローは？ 設計との向き合い方 GitHub Copilot Workspaceとは GitHub Copilot Workspaceを一言で言うと、AIを活用したコーディング支援

こんにちは！チューリングでソフトウェアエンジニアをしている太田です。 自動運転システムの開発を手がけるチューリングでは、大規模な GPU クラスタでトレーニングされたモデルが日々リリースされ、実車環境でのテストが行われています。 自動運転と聞くと、ハードウェア寄りの技術を連想するかもしれませんが、チューリングの自動運転開発においてWeb系の技術もさまざまな場面で活用されています。 近年、UI開発においてWebブラウザが利用される場面が広がっています。チューリングの自動運転システムにおいても例外でなく、Webフロントエンドの技術を用いてUI開発が進められています。この記事では、チューリングの自動運転システムのUIに焦点を当てて、その背景や構成をコードとともに解説します。 1. E2Eモデル チューリングでは「E2E(End-to-End)」と呼ばれる自動運転モデルを開発しています。カメラ画像