はてなブックマーク

はじめに LLMの進化とともに、私たちの開発手法も大きく変わってきた。かつて重要視されたプロンプトエンジニアリングは、今やコンテキストエンジニアリングへと進化を遂げている。 プロンプトの工夫より、文脈の設計。 いま成果を分けるのは「何を渡し、何を渡さないか」ではないだろうか。 最近ではkaraage0703さんがコンテキストエンジニアリングの理論的な整理をまとめた優れた記事を公開している。 本記事では、これとは少し違った角度から、ClaudeCodeでの実践という視点でコンテキストエンジニアリングを掘り下げてみたい。 近年は推論力の向上で、プロンプト技巧の比重は下がった。一方で与える文脈の設計(コンテキストE)は重要度が上がった——本稿はその実務設計を、サブエージェントで具体化する。 プロンプトエンジニアリング:その誕生と役割 LLMの特性が生んだ必然 プロンプトエンジニアリングは、初期の

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

AI Agentの進化は目覚ましく、日々実装の品質も向上しています。しかし、開発者自身に明確な実装イメージがある場合、それをAI Agentに出力させることは難しく、さまざまな工夫を必要とします。Agentに与えるコンテキストやプロンプトを最適化したり、詳細なルールを整備することで精度を高めることができますが、これらには大変な労力を伴います。 筆者がNext.jsアプリケーションを扱う場合、実装イメージは著書『Next.jsの考え方』の内容に沿って生成されるため、「この本をAI Agentに読ませることで、アウトプットの精度を高めることができるのではないか」と考え、様々な検証を行いました。 本稿では検証を通して筆者が得た、AI Agentのアウトプットに『Next.jsの考え方』を反映するプラクティスについて紹介します。 要約 以下の条件を満たすことで、AI Agentのアウトプットに『N

問題:AI開発における「8割の罠」 AI駆動開発で最も注意すべきは、AIにいかに良い成果物を作らせるかではなく、AIにいかに既存の良い実装を破壊させないかである。 典型的な悪循環 AIに開発を指示 成果物の8割は良い感じ、残りの2割に問題あり 2割の改善を指示 問題の2割は改善するが、元々良かった8割の一部が改変・破壊される 結果、全体の完成度は8割から進歩しない この「部分最適化による全体破壊」のループが、AI駆動開発の最大の落とし穴だ。 解決策:破壊を防ぎ、品質を向上させる4つのアプローチ 1. コンポーネント化と責務の分離 なぜ有効か: 変更の影響範囲を物理的に制限できる 実装例(MVVMパターン): ViewModelとViewを明確に分離 「View側だけ修正して」という指示でViewModel側の破壊を防げる ViewModelに「何を表示する画面か」というコンテキストが残る

Git worktreeによる並行開発に挑戦しようとした人々が最初に抱える問題が、ワークツリーの作成や移動のためのコマンド実行に手間がかかることです。私はそれらのコマンドを簡単に実行できるCLIツール(Phantom)を開発し、その問題を解消しました。 ワークツリーの管理をAIに任せたい そしてPhantomを使って複数のワークツリーで開発を進めるうちに、次第にワークツリーの管理を手動で行うこと自体に疲れてきました。 AIがタスクに着手する時にワークツリーを作成してから作業を開始してくれれば、人間の負担(ワークツリーを作成し、移動してエージェントを立ち上げる)を大きく軽減できるはずです。 Phantom MCP Server そこで、Phantomの機能のうち、ワークツリーの作成・一覧表示・削除をMCPサーバーとして提供しました。 AIに指示する際に「新しいワークツリーで実装を開始して」と

バイブコーディングの効率化でGit worktreeが話題になっていたけど、コマンドの実行や管理が大変そうだったので、まずは効率化するツールを作りたいと思いました。いつもならシェルスクリプトとかエイリアスで済ませるところですが、バイブコーディングでOSSとして作ってみたら面白そうと思い、この1週間集中して開発しました。 結果、Git worktreeの管理を効率化するCLIツールをリリースすることができました。途中からはドッグフーディングで自らの生産性も向上させて、Claude Codeを20万円分以上使いましたがCLIツールとしてかなりクオリティの高いものを短期間で作ることができました。 作ったツール PhantomというCLIツールを作りました。Git worktreeを簡単に管理できるツールで、docker execみたいにワークツリーの中でコマンドを実行する機能があったり、tmux

