スキルをインストールする スキルを検索する それでは gh skill コマンドを使ってスキルをインストールしてみましょう。GitHub 上で公開されているスキルを探すには gh skill search コマンドが使用できます。もしくは skills.sh のようなスキルカタログサイトを参照しても良いでしょう。ここでは例として React に関するスキルを検索してみます。 gh skill search react 上記のコマンドを実行すると、GitHub Code Search API を通じて公開リポジトリ全体から、スキル名や説明に "react" というキーワードを含む SKILL.md が検索されます。検索結果からそのままチェックを入れてインストールできます。 スキルの内容を確認する ここでは https://github.com/vercel-labs/next-skills

HTML in Canvas API は WICG の提案段階にある実験的な API です。現時点では Chrome Canary の chrome://flags/#canvas-draw-element フラグを有効にすることで利用できます。 HTML in Canvas API の使用方法 HTML in Canvas API は以下の 3 つの要素で構成されています。 layoutsubtree 属性 drawElementImage() メソッド paint イベント canvas 要素に layoutsubtree 属性を追加することで、canvas 内に描画したい HTML を定義できます。この段階ではまだ canvas 内には描画されません。 <canvas id="canvas" width="400" height="300" layoutsubtree> <div i

WebMCP は Web 開発者が Web アプリケーションの機能をツールとして公開できるようにする JavaScript インターフェイスです。これにより AI エージェントが Web アプリケーションの機能を直接呼び出して操作できるようになります。 WebMCP は Web 開発者が Web アプリケーションの機能をツールとして公開できるようにする JavaScript インターフェイスです。これは AI エージェントや支援技術から呼び出せる自然言語による説明と構造化スキーマを備えた JavaScript 関数です。WebMCP を使用する Web アプリケーションは MCP サーバーとみなすことができます。これにより従来の AI エージェントがウェブページのスクリーンショットを解析して情報を取得するのではなく、Web アプリケーションが提供するツールを直接呼び出して操作できるようにな

AI を活用するための技術というのはとりわけ新しいものではなく、過去の知見を基盤として構築されていることが多いです。それゆえに、AI 時代だからこそ基礎的な知識を体系的に学ぶことができる書籍に学ぶことに価値を求めるのです。この記事では 2025 年に読んで特に印象に残った本をいくつか紹介します。 2025 年はとりわけ AI 関連の書籍が多く出版された年であったように感じました。しかし AI を活用するための技術というのはとりわけ新しいものではなく、過去の知見を基盤として構築されていることが多いです。コーディングの分野でも AI によるコード生成を魔法として捉えるのではなく、自分のプログラマーとしての能力を増幅させるためのツールとして捉え、ツールを熟達し磨き上げより良いものにすることが重要なのです。このことはまさに 達人プログラマー に書かれている内容と通じるものがあります。AI 時代だか

コーディングに AI エージェントを活用する流れはもはや避けられないものとなっています。しかし、AI エージェントによってコーディングの多くが自動化されると、開発者が自分の手でコードを書く機会は減少してしまうというジレンマがあります。Claude Code の学習モードを使用すると、自分の手でコードを書く練習ができます。学習モードでは、AI エージェントはユーザー自身にも一部のコードの生成を依頼します。この記事では、Claude Code の学習モードの使い方について解説します。 コーディングに AI エージェントを活用する流れはもはや避けられないものとなっています。AI エージェントは人間よりも早い速度で大量のコードを生成でき、開発者の生産性を大幅に向上させる可能性を秘めています。その一方で AI が生成したコードを正しく理解し、コードベースのアーキテクチャに一貫したスタイルで書かれてい

