はてなブックマーク

LLMの手前でコンテキストを圧縮するheadroomをClaude Codeに入れて実測した。構造化JSONのツール出力は44.6%減ったが素の冗長ログは0%。ワークロードを選べば効く、何でも縮むツールではないという結論 headroom は LLM にコンテキストを送る前に、その中身を圧縮してくれるミドルウェア（処理の間に挟まる中間層）だ。ツール出力・ログ・ファイル・RAG の検索結果・会話履歴みたいに、プロンプトに積まれて膨らみがちなテキストを手前で削ってくれる 仕組みはシンプルで、まず ContentRouter が「これは何のデータか」を型判定する。それから JSON なら JSON 用、コードならコード用、と専用の圧縮器に振り分けてから縮める 可逆性も用意されてて、原本はローカルに保持される。LLM が「ここ元の全文が欲しい」となったら headroom_retrieve で取り

肝はステップ3のセルフレビュー10項目で、各項目に「迷ったらこの原文を読め」のポインタを添えてること。チェックリストで当たりをつけて、迷ったら原文1枚で深掘りする二段構えやな。全ファイルを一度に読ませないから、コンテキストも食わない 同じものを作る手順 そのまま真似できるように手順を置いとく eng-practices のリポジトリを丸ごと落として、スキルの references/ 配下に置く。LICENSE も一緒に置いて CC BY 3.0 の帰属表示にする SKILL.md のワークフローを4ステップで組む。変更を小さく分ける → 説明文を書く → submit 前セルフレビュー → 結果提示 上の10項目チェックリストを SKILL.md に inline で書く 各ステップに「迷ったらこの原文1ファイル」のポインタを添える。全ファイルを一度に読ませない、が肝 CL = PR の用

Claude Code の精度はモデルよりハーネスの整備で決まる。CLAUDE .md はルートを薄く、ローカルな規約はサブディレクトリに書く。作業はリポジトリルートやなくサブディレクトリで始める Claude Code を大規模コードベースで使うベストプラクティス Claude Code の精度は、使うモデルよりハーネス（CLAUDE .md などの設定）の整備で決まる。RAG みたいなインデックスを持たず grep でその場で探すから、設定の質がそのまま探索の精度になる 大規模なコードベースほど、事前のセットアップが効いてくる Claude Code、大規模コードベースでの公式ベストプラクティスが出てた CLAUDE .md はルートを薄く、ローカルな規約はサブディレクトリに書く 作業はリポジトリルートやなくサブディレクトリで始める ハーネスは基本 CLAUDE .md → hooks

2 つのサブエージェントが並列で動いて、数分で見出し 20 本 + 説明文 20 本の CSV が出来上がった 見出しの例 「個人開発プロダクトを無料で公開しよう」 「あなたの技術、埋もれていませんか？」 「SEO最適化済みで検索に強い技術ブログ」 全部 30 文字以内。訴求ポイントもトーン（疑問形、断定形、呼びかけ形）もバラバラに散らしてくれた ステップ 2 - Figma プラグインを Claude Code で自作 ここが一番「え、そんなことできるの？」ってなるところやね 作り方は簡単よ Claude Code に以下を指示した Claude Code が作ってくれたのは 3 つのファイル manifest.json - プラグインの設定ファイル ui.html - CSV をアップロードする画面 code.js - テンプレ複製＋テキスト差し替えのロジック 仕組みはこう。Figma

Anthropic のグロースマーケティングチームが Claude Code で広告コピー自動生成、Figma プラグイン自作、MCP サーバー構築、メモリシステムによる A/B テスト改善を実現した事例。非技術者 1 人で広告作成した手法 Anthropic が公式ブログで、社内チームが Claude Code をどう使っているかの事例を公開した。中でもグロースマーケティングチームの使い方がえぐい。しかも全部、真似できる X で毎日 AI 情報を配信してるコムテです。Claude Code テクニックを中心に情報を配信しています 再現してみた。Figma プラグインとサブエージェントを作る 2026/02/22。具体的な方法はこちらに書きました！↓ このチームは検索広告、SNS 広告、アプリストア、メールマーケティング、SEO を担当していて、驚くのは「非技術者 1 人のチーム」というこ

Claude Code のスキルを自作する前に Agent Skills Marketplace をチェックすべき。65,635 個のオープンソーススキルが GitHub から集約され、AI セマンティクス検索で「やりたいこと」から探せる。Anthropic 公式も紹介してる Claude Code のスキル、自作する前にここをチェックしてほしい X で 毎日 AI 情報を配信してるコムテです。Agentic AI / AI 駆動開発 / Claude Code などを中心に情報を配信しています この記事は Agent Skills Marketplace を実際に触ってみた感想と、なぜこれが Claude Code ユーザーにとって革命的なのかを解説する なぜ今 Skills Marketplace が注目されてるのか 車輪の再発明をやめられるから Claude Code を使い始めると