Claude Codeを使ってリポジトリ内を探索してWikiを構築してもらったところ、高精度で実用性の高いものができました。再現手順を共有します。 実例 このようなWikiが完成しました。 DeepWikiが出力したものと比較しても遜色ない品質であると思います。 Wikiのセットアップ GitHubリポジトリの設定画面からWikiを有効にし、空のHomeページを作成してください。 詳細な説明は省きます。 Git submoduleとしてクローン GitHub WikiはGitリポジトリとして扱えるため、以下のコマンドでsubmoduleとしてcloneします。 クローン先はどこでもいいですが、今回はリポジトリ直下のwikiディレクトリにします。 手順書(wiki-manual.md)を作成 Wikiを作る際のルールをまとめた手順書を用意します。自分の好みに合わせた手順を用意すればいいですが

アプリケーションユーザーにとってパフォーマンスとは、特定の指標に基づいて判断される定量的なものだけでなく、アプリケーションの総合的な体験を通じて感じる定性的なものでもあります。そのため、ユーザーがアプリケーションを「遅い」と感じる要因は様々です。 Googleは以前より、ユーザー中心のパフォーマンスを提唱しています。Core Web Vitalsは、ユーザーが感じるパフォーマンスを定量的に計測するために作成された指標群で、現在最も重要なパフォーマンス指標の一つです。しかし、Core Web Vitalsだけではパフォーマンスに関するUXの全てを網羅できるわけではありません。Core Web Vitalsの改善は重要ですが、最終的にはUX全体を最適化することが必要です。 本稿では、ページ読み込み時に「遅い」という印象をユーザーに与えないために筆者がよく用いるStreaming UIとそのプラ

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

本記事では,組版システムの Typst について,入門的知識ではなく,ちょっと凝ったことをしたり,パッケージを自作したりするのに役立つかもしれない中級者向けの知識を書き連ねたいと思います.ある程度,プログラミング言語の知識がある読者を想定しています. Typst version 0.13.1 にもとづいて書いています.今後のバージョンで仕様が変更される可能性に留意してください. そもそも Typst とは? LaTeX の代替を目指す新進気鋭の組版言語です.記法がシンプルで,リアルタイムプレビューも速いので,Markdown のような気楽さで書くことができます.それでいて,LaTeX 並に機能が充実しているので,ちょうど Markdown と LaTeX のいいとこ取りになっていると思います.下記のリンクでアカウントを作れば,ブラウザ上でも Typst を使うことができます.ちなみに私は

初めに 色々話題になっているMCPですが皆さん使っていますか? コーディングや開発周りでも既に色々なところで採用事例が紹介されており、かくいう私も採用前後で開発体験や実装スピードに顕著な変化を感じています。 とはいえ、日々の仕事においては幸か不幸か"開発"以外のタスクが多いのも事実であり、特に現職では情報が 日々のやりとり => Slack 社内の規定や情報 => Kibela プロジェクトや一般的な資料 => GoogleDrive チケット管理 asana or Jira のようになっており、ブックマークや拡張機能などを駆使しながらも必要な情報を探すのに一苦労という状況になっていました。 ここで「あ、全部1つのインターフェースからアクセスできれば楽じゃね?」と閃きました。 MCP自体の説明などは公式サイトのドキュメントに譲ることにし、早速作っていきたいと思います 作っていく(成果物)

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

2025年01月04日 Git Hooks ツールの Lefthook を追記 2025年01月05日 フロントエンドの状態管理に XState を追記 各リンクテキストを対象名がわかりやすい形式に変更 概要 以前のプロジェクトで使っていたり、進行中に差し替えまでは出来ないけど次使うならこれを使おうと思っていたライブラリやツールなどが、いざ新しくプロジェクトを作ろうと初期構築を始めたら色々と失念している事ってよくありませんか? 最近実際それがあり、個別のページにわかれて技術メモはとってあったりするのですが探しながらは手間なのとブクマしただけのものもあるので、インデックス的に手軽に気になった技術をメモっておく見ながら構築したり技術選定の前段階に使うようなノートを作ったので誰かのお役に立つかもと公開してみます。 気軽に雑にメモるのを前提に作ったものをそのまま公開しているので文体等は統一されてません