GOOGLE_GENERATIVE_AI_API_KEY=your_api_key src/index.ts を開き、Agent クラスに渡している model を google に変更します。 import { VoltAgent, Agent } from "@voltagent/core"; import { VercelAIProvider } from "@voltagent/vercel-ai"; import { google } from "@ai-sdk/google"; const agent = new Agent({ name: "my-agent-app", instructions: "A helpful assistant that answers questions without using tools", llm: new VercelAIProvide

Observable API は 2025 年 2 月現在 Chrome v135 以降で Experimental Web Platform features フラグを有効にしている場合のみ利用可能です。 Observable API は非同期イベントストリームを処理するための API です。EventTarget に .when() メソッドを追加し addEventListener() よりも宣言的で優れたイベントハンドリングを提供します。 .when() メソッドが呼び出された際に Observable インスタンスを返します。Observable インスタンスは rxjs の observable とよく似ています。.subscribe() メソッドが呼び出されると、Observable はイベントストリームを開始し、next ハンドラにイベントが通知されるたびにコールバック関数

CSSStyleSheet インターフェースは、JavaScript でスタイルシートを構築し、操作するための API です。CSSStyleSheet() コンストラクターで新しいスタイルシートを作成し、.replaceSync() メソッドでスタイルを適用できます。 CSSStyleSheet インターフェースは、JavaScript でスタイルシートを構築し、操作するための API です。CSSStyleSheet() コンストラクターで新しいスタイルシートを作成し、.replaceSync() メソッドでスタイルを適用できます。 スタイルが適用された CSSStyleSheet オブジェクトは、document.adoptedStyleSheets プロパティに代入することで、ページ全体に適用されます。 const styleSheet = new CSSStyleSheet();

宣言型 Shadow DOM は `<template>` 要素を使用して Shadow DOM を構築する方法です。宣言型 Shadow DOM を使用することで、従来の JavaScript を使用した Shadow DOM の構築方法と比較して、サーバーサイドレンダリング（SSR）に対応しているため、パフォーマンスの向上や SEO 対策に期待されます。 Shadow DOM は Web Components を構成する 3 つの技術の 1 つです。Shadow DOM はコンポーネントのカプセル化を実現します。Shadow DOM で定義されたスタイルは Shadow DOM の外部に影響を与えず、また外部のスタイルの影響を受けません。 Shadow DOM は再利用可能なコンポーネントを構築するために重要な技術ですが、従来は JavaScript を使用しなければ Shadow D

CloseWatcher API は UI を閉じる動作を処理するための API です。キーボードの `Esc` キー、Android の戻るボタンなどのデバイス固有のメカニズムによって閉じるイベントを提供します。 ダイアログやポップアップ、ピッカー、通知などの UI はユーザーによって閉じられることが想定されています。このような UI は閉じるボタンによって閉じられる他に、デバイス固有のメカニズムによっても閉じられることが期待されています。例えば、キーボードでは Esc キーを押すことで、Android では戻るボタンを押すことで UI を閉じることができます。 ブラウザの標準の要素を使用している場合、これらのメカニズムは自動的に提供されます。しかし、開発者が独自の UI を作成する場合、これらのメカニズムを実装する必要があり、困難な作業です。CloseWatcher API は、これら

mask-image プロパティは CSS でマスキングを行うためのプロパティであり、SVG アイコンを表示する際に有用です。mask-image プロパティを使用することで、外部の SVG ファイルを読み込みつつ、アイコンの色を CSS で指定することが可能になります。 HTML でロゴやアイコンを表示する時、SVG はよく使われるフォーマットです。SVG はベクター形式で記述されるため、拡大・縮小しても画質が劣化しないという特徴があります。SVG を HTML で表示する場合、以下のような方法が使われていました。 <img> 要素の src 属性に SVG ファイルのパスを指定する <svg> 要素を直接記述する svg スプライトを使用する それぞれの方法にはメリット・デメリットが存在します。<img> 要素を使用する場合には単に画像として扱われるため、アイコンの色を変えたりなどのス

Chrome 126 から Gemini Nano という AI がデスクトップクライアントに組み込まれる予定です。Gemini Nano は Google の AI モデルの中で最も小さいモデルです。デスクトップクライアントに直接組み込まれることで、ユーザーの手元の環境で AI を利用できることが特徴です。開発者は JavaScript から Chrome に組み込まれた Gemini Nano にアクセスして生成 AI の機能を実装することができます。 Chrome 126 から Gemini Nano という AI がデスクトップクライアントに組み込まれる予定です。Gemini Nano は Google の AI モデルの中で最も小さいモデルです。デスクトップクライアントに直接組み込まれることで、ユーザーの手元の環境で AI を利用できることが特徴です。 開発者は JavaScri

CSS の @container ルールは、コンテナ（親要素）の特性に基づいてスタイルを適用するためのルールです。コンテナースタイルクエリーはコンテナサイズクエリーとコンテナスタイルクエリーの 2 種類に分類されます。コンテナスタイルクエリは style() 関数記法で定義されたスタイルを @container ルールで評価し、指定された条件が一致する場合にスタイルが適用されます。 CSS の @container ルールは、コンテナ（親要素）の特性に基づいてスタイルを適用するためのルールです。コンテナースタイルクエリーは以下の 2 種類に分類されます。 コンテナサイズクエリー：コンテナ要素の現在のサイズに基づいてスタイルを適用する。e.g. @container (min-width: 30em) { ... } コンテナスタイルクエリー：コンテナ要素のスタイルに基づいてスタイルを適用す

いつの時代にも z-index の管理には頭を悩ませます。z-index の値には 1 以外の値を許可しないなどの管理方法がありますが、外部のライブラリを使用してる場合に勝つことができません。 そこで　z-index の値に calc(infinity) を指定すると、絶対に最前面に表示させることができます。 infinity は calc() の中で使用できる特殊な値です。名前の通り最も大きな値を表します。 そのため、どんなに大きな z-index の値を指定されても、calc(infinity) が最も大きな値になるため、最前面に表示されるわけですね。

チェックボックスなどと同じく、スイッチ UI のデフォルトのスタイルを変更しカスタマイズしたい場合には、appearance: none を指定してデフォルトのスタイルを無効化する必要があります。スイッチがオンの場合のスタイルは :checked 疑似クラスを使って指定できます。 input[type="checkbox"][switch] { appearance: none; background-color: #e5e5ea; position: relative; width: 78px; height: 48px; border-radius: 8px; } input[type="checkbox"][switch]::thumb { width: 42px; height: 42px; margin-top: 2px; margin-left: 2px; border-rad