Blog

コーディングエージェントに多く承認を求められると、本当に確認が必要なコマンドの実行を見落とす確率が高まります。Codex には smart_approvals という設定があります。これは承認が必要になったとき、その一部をそのままユーザーに投げるのではなく、まず guardian reviewer というサブエージェント経由で扱うための実験的な機能です。

Codex では hooks を使って、特定のタイミングで任意のコマンドを実行できます。例えば応答が終わるたびに通知したい場合は Stop hook を使います。

v2.1.85 で、Claude Code の hooks で if フィールドを指定できるようになりました。if フィールドには、フックが呼び出される条件を指定できます。条件に一致しない場合はプロセス自体が起動しないため、オーバーヘッド削減にもなります。

browserslist は、フロントエンド開発において、どのブラウザをサポートするかを指定するためのツールです。これにより、開発者はターゲットとするブラウザの範囲を簡単に定義でき、CSS や JavaScript のトランスパイルやポリフィルの適用を自動化できます。

GitHub Actions のワークフローで YAML アンカーがサポートされました。YAML アンカーを使用すると、ワークフロー内でコードの重複を避け、共通の設定を再利用できます

最近は npm パッケージのサプライチェーン攻撃が増えています。幸いほとんどの場合悪意のあるパッケージは公開から 1 週間以内に削除されるため、公開から一定期間が経過したパッケージのみをインストールすることでリスクを軽減できます。

コーディングエージェントを使用する際にはプロジェクトの技術スタックやビルド手順、コーディング規約を記載したドキュメントを用意して、コンテキストに含めるのが一般的な手法です。

しかし、　コーディングエージェントの製品ごとに異なるファイル名で用意しなければいけないという問題がありました。

従来の JavaScript では Cookie の管理は document.cookie を使用して文字列で行われていました。しかし、文字列での Cookie 管理は面倒で間違いやすいです。また document.cookie は同期的に動作するため、Cookie の更新が完了するまでイベントループがブロックされてしまいます。さらに document オブジェクトに依存しているため、Web Worker や Service Worker などの非同期環境では使用できません。

このような問題を解決するために、非同期 API CookieStore が導入されました。CookieStore は非同期的に Cookie の読み書きを行うことができ、さらに Cookie の属性をオブジェクトとして扱うことができます。

Claude Code でうっかりセッションを閉じてしまった経験が一度はあるのではないでしょうか？一度セッションを終了すると会話のコンテキストが失われてしまいますが、Claude Code では前回の会話の続きを開始する方法があります。

AI を使用してコードの生成を行う際、ある程度の時間待機する必要があります。その間ターミナルに張り付いて観察するのではなく、タスクが完了したタイミングで通知を受け取ることができれば、他の作業をしながら待機することができます。

Claude Code でタスクの完了を通知する方法を 3 つ紹介します。

Vitest では expectTypeOf や assetType を使って型のテストを書くことができます。自作のユーティリティ型が期待する型を返すか検査したり、言語ファイルの JSON スキーマが同じ型を返すことを確認するなどに利用できます。

Chrome Canary で CSS 関数のプロトタイプが実装されました。CSS Functions and Mixins Module という仕様に基づいて実装されており、@function ルールを使用して開発者が関数を定義できるようになります。

package.json は JSON フォーマットのファイルであるため、コメントを書くことができません。package.json に定義したスクリプトの説明を書いておくことは重要です。別のファイルに説明を書いたり、// で始まるキーを使用してコメントを書くハックが生まれるなど、様々な方法が考案されていたのが思い出されます。

TypeScript 5.8 で erasableSyntaxOnly フラグが追加される予定です。このフラグは enum や namespace、Class Parameter properties などの「消去可能ではない」構文をエラーとして検知するためのものです。

Node.js v23.6.0 から --experimental-strip-types フラグがデフォルトで有効になりました。これにより、Node.js でTypeScript を直接実行できるようになります。

Testing Library では要素の取得に失敗した場合にレンダリングされた HTML がコンソールに表示されます。しかし、デフォルトで出力される行は 7000 に制限されているため目的の要素が表示される前に表示が終了してしまうことがしばしばあります。

人為的な遅延を発生させるために、setTimeout を Promise をラップする方法がよく使われています。これにより、await を使って任意の秒数処理を遅らせることができます。

ユーザーのカラーテーマの設定によりスタイルを変更するためには、prefers-color-scheme メディアクエリを使用することが一般的です。しかし、多くのウェブサイトでは OS の設定とは独立してカラースキーマを設定する機能が提供されています。この場合、prefers-color-scheme メディアクエリを使用せずに、class 属性を使ったスタイルの切り替えが行われます。