Claude Code を使いこなすには CLAUDE.md、Rules、Skills、Subagents、MCPs の 5 つのレイヤーを正しく使い分けることが重要。それぞれの役割を理解して段階的に構築する必要がある 最初にポイントをざっくり書く CLAUDE .md、Rules、Skills、Subagents、MCPs 。5 つのレイヤーの使い分けの感覚はこれだけ覚えればいい どういう思想で働いてほしいかは CLAUDE .md この領域では絶対に守る知識は Rules 人（自動もあり）が開始する作業手順は Skills 自動で任せたい重い作業は Subagents 外部世界と触るなら MCP Claude Code は「全部ルールを書くほど賢くなる」わけではない レイヤーを間違えると、むしろ指示を無視し始める X で 毎日 AI 情報を配信してるコムテです。Agentic AI /

CLAUDE.md は LLM にコードベースを理解させる最重要ファイル。WHY/WHAT/HOW の3要素を300行以内で簡潔に書き、指示は最小限に。段階的開示で詳細は別ファイルに分離し、リンターや自動生成には頼らないのがベストプラクティス Claude Code を使っていて、なんか思い通りに動かんなって感じたことない？指示を書いてるはずなのに無視される、毎回同じことを説明し直さなあかん、コードスタイルがバラバラになる こういう問題の多くは、実は CLAUDE .md の書き方に原因があったりするんよね X で 毎日 AI 情報を配信してるコムテです。Agentic AI / AI 駆動開発などを中心に情報を配信しています この記事は HumanLayer のブログ記事「Writing a good CLAUDE .md」をベースに、Anthropic の公式ドキュメントと最新の学術研

画像を切り出すときは、Figma MCP プラグインインストールすればいいし、新たにアイコンや画像を作りたい場合は、Gemini 3 系をメインで使えばいい 個人的には Antigravity + Gemini 3 Flash の組み合わせがフロントエンドに強いと感じてるけど、結局は 1 つのモデルに固執しない。タスクごとに切り替える のが一番いい それじゃあ、デザインの再現率を上げるテクニックを紹介していくよ テクニック 1：セクション単位で切り出す セクションというのは、ページ内の一つのエリアのこと。ヘッダー、ヒーローセクション、コンテンツエリア、フッターなどがセクションになる コンテンツエリアは、例えばサービスの特徴・料金表・FAQ セクションのこと デザイン全体のスクリーンショットを一気に渡すのは、実は逆効果やったりする AI は視覚情報を処理する時、画像全体に均等に注意を払おうと

2025年はAIに「書かせて読む」開発が定着し、エージェンティック・コーディングが成熟。2026年は品質の80→100点化、非決定論前提の多重評価、ロングラン強化と汎用展開が進み、当面Claude Code優勢 2025年は、まさに激動の1年でした。 年の初めには「Cursor」が流行し、多くのエンジニアがAIによるコード補完に懐疑的でした。しかし年末には状況が一変。「Claude Code」が主役の座を奪い、コードを「書く」のではなく「AIに任せて読む（あるいは最低限しか読まない）」スタイルが定着しました。「エージェンティック・コーディング（自律型AIによる開発）」が一気に成熟し、日常に溶け込んだ年だったと言えるでしょう。 では、2026年には何が起こるのでしょうか。 私が日々キャッチアップを続ける中で見えてきた本質的な変化について、18の予想を軸に解説します。これは私からの「お年玉」で

生成 AI から Agentic AI まで、2026 年に押さえておきたい AI トレンドを厳選。MoE で 10 倍高速化、MCP と A2A でエージェント連携、RAG でハルシネーション対策など、実務で差がつく知識を網羅した AI の進化がめちゃくちゃ速い。2024 年は LLM の年、2025 年は「エージェントの年」と言われてた。ほんで 2026 年はどうなるかというと、エージェントが本番環境に入り、実際に ROI を問われる年になると予測されてる。「2025 年はエージェントを構築する年、2026 年はエージェントを信頼する年」なんて言われてるくらい X で 毎日 AI 情報を配信してるコムテです Agentic AI / AI駆動開発などを中心に情報を配信しています この記事では、2026 年に押さえておきたい AI トレンドを 5 つのカテゴリに分けて解説していく。一言解

Ghostty は Mitchell Hashimoto が Zig で開発した GPU アクセラレーション対応のターミナルエミュレータ。速度・機能・ネイティブ UI の 3 つを両立し、macOS では Metal、Linux では GTK4 を採用。シェル統合で作業効率が劇的 ターミナルって開発者にとって一番長く触れるツールやと思う。だからこそ、ちょっとした引っかかりが積み重なってストレスになるんよね。iTerm2 は高機能やけど重い、Alacritty は速いけど機能が少ない、Warp は AI 搭載で面白いけどネイティブ感がない。どれも一長一短で「これや」っていうのがなかった そんな中で出会ったのが Ghostty。HashiCorp の共同創業者である Mitchell Hashimoto が個人プロジェクトとして開発したターミナルエミュレータで、2024 年末にバージョン 1.

