はじめに（注意喚起） 本記事で紹介する方法は、コードからCodexCLIを呼び出す手法です。つまり、Codexセッションの中からさらに別のCodexセッションを起動することになり、当たり前ですがその分Codexの利用枠を消費します。 サブスクリプションでCodexを利用している方：残りの利用枠にご注意ください API従量課金の方：課金額にご注意ください 今回のサンプルでは意図的に大量の利用枠を消費するような実装にはしていませんが、AIエージェントのトークン消費は事前に予測しづらいため、あらかじめご了承ください。 また、本記事で紹介する手法はベストプラクティスではありません。CodexSDKを利用して擬似的にClaudeCodeのサブエージェント機能を再現してみよう、という実験的な内容です。効率的な方法かどうかはわかりませんが、CodexCLIをより効果的に使うヒントにはなると思いますので、

本記事では，Typst で日本語を扱うときの文字間のスペースを改良するパッケージを開発したので，使い方と仕組みを簡単に解説したいと思います． Typst 日本語スペース問題 Typst で日本語を扱うときに問題となるのが文字間のスペース（空き）です．Typst v0.14.0 時点で対応していない問題として，具体的に以下の２点が気になるでしょう． 和文の途中で改行すると間にスペースが入ってしまう． 和文の途中で 改行すると， 間にスペースが入る // 視認のためスペースに色をつける #show " ": it => highlight(it, fill: red.transparentize(40%)) 和文の途中で 改行すると， 間にスペースが入る 和文と数式の間に自動でスペースが入らない． 下図のように，和文と欧文の間には明示的にスペースを書かなくても自動でスペースが挿入されるのに対し

最新記事はこちら CodexSDKを使ってサブエージェントを独自実装する手法を解説しています。 AI にコードレビューを投げると、ありがたいことに山ほどレビューコメントが返ってくる。 しかし、実際に運用してみると、その中には直さなくても良さそうな細かい指摘や、そもそもレビュー内容自体が誤っているコメントが紛れ込み、PR のコメント欄があっという間にカオスな状態になることも珍しくない。 結局のところ、一つひとつについて「この指摘は妥当か？」「今すぐ対応すべきか？」を目で追いながら判断していくことになり、レビューが増えたわりに仕分け作業だけが重くのしかかってくる。 そこで発想を変え、まずは PR についたレビューコメントをすべて洗い出し、その一つひとつについて妥当性や対応方針（対応するべきか、保留でよいか、無視してよいか）を AI に一次判定させることにした。 AI にレビューコメントそのもの

はじめに JSONくん、君はちょっと「おしゃべり」すぎるかもしれない。 開発をしていると、JSON (JavaScript Object Notation) とはもう「空気」のような存在ですよね。何かしらどこかしらで付き合いのある感じ。 APIを叩けばJSONが返ってくる。設定ファイルもJSON。何ならログもJSON。 私も長年連れ添った相棒として、彼（JSON）のことは信頼しています。 でも、LLM（大規模言語モデル） と付き合い始めてから、ちょっと気になることが出てきました。 「あれ…？ 君、無駄口多くない…？」 [ {"id": 1, "name": "user_a", "role": "admin"}, {"id": 2, "name": "user_b", "role": "member"}, {"id": 3, "name": "user_c", "role": "member

Next.jsは従来より、デフォルトで高いパフォーマンスを実現するフレームワークであることを重視してきました。App RouterにおいてもSSR・Streaming・Cacheなど様々な最適化により、高いパフォーマンスの実現を目指してきました。しかし一方で、積極的なCache活用や複雑すぎるCacheの影響範囲は、開発者に多くの混乱をもたらしました。 v16で導入されたCache Componentsは、Next.jsのCacheのメンタルモデルを大きく変更するものであり、これまでの多くの課題を解決しうるリアーキテクチャです。この記事では、Cache Componentsが何を解決しようとしているのか、なぜリアーキテクチャに至ったのかなどの歴史的経緯を解説します。 Next.jsの歴史 Next.jsには現在、Pages RouterとApp Routerという2つのRouterが同梱さ

システム構成図やシーケンス図を描くとき、「どのツールを使えばいいの？」 と悩んでいませんか？ draw.io、PlantUML、Mermaid、FigJam...選択肢が多すぎて、結局いつも同じツールに逃げてしまう。でも本当にそれでいいのか不安。 この記事では、実際のエンジニアたちが使っているツールと、その選び方を徹底的にまとめました。 ▼ガッシーさんのツイート に集まった情報を参考に記載させてもらっています。デザイナー、プログラマー、エンジニア、経営層と様々な方がリアクションされていたので、みんな悩んでいるんだな…わかるぞ…と思い、しれっとまとめさせてもらいました。私も個人的にめっちゃ悩んでいたので。問題があれば削除しますのでご安心ください。 人気の図形描画・作図ツール徹底比較 1. draw.io (diagrams.net) - 最多回答の万能ツール 完全無料で高機能、幅広い用途に対

概要 4年目のソフトウェアエンジニアとして、一般社団法人 ソフトウェアエンジニア協会(以下SWE協会)のコーディング練習会に参加して感じた変化を共有します。 なお、Google を含む外資系ソフトウェアエンジニアのコーディングテストを準備なしで解ける方にとっては、本記事の内容は役に立たないかもしれません。 自己紹介と参加の背景 私は現在、主にマーケティングオートメーションツールを提供している会社で、ツール全体が使うデータパイプラインの構築や運用、機能開発に利用する共通基盤の開発等を行っています。 扱うトラフィックはそれなりに大きく、馴染みの薄いミドルウェアを学ぶ場面も多いのですが、学習が場当たり的になりがちで、技術間に渡る「共通項」が見えにくい感覚を抱いていました。 また、社内で尊敬するエンジニアの「判断基準」や「なぜその選択肢を採らないのか」という背後の思考まで追いきれないことが悩みでし

この記事は、すでにCodexやClaudeCodeなどのAIコーディングツールを実際に使い始めているエンジニアに向けて書いている。「期待ほど効率が上がらない」と感じている人や、運用の型を模索している個人開発者を想定している。導入方法や基礎理論は扱わない。ひとりのエンジニアが数ヶ月間Codexと向き合って得た、実践的な運用知見を語る。 数ヶ月で変わったこと まず、ここ数ヶ月でAIコーディングツールの使い方が大きく変わったという話からしたい。 数ヶ月前のClaudeCodeガードレール戦略全盛期と比べると、隔世の感がある。あの頃は、AIが暴走しないように制御する、余計なことをさせないようにガードレールを張り巡らせることに頭を悩ませていた。Kiroが登場したときも、その延長線上にあった。 しかしGPT-5-Codexの登場で、その流れが変わった。 コンテキスト詰め込み時代の終わり 何が変わったの

はじめに 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