JavaScript で配列にアクセスする際、配列の長さを超えるインデックスを指定すると undefined が返されることがあります。しかし、TypeScript の型定義上では、配列の長さを超えるインデックスを指定しても undefined 型が返されることはありません。これはランタイムエラーを引き起こす恐れがあります。

今までの React では ref をコンポーネントの Props として渡す際に、forwardRef を使ってラップする必要がありました。しかし、React v19 からは forwardRef が不要になり、ref を直接渡すことができるようになりました。

Math.max() は、引数に渡された数値のうち最大のものを返す JavaScript の組み込み関数です。この関数は任意の数の引数を受け取るので、配列最大値を求めたい場合にはスプレッド構文で展開して渡す使い方が一般的です。しかし、引数の数が多すぎるとエラーになることがあります。

::file-selector-button 疑似要素を使用することで、<input type="file"> 要素のデフォルトのボタンのスタイルをカスタマイズできます。現在すべてのモダンブラウザでサポートされています。

light-dark 関数は CSS のカラー関数で、引数に 2 つのカラー値を取り、ライトモードのときには 1 つ目の値をを、ダークモードのときには 1 つ目の値を返します。

color-scheme プロパティの値もしくはユーザーの OS のダークモード設定によって切り替わります。

従来までは、TypeScript で関数の引数の型を絞り込んだ結果を返す場合には、ユーザー定義型ガードとして x is string のような形式で型ガードを定義する必要がありました。TypeScript 5.5 では自動で型の絞り込みが推論されるようになります。

CSS のメディアクエリで比較演算子（<, >, <=, >=）が使えます。この記法を Range Syntax と呼びます。この記法は従来の min-width や max-width といった記法と比べて、より直感的に記述できるため便利です。

AbortController は、fetch API でリクエストをキャンセルするためのオブジェクトです。AbortController は複数のリクエストを 1 度にキャンセルできます。

CSS の reverse 系の値とは、flex-direction の row-reverse や column-reverse などのことです。これらの値は、アクセシビリティの観点からできる限り使用を避けるべきです。

npm は install の alias として isntall が用意されているので、typo して isntall と打ってもコマンドが実行されます。

clsx は、複数のクラス名を結合するための軽量ライブラリです。条件によってクラスを付け替えたり、グルーピングをする際に簡潔に記述できます。

いつの時代にも z-index の管理には頭を悩ませます。z-index の値には 1 以外の値を許可しないなどの管理方法がありますが、外部のライブラリを使用してる場合に勝つことができません。

そこで　z-index の値に calc(infinity) を指定すると、絶対に最前面に表示させることができます。

commonjs では __dirname と __filename でファイルのパスを取得できますが ES Modules では使えません。

今まで同等の API が存在していなかったのですが、Node.js v20.11.0 で import.meta.dirname と import.meta.filename が追加されました。

Mock Service Worke（MSW） v2 では　Web 標準の Fetch API をサポートしました。

すべての文字列を受け入れつつ、特定の文字列のみを補完候補に表示させたい場合があります。例えば、CSS の色を指定するプロパティの値には、カラーコードで指定する #000000 や #ffffff などの文字列を受け入れつつ、red や blue などの特定の文字列を指定します。

プリミティブな UI を構築するとき、button や input などの HTML 要素をラップしたコンポーネントを作成することがあります。このようなコンポーネントでは、HTML 要素の Props に加えて、コンポーネント固有の Props を定義することが多いです。

Object.groupBy 静的メソッドは、ES2024 で追加された配列をグループ化する関数です。配列の各要素に対してグループ化のキーを指定することで、グループ化されたオブジェクトを返します。

TailwindCSS で長いテキストを省略するときには、truncate クラスを使用します。しかし、truncate クラスは 1 行のテキストにしか対応していません。

tabIndex 属性は、フォーカス可能な要素を指定するための属性です。この属性自由な数値を指定できますが、これはアクセシビリティの観点から推奨されていません。

Svelte ではコンポーネントに Props を渡す際に省略記法が使えます。

GitHub Copilot Chat を VSCode で使用していると、エディタ上で ⌘ + i を押すと inline chat が表示されます。しかし、このショートカットはコードの補完を表示するためにも使われていました。このショートカットに慣れていた人にとっては、inline chat が表示されるのは意図しない動作でしょう。

details 要素は、開閉可能なコンテンツをマークアップするための要素です。details 要素に新たに name 属性が追加され排他的アコーディオンとして利用できるようになりました。

GitLens の使用時に、機械的にフォーマットされたコミットがあるとコードの変更履歴を確認する際に邪魔になってしまいます。この記事では、GitLens で特定のコミットを除外する方法を紹介します。

テキストの入力量に応じて自動で高さが変わる textarea をよく見かけると思います。Slack や X の入力欄がそうですね。

TailwindCSS v3.2 からは data 属性を使って、条件付きでスタイルを適用できます。