App Router採用プロジェクトのディレクトリ設計を解説。app/client/server/の責務分離、Route Groupsによるレイアウト管理、HonoのNext.js統合、Server Componentを活かす設計パターンを実例とともに紹介します。 この記事では、App Routerのディレクトリ設計について、実際のプロジェクト構成を交えて解説します。 📝 この記事で使う用語 CSR（Client Side Rendering）: ブラウザ側でJavaScriptを実行してHTMLを生成する方式 SSR（Server Side Rendering）: サーバー側でHTMLを生成してからブラウザに送る方式。表示が高速になる Streaming: HTMLを分割して順次送信する方式。ページ全体の読み込みを待たずに表示が始まる 📖 App Routerの基本 Next.js

Antigravity と Gemini 3 Pro でデザイン再現率を上げるには、全画面ではなくセクション単位で画像を切り出してアップロードし、既存コードを読み込ませた状態で生成させ、角丸や余白などの微調整を反復して指示するのが最速で 120 点のクオリティに到達する方法 有料プラン契約して、ガンガン回した結果、Antigravity + Gemini 3 Pro のデザイン再現率をさらに引き上げるコツを掴んだぜぃ ポイントはこれ セクション単位で狭く切り出して画像を見せる 既存のコードとクラス設計を読み込ませた状態で生成させる 細かい修正指示を反復で伝える 80 点を生成させた後に、細かいフィードバックを出す だいたい、これやればデザインの精度がバク上がりする でも、無料やと、すぐにレートリミットや！ なんで、個人アカウントに切り替えて、Google AI Pro（月額 2,900 円

dotenvx を使えば .env ファイルを暗号化して Git にコミットできる。共同開発者には .env.keys の秘密鍵だけを渡せば、各自が復号して環境変数を取得可能。これで .env 共有問題が解決する チーム開発やってると、必ずぶつかる壁がある。それが「.env ファイルどうやって共有する問題」よね Slack で送る？ Notion に貼る？ 1Password で管理する？どれも一長一短で、結局「安全性」と「手軽さ」のバランスが難しい。特に新しくプロジェクトに参加したメンバーに環境変数を渡すとき、めっちゃ気を使うんよな そこで便利なのが dotenvx というツール。これ、あの有名な dotenv の作者が作った後継ツールで、.env ファイルを暗号化したまま Git にコミットできるっていう、なかなか画期的なやつよ dotenvx ってなに？ dotenvx は、環境変数

Google が 2025 年 11 月 18 日に発表した次世代 AI IDE。Agent-first アーキテクチャでエディタ、ターミナル、ブラウザを横断制御し、Gemini 3、Claude Sonnet 4.5、GPT-OSS を無料で使える破壊的なプラットフォーム Google が 2025 年 11 月 18 日に発表した次世代 IDE「Antigravity」を調べてみた。まず、個人向けプランが無料で使えるのがまず嬉しい これは単なる「AI 搭載 IDE」じゃなく、Google が本気で開発体験そのものを再定義しようとしてる製品 Cursor からインポートできるのは嬉しい テーマカラーにTokyo Night がある 右から、3 dotsをクリックすると MCP サーバーを選択できる Google Antigravity とは何か Antigravity は、Google

Claude を使いこなすには 5 つの部品の役割を理解することが重要。Skills は専門知識、Prompts は即時指示、Projects は知識ベース、Subagents は専門家チーム、MCP はデータ接続。組み合わせで本当の力を発揮する Claude には「エージェント的に動く」ための 5 つの部品があるらしいんだわ Skills Prompts Projects Subagents MCP この 5 つ、名前だけ聞いても「で、どう違うん？」ってなるよね 実際、ワイも最初は混乱してた でも、それぞれの役割と使い分けを理解すると、Claude の使い方が一気に広がるんよ 公式ブログの「Skills Explained」って記事がめちゃ分かりやすくまとめてくれてたので、それを元に整理していく。５つの部品の解説と導入方法をまとめてみた Claude の 5 つの部品とは何か まず全体像

脳科学と経験学習の観点から、プログラミング学習では「実践→理解」の順番が正しい。デービッド・コルブの経験学習モデルと神経科学的なエラーシグナル理論に基づき、詰まることが学習のトリガーになり、ドーパミンが放出されて記憶が定着する。 プログラミング学習、いきなり分厚い本から読み始めてない？ プログラミングを始めるとき、まず何をするだろうか？ 多くの人は「まずは基礎を固めないと」って思って、入門書を買うんよね。オライリーの分厚い本とか、評判のいい技術書とか。ワイも最初はそうやった やけど、正直に言うと、これって遠回りなんよな 読んでるときは「なるほどな」って思うけど、いざ実装しようとすると全然覚えてない。「あれ、この章読んだはずやのに」って何度もページを戻る。そんな経験ない？ X や技術系のコミュニティでは「本派 vs 実践派」の論争がよく起こるんやけど、これって実は学習フェーズの違いを混同して