"use cache"は、Next.jsのDynamic IOで利用することができる新たなディレクティブです。本稿は筆者の備忘録を兼ねて、Dynamic IOの成り立ちや"use cache"の内部実装について解説するものです。 Dynamic IOの成り立ち Dynamic IOは2024年10月のNext Confで発表された、Next.jsにおける新しいコンセプトを実証するための実験的モードです。Dynamic IOはその名の通り、主に動的I/O処理に対する振る舞いを大きく変更するものです。 具体的には、以下の処理に対する振る舞いが変更されます。 データフェッチ: fetch()やDBアクセスなど Dynamic APIs: headers()やcookies()など Next.jsがラップするモジュール: Date、Math、Node.jsのcryptoモジュールなど 任意の非同期

はじめに インターネット通信の安全性を確保するための標準プロトコルとして広く利用されているTLS(Transport Layer Security)。しかし、分散型システムやプライバシー要求が高まる現代において、TLSには限界が浮き彫りとなっています。そこで登場したのがzkTLSです。zkTLSはTLSの強みを活かしつつ、Zero-Knowledge Proofs(ZKP)を組み合わせることで、データの整合性や出所をユーザーが証明できる新たなセキュリティプロトコルです。本記事では、zkTLSの技術的側面に焦点を当て、詳細に解説します。 TLSの進化 TLSは1994年にSSL(Secure Sockets Layer)プロトコルに代わって導入され以来、インターネット通信の安全性を確保する標準プロトコルとして定着しました。現在では、ほぼすべてのウェブサイトがHTTPSを採用しており、TLSに

はじめに 動画版もアルヨ〜。 Cursorとは Cursor とは一言で言うと、VSCode をベースに作られた AI 搭載のコードエディタのことです。 例えば、ChatGPT、Claude、Gemini などの生成AIを利用してプログラミングするときを思い出してみてください。 このように、エディタにコードを書きながら、ブラウザで開いている AI に質問をする、という作業を繰り返し行います。しかし、エディタとブラウザを行ったり来たりするのは少し面倒ですよね。 そこで登場するのが Cursor です。Cursor は ChatGPT や Claude、Gemini などの AI が内蔵されているエディタで、AIを使ってコードの編集、エラーの解決、ターミナルの操作、タブ補完などができます。 また、VSCode をフォークして作られているので、使い方、操作感も VSCode に非常に似ています。

フロントエンドエンジニアが実際に使用しているVSCode拡張機能17選 はじめまして、フリーランスのフロントエンドエンジニアのAKIと申します。今回は、実務で活用している便利なVSCode拡張機能をご紹介させていただきます。特にNext.jsでの開発現場での実用性を重視して厳選しました。 基本的な開発環境を整える拡張機能 1. ESLint コードの品質管理において最重要となる拡張機能です。特にチーム開発においては必須のツールとなります。新規プロジェクトを立ち上げる際、最初に導入を検討すべき拡張機能の一つです。 2. GitLens Gitの操作性を大幅に向上させる拡張機能です。コードの変更履歴やその著者を即座に確認できるため、コードレビューの効率が格段に向上します。チーム開発における情報共有ツールとして非常に重宝しています。 3. GitHub Copilot 有料ではありますが、開発効

はじめに aws cli を使おうとして時、IAM の権限設定は問題ないのになんでかアクセスが拒否される。 $ aws s3 ls --profile PROFILE_NAME # 結果 An error occurred (AccessDenied) when calling the ListBuckets operation: Access Denied そんな時は MFA の設定があるかどうかを確認してみましょう。 MFA の確認 MFA が設定してある場合、AWS のマネジメントコンソール画面から IAM を検索。 ユーザー → 認証情報 から MFAデバイスの割り当て で MFA の ARN が付与されていることが確認できます。 一時的なアクセス情報を発行する MFA が設定されている場合は aws sts コマンドで有効期限付きの一時的なアクセス情報を発行する必要があります。

