タグ

mizchiのブックマーク (39,360)

  • RooCode に自動でリファクタさせるオーケストレーター用プロンプト

    Deno + Claude4 + RooCode。Claude 4 が進化しているので、それに合わせて Roo のプロンプトを書き直した。 リポジトリはここ たぶん .roo/rules/rules.md と .roo/rules-orchestrator/01_workflows.md だけ見ればいいです。 オーケストレーター用のプロンプト システムプロンプト側 AI へのお題はダイクストラによる経路探索の実装。 効いたこと ハイラムの法則と単一責任原則に言及しながらリファクタさせる https://ssaits.jp/promapedia/glossary/hyrums-law.html eslint の warn でかなり積極的なルールを採用して、それを根拠にリファクタリングさせる 最初は 単体ファイルだけで eslint を回す 通常のテストではログが邪魔になるので通所の CI で

    RooCode に自動でリファクタさせるオーケストレーター用プロンプト
    mizchi
    mizchi 2025/05/28
  • TS特化Clineプログラミング(テキスト版)

    tskaigi で発表した https://tskaigi.mizchi.workers.dev/ のコピペしやすい用にしたバージョンです。 ほぼ marp のソースコードそのままですが、プロンプトのコピペ用にそのまま公開します。 資料の内容 うまくいくプロンプト うまくいかないプロンプト、その理由 現状認識 注意: 前日リリースのClaude 4 の評価は間に合ってません!!!! Claude 4 Opus の高すぎる怖い 数時間触った感じ: 改善傾向だが、抱えてる問題も同じ傾向 主張: 言語特化プロンプトが必要(今は) Coding Agent は言語ごとのユースケースに最適化されていない ベストプラクティスをユーザーが取捨選定する必要 TS 周辺は技術選定で発散しがち プログラミング言語間の転移学習は不安定 GitHub を丸暗記しても、コンテキストに応じて翻訳&参照できるかは別の

    TS特化Clineプログラミング(テキスト版)
    mizchi
    mizchi 2025/05/25
    書いた
  • TS特化Clineプログラミング

    Previous slideNext slideToggle fullscreenOpen presenter view TS特化Clineプログラミング mizchi / tskaigi 2025 mizchi: パフォーマンスチューニングの傭兵 一ヶ月で御社のプロダクトをコスパよく高速化します フロントエンド視点のE2Eチューニング(Lighthouse) CI/CD 高速化 (Linux, GitHub Actions) New プロンプトエンジニアリングでワークフロー自動化 主な環境 VSCode + RooCode (ほぼ常に Orchestrator モード) Claude 3.7 + Gemini 2.5 (約2~3万円/月) TypeScript / Node / Deno / Cloudflare あらすじ 2014: なぜ仮想DOMという概念が俺達の魂を震えさせるのか

    mizchi
    mizchi 2025/05/25
    書いた
  • 気合の脱 create-react-app からの、AIによるフロントエンド改修の自動化 (株式会社イルシル様)

    気合の脱 create-react-app からの、AIによるフロントエンド改修の自動化 (株式会社イルシル様) 株式会社イルシル様の依頼で、フロントエンドの近代化とパフォーマンス分析を行った事例を紹介します。 「イルシル」は、生成AIでスライド資料作成を自動化し、誰でも簡単にスライドやパワポが作れるサービスで、スライドのデザインは1,000種類以上あり、入力したテキストからスライドを自動生成できるだけでなく、オリジナルで作成することも可能です。 いわゆる、複雑フロントエンドの事例です。ブラウザ上でAI経由でスライドを生成して、それをUIから編集でき、最終的には PDFパワーポイントとしてエクスポートします。 LCP や CLS ではなく、 TBT やメモリリークの調査がメインになります。 長くなったので最初に要約します。以下の内容を含みます。 泥臭い CRA => Vite 移行

    気合の脱 create-react-app からの、AIによるフロントエンド改修の自動化 (株式会社イルシル様)
    mizchi
    mizchi 2025/05/16
    書いた
  • GiHhub+Zenn 連携で vscode markdown で画像を Ctrl-V したい

    やりたいこと Zenn で Git 連携時、リポジトリ内の images/xxx.png は ![](/images/xxx.png) でアクセスできる。 また、vscodemarkdown モードは Ctrl-V でクリップボードから画像を貼り付けることができる。GitHubZenn の Web 上のテキストエリアのような挙動。 これを組み合わせて、Windows の Win-Ctrl-S から vscodeMarkdown 編集バッファで Ctrl-V を押した時、次のようにクリップボードから画像を挿入したい。

    GiHhub+Zenn 連携で vscode markdown で画像を Ctrl-V したい
    mizchi
    mizchi 2025/05/16
    書いた
  • 遂に Cloudflare + Next.js(OpenNext) + Prisma 6.7.0(No Rust) が動く時代が来た

    現状たぶんこれが一番安いと思います。(※個人開発前提のスタックです) 実現したこと opennext for cloudflare prisma (no-rust, no-engine) prisma-postgres (free plan) つまり Cloudflare 上で Next.js を動かして、現実的なビルドサイズで Prisma を動かせました。 自分の手元のビルドサイズです。 ┌ ○ / 149 B 102 kB ├ ○ /_not-found 978 B 103 kB ├ ○ /prisma-test 149 B 102 kB # ... + First Load JS shared by all 102 kB ├ chunks/770-76939705ff65587a.js 46.5 kB ├ chunks/96e220d1-21a0fdc894793ec0.js 53

    遂に Cloudflare + Next.js(OpenNext) + Prisma 6.7.0(No Rust) が動く時代が来た
    mizchi
    mizchi 2025/05/04
    書いた
  • After Cline - あるいは語りえぬ者について語ろうとする時代について

    post-cline-world.md After Cline - あるいは語りえぬ者について語ろうとする時代について この資料は以下のイベントの登壇用の殴り書きです https://hack-at-delta.connpass.com/event/350588/ 今までの資料を引用して話すので、この資料はアウトラインです。 最初に: 自分の技術選定の基準 ハイプサイクルにおけるアーリーアダプター相当で手を動かす ハイプ・サイクル https://mba.globis.ac.jp/about_mba/glossary/detail-20659.html https://www.thoughtworks.com/radar を読む イノベーターっぽい人達をSNSで監視してる 一定の熱量を感じたら自分でも動かして評価する 破壊的イノベーションを逃すな 破壊的イノベーション - クリスチャン・ク

    After Cline - あるいは語りえぬ者について語ろうとする時代について
    mizchi
    mizchi 2025/04/24
    書いた
  • 【今週の話題】AIエディタ戦争

    マイクロソフトがVSCodeフォークエディタ上での自社拡張をブロックマイクロソフトは、CursorやWindsurfなどのフォークエディタで自社開発のVSCode拡張機能C++やC#など)の使用を制限しました。 Has the VSCode C/C++ Extension been blocked? · Issue #2976 · getcursor/cursorWhile coding just now I got this msg: The C/C++ extension may be used only with Microsoft Visual Studio, Visual Studio for Mac, Visual Studio Code, Azure DevOps, Team Foundation Server, and success…GitHubgetcursor著者は

    【今週の話題】AIエディタ戦争
    mizchi
    mizchi 2025/04/19
  • 仕事で使うための Cloudflare Workers 入門 - Day1

    (これは某所でやる Cloudflare の入門チュートリアルで、そこの肌感に合わせています。) アカウント登録が終わっていることは前提とします。 Hello World いちばん簡単な TypeScript のワーカーのサンプルを作ります Hello World Worker only TypeScript npm run dev で起動。 この中身を解説します。 仕組みを知る Wrangler Cloudflare Worker は wrangler という CLI でコードを管理します。gcloud や aws-cli みたいなものだと思ってください。 wrangler は npx wrangler でもいいですが、プロジェクト毎に devDependencies 経由にすることを推奨します。 (全体的にはかなりおせっかい気味な CLI です) CLI から認証 デプロイやクラウドリ

    仕事で使うための Cloudflare Workers 入門 - Day1
    mizchi
    mizchi 2025/04/16
  • プログラミング用途の生成AI関連ツールの評価 2025/04/14

    現時点で個人の感想です。流動的なので、明日にでも意見は変わってると思います。 モデル Claude-3.7-sonnet コーディング性能が圧倒的に良い。迷ったらとりあえずこれを使っておけばよい だいたい1ファイル1000行ぐらいが管理できる限界 Gemini 2.5 今なら無料で使える。今のうちに使い込んでクセを把握するといい。 巨大コンテキスト理解ができるので、「大量にコードを読んでちょっとだけコードを書く」つまり一般的な業務プログラミングに向いてる。 リリースから一週間は負荷が高くて不安定だったが、最近安定してきた さすがに単純なコーディング性能は Claude-3.7-sonnet に劣る deepseek-chat Cline で使うには遅すぎて役に立たない AIツール作るときの壁打ちに使っている。雑に巨大データ送りつけても安くて安心 コーディングエージェント/拡張 Cline

    プログラミング用途の生成AI関連ツールの評価 2025/04/14
    mizchi
    mizchi 2025/04/14
    書いた
  • LLM にコードを「差分」で書き換えさせるためのアイデア

    既存の LLM コード生成の問題 LLM は行カウントやワードカウントが苦手。 例えば自分は SourceMap を扱うコードのテストを書かせようとしたが、モックデータの line:column がガバガバな位置を指してまともにテストにならない。行カウント/ワードカウントができないのはつまり diff がうまく生成できない。 これらの問題があって、コードを生成するパイプラインを組む場合、 全文出力が主流になっている。 ここで何が問題になるかというと、コードが膨らんで来た時に、(書き変える対象が一部だとしても)生成が顕著に遅くなる。うまく生成できなかった時にリトライを繰り返すと、問題がさらに悪化する。 改善手法の提案: 明示的な Line Number の付与 最近の LLM は入力ウィンドウがある程度大きくても、そこそこの速度で応答する。(お金はかかるが...) 問題は生成速度にある。特に

    LLM にコードを「差分」で書き換えさせるためのアイデア
    mizchi
    mizchi 2025/04/14
    書いた
  • Why I'm No Longer Talking to Architects About Microservices

    Check out our Cloud Native Services and book a call with one of our experts today! It happened again last week. I was at an architecture review meeting when a fellow architect eagerly started another debate about *microservices*. Within minutes, eyes glazed over and we were knee-deep in an absurd discussion about something that should have been a means to an end, but had morphed into the end itsel

    Why I'm No Longer Talking to Architects About Microservices
    mizchi
    mizchi 2025/03/20
  • GitHub - litdb/litdb: Lightweight RDBMS agnostic TypeScript/JS abstraction for SQLite, PostgreSQL and MySQL

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    GitHub - litdb/litdb: Lightweight RDBMS agnostic TypeScript/JS abstraction for SQLite, PostgreSQL and MySQL
    mizchi
    mizchi 2025/03/15
  • AsyncDisposableStack でリソース確保処理を書く

    やりたいこと 動機: Puppteer はプロセス外部のリソースを触るので、正しく終了させないとプロセス終了後にChromeが起動しっぱなしになってしまう。 TS 5.2 から使える await using と AsyncDisposableStack でリソース開放を逐次予約する。 tl;dr 当は await using で個別にリソースを確保/開放したいが、まだ諸々のライブラリが対応してない 自分でラップするのが面倒 なので、 AsyncDisposableStack.prototype.defer に逐次放り込むのが楽 準備 Deno で単純な await using は使えるのだが、試した限りは AsyncDisposableStack の型は存在するがコンストラクタが存在しなかった。 後述する SuppressedError もなかった。なのでポリフィルが必要。 AsyncD

    AsyncDisposableStack でリソース確保処理を書く
    mizchi
    mizchi 2025/03/13
  • 「読みやすいコード」を依存グラフで考える

    はじめに こんにちは、ダイニーの ogino です。 この記事では、コードの読みやすさを比較判断するために役立つメンタルモデルを紹介します。 記事を読むと、「このコードは良い / 悪い」という感覚が身につき、その理由を自信を持って説明できるようになるはずです。 コードの読みやすさとは何か コードを読む時には大抵、何か特定の目的があります。例えば、 API /foo にリクエストした時の動作を知りたい、ある画面で発生しているバグの原因を知りたい、などです。 この時、コードベースの隅から隅まで読み尽くすのではなく、特定のポイントから出発して関連する箇所を芋蔓式に辿りながら読むはずです。 人が一度に理解して覚えておける情報量には限界があるので、辿らなければいけないコード量が少ないほど当然読みやすくなります。 つまり、ある目的に関連するコードの箇所が局所的かつ明示的であるほどコードは読みやすいと

    「読みやすいコード」を依存グラフで考える
    mizchi
    mizchi 2025/03/11
  • React Server Actions with Toast Feedback

    User feedback is an essential part of a great user experience. In this tutorial, we'll explore how to implement toast notifications when calling Server Actions in React. Therefore we'll create a React Server Component that fetches user data and then allow users to upvote, downvote, and delete entries from a Client Component. Each React Server Action will trigger a toast message to provide real-tim

    React Server Actions with Toast Feedback
    mizchi
    mizchi 2025/03/04
  • ノンプログラマーズ・プログラミング - WIP

    書はプログラマではない人向けに、AIを通したプログラミングを前提に、プログラミングの基概念を説明することを試みたものです。 書は非プログラマ・プログラマ・AIの間に共通語彙・共通理解を作ることを目標としています。プログラミングの理解なしにプログラミングができるようになるではありません。 注意: 書きかけです。現在、およそ半分程度はAIに書かせて、自分で軽くレビューしてる程度です。有料設定されていますが、投げ銭用であって全文無料で読めます。将来的に有料になる可能性はあります。

    ノンプログラマーズ・プログラミング - WIP
    mizchi
    mizchi 2025/03/04
    書いた
  • Lighthouseのプラグインを作る

    Lighthouseのドキュメントを調べていたら、カスタムプラグインを作れるらしいのに気づきました。 カスタムな Audit を作りたかったので、やっていきます。 この記事の知識を多少要求します。 tl;dr Lighthouseのカスタムプラグインは「Gatherer」と「Audit」の2つのコンポーネントで構成される Gathererはデータを収集し、Auditはそのデータを使ってスコアを計算する Audit.meta.requiredArtifacts で必要なGathererを指定すると、自動的に Gatherer#getArtifact の結果が渡される カスタムプラグインを使えば、カスタム指標評価が作れる 最終的にこういうのが出来ました // Gatherer の生成物 🔍 MyGatherer { result: "gatherer-result" } // Custom

    Lighthouseのプラグインを作る
    mizchi
    mizchi 2025/03/03
    書いた
  • AIをシステム開発に活かすコツ、全部書く|kmagai

    今や、AIを活用してソフトウェア開発すること自体は一般的になり、一種のブームと化している。 しかし、Web上で見かけるのはワンショットでテトリスを作る程度の小規模なプロジェクトの話がほとんどで、驚けるものの、正直あまり実用性は無いように感じる。 俺たちが当に知りたいのはテトリスの作り方じゃねえ!現実の中規模以上のシステム開発で、いかに楽に良いものを作れるかだろ! ということで、まずは弊社から現時点のノウハウを全公開しようと思う。 弊社ではCursorを1年以上活用(サービスがGAになったタイミングから全社員で利用)しており、一定のノウハウを蓄積してきている自負がある。ただ、あくまで一例ではあるので、ぜひみなさんの現場での活用事例も共有してほしい! 免責事項AIエディタでの開発は、LLMとAIエディタの進化に伴い、常に変化している。 そのため、この記事で述べる方法論は、現時点での、弊社での

    AIをシステム開発に活かすコツ、全部書く|kmagai
    mizchi
    mizchi 2025/03/01
  • 生成AI時代の音声入力ツール:SuperWhisperのすすめ - うみのーと

    はじめに honeshabri.hatenablog.com 骨しゃぶりさんのブログで音声入力が激推しされていて、自分も普段から音声入力を使っているので、その使い方にとても共感できたし嬉しかったです。普通に音声入力がもっと流行ってほしいなと思います。 骨しゃぶりさんのブログ記事に触発されたのもあり、僕も音声入力について記事を書いてみました。この記事では自分のおすすめ音声入力ツールとその活用法を紹介したいと思います。 SuperWhisperのすすめ Whisperという音声認識モデルをご存知の方は多いと思います。これはTransformerベースの音声認識モデルで、OpenAIからOSSとして公開されています。特徴としては従来の音声認識と比べて、聞き間違いや聞き逃しが少なく、ノイズやフィラー(えーと、うーん、あー)を上手に無視してくれて、音声認識の精度が高いというところがあります。 よくあ

    生成AI時代の音声入力ツール:SuperWhisperのすすめ - うみのーと
    mizchi
    mizchi 2025/02/26