Claude Code の Skillsは、Claude に追加の能力や専門知識を与える。今行っているタスクに関連するときだけ読み込まれる。必要なファイルだけをロードするため、無駄なトークン消費がない Claude Code Skills（スキル）とは？ ここでは、ローカルエディター（Claude Codeなど）で動作する Skills 機能について解説する。公式DocsやGitHubリポジトリで説明されている内容の要点をまとめる 要点まとめ Claude に追加の能力や専門知識を与える 特定ドメインに関する専門スキルを付与できる プロンプトから自動的に参照される（トリガー不要） 必要に応じて動的にロードされる Claude アプリ・Claude Code・API で共通利用可能 Pro・Max・Team・Enterprise 向けプランで利用可能 一度作ったスキルは、複数の会話やプロジェ

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

AIの暴走を防ぐ4段階フロープロセス AIの過剰な機能実装、エラーハンドリング、要件を無視したコーディング。これらによる手戻りの発生や新たなバグに日々悩まされている方も多いと思います。 そんな中、AmazonのAIエディタ「kiro」には単純明快で効率的なAI Codingが可能になるプロセスが実装されていたので、これを参考にCLAUDE.mdを作成しました。 そのプロセスは下記のとおり、シンプルで当たり前な内容です。 このプロセスが未導入だった場合 実際に「売上データを分析して」と指示した場合、AIは以下のような過剰な実装を行いがちです。 20種類以上のグラフを生成（棒グラフ、折れ線、散布図、ヒートマップ...） 全項目間の相関分析を実行 機械学習による売上予測モデルまで構築 データクレンジング、外れ値除去、正規化を勝手に適用 エラーが出ても別の手法で強引に続行 このプロセスを導入した場

Vercel は便利で簡単だ。個人開発にとって簡単さは大切である しかし、 Vercel の無料枠に依存したくない Vercel のオンデマンドによるリソース消費が怖い 月額費用を限りなく抑えたい Cloudflare Workers の高速性を活かしたい ある日、Vercel からFunction 使用量増加に関するメールが届いた xxxx has used 75% of the monthly included Function Invocations on the pro plan. Once you hit 1M Invocations, additional usage is $0.60 per 1M Invocations.（プロプランの月間関数呼び出し回数の75%を使用しました。100万回を超えると、 100万回ごとに0.60ドルの追加料金が発生します。） うーん、だるい。面

私（@commte）は、この izanami を、個人開発しました。 このページでは、その知見をもとにアイデア創出や技術選定など 個人開発を成功させるための情報全てを共有します 個人開発の完全ガイドが凄い！ → Claude Code・リソース集・設計ミス集・マネタイズ・注意すべき法律・技術選定コストの落とし穴・技術スタック選定例・大成功したプロダクト共通点・要件定義ガイド・ロードマップ・AI駆動開発 https://izanami.dev/kojin-kaihatsu

Meta社が「useEffectの46%は不要だった」という調査結果を発表。それを知った私が、自分のコードを見直してuseEffectを減らしていった体験談。連鎖するuseEffectでデバッグに苦労した経験から、どうやって改善していったかを共有。 useEffectを使いすぎてた私がMeta社の調査結果を見て反省した話 こんにちは。とちです。 Reactで開発していて、「useEffect書きすぎかも…」と感じたことはありませんか？私はしょっちゅうありました。 そんな中、Meta社（旧Facebook）が自社のコードベースを調査したら、useEffectの約46%が実は不要だったという調査結果を知って、かなり衝撃を受けました。 この記事では、私がuseEffectを使いすぎていた理由を反省しつつ、どうやって減らしていったかを共有します。 React公式ガイドライン：useEffectは「

Figma Desktop と Claude Code を連携するには、Figmaのデスクトップアプリの左上のアイコンから、基本設定を押し、「Dev Mode MCP サーバーを有効にする」にして、Claude CodeにMCPサーバーを追加する Figma Dev Mode MCP Serverとは何か この連携の核となるのが、Figmaが提供する「Dev Mode MCP Server」という機能だ。MCPは "Multi-purpose Code-generation Platform" の略で、その名の通り、多様なコード生成のためのプラットフォームとして機能する 具体的には、Figmaのデスクトップアプリ内でローカルサーバーを起動し、デザインデータをAIエージェント（この場合はClaude Code）にストリーミングで提供する仕組み。 これにより、AIはFigmaのデザイン構造、例