以前にTauri, Rust, TypeScriptで書いたソースコードを流用してWebアプリにしてみた。 前はPureScript + Halogenで書かれたソースを TypeScript + Rustに書き換えたんだけど、今回もう一度書き換えてReact + TypeScript + Wasm + Rustの構成にする。 作った成果物 開発環境 Windows 11のWSL2環境で実行しています。 ~$ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 22.04.3 LTS Release: 22.04 Codename: jammy ~$ npm -v 9.6.7 ~$ rustup show Default host: x86_64-unknown-li

Next.js App Routerにおける設計やベストプラクティスを、筆者なりにまとめました。

はじめに この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にも Web に関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします! Cloudflare Workers とは? Cloudflare Workers とは、一言で言うと、Cloudflare のエッジで動くサーバーレスの JavaScript 実行環境のことです。 ...と言っても、これだけだとよくわからないですよね。だから、今回は初めて触る人でもわかるように、順序だててわかりやすく解説していきます。 Cloudflare Workers 理解するための道のり Cloudflare Workers を理解するためには以下の3つのキーワードを理解することが重要です。 CDN エッジコンピューティング JavaScript 実行環境 こ

参考文献 ※(注記)1 EDINET API機能追加に係る利用者向け説明会資料 ※(注記)2 EDINET API仕様書 Version2 1会社名の選択 まず会社一覧及び、会社のEDINETコードが必要になってきます。 これについてはAPIで取得する方法はなく公式サイトからZIPを落としてくるか ここからプログラム的に自動でダウンロードする必要があります。 今回は手動であらかじめダウンロードしたものを使います。 公式サイトからダウンロードすると毎回リンクが変わる、上記の直接リンクだと固定という謎仕様のようです(ドキュメントにもそうかいてある) ZIPを展開するとShift-JISのCSVが手に入ります。文字コードに注意しましょう。EDINETからダウンロードするCSVはUTF16なのにこっちはShiftJISなのです。 中身は上記のようなもになっています。 末尾に0がついているものの証券コードも入ってい

はじめに この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にもWebに関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします! Remixとは? Remix とは、公式サイト によると、React ベースのフルスタックの Web フレームワーク のことです。 Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. (訳)Remixはフルスタックのウェブフレームワークで、ユーザーインターフェイスに集中し、ウェブスタンダ

筆者がよくやるコマンドが存在する場合のみ有効化する形式にしています。 curl を使ったインストール方法の場合は ~/.local/bin/mise へ、zsh 以外のシェルを利用している方は公式ドキュメントを参考に自身のシェルのものへ置き換えて下さい。 IDE Integration | mise-en-place mise activate --shims は PATH に shims を追加する為です。mise は PATH を動的に変更する形式な為、 mise activate zsh だけだとインストールした言語やツールをエディタ等の対話シェル以外からは利用できないので追加しています。上記のように設定すれば対話シェルでは mise の PATH 変更形式を利用しつつ、エディタ等でも利用できるようになります。 設定ファイル Configuration | mise-en-place

はじめに この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にもWebに関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします! HTMXとは? HTMX とは、一言で言うと、JavaScriptを書かずに動的なページを簡単に作成できるライブラリのことです。 htmx is a library that allows you to access modern browser features directly from HTML, rather than using javascript. (訳)htmx は、JavaScript を使用するのではなく、HTML から最新のブラウザー機能に直接アクセスできるようにするライブラリです。 </> htmx ~ Documentation ...と言っても

はじめに この記事の内容は、以下の動画でも解説しているので是非見てみてください!(動画の方が多分わかりやすいです!) Hydrationとは? Hydration(ハイドレーション)とは、直訳すると「水分補給」という意味です。 フロントエンドの世界では、静的な HTML に JavaScript を結び付けてインタラクティブにするプロセスのことを指します。 例えば、React で SSR する場合を考えてみましょう。 SSR では、まずブラウザはサーバーに対して、リクエストを送信します。リクエストを受けたサーバーは、JavaScript を実行して、HTML を作り出します。そして、完成したこの HTML をブラウザに送り返します。 このとき重要なのは、受け取った HTML が "あくまでも見た目しかない" ということです。つまり、このままだと Web ページは静的で、クリックしても何も起