Blog

Web開発とフロントエンド技術に関する記事を探索しましょう

Element-scoped View Transitions で要素ごとに View Transition を実行する

`document.startViewTransition()` の遷移はドキュメント全体で 1 つしか実行できず、ページ全体の上に描画されます。`element.startViewTransition()` を使うと、遷移を特定の要素に限定して、複数の遷移を同時に実行できます。この記事では、2 つのリストを同時にアニメーションさせる例を通じて基本的な使い方を紹介します。

Go でデスクトップアプリを作る MyGo を試してみた

MyGo は Go でデスクトップアプリを作るフレームワークです。OS の WebView に Web の画面を表示し、Go のメソッドから生成した TypeScript クライアントでネイティブ機能を呼び出せます。この記事ではテキストをファイルに保存するメモアプリを作り、macOS で起動・保存・ビルドを試します。

CSS の margin-trim でコンテナーの端の余白を取り除く

カードの内側に padding を設定しても、先頭の見出しや最後の段落の margin が加わり、上下の余白が意図より大きくなることがあります。margin-trim を使うと、要素間の余白を保ったまま、コンテナーの端のマージンを取り除けます。カードの例を通して、基本的な使い方を紹介します。

MCP サーバーからエージェントスキルを配布する Skills Extension

MCP サーバーが提供するツールを使いこなすには、複数のツールを組み合わせる手順や判断基準も必要です。Skills Extension は、こうした知識を記した Agent Skills を MCP 経由で発見・取得するための拡張です。この記事では設計の背景、スキルを段階的に読み込む仕組み、Node.js での実装例と対応状況を紹介します。

json-render と Jev で UI を組み立ててみた

json-render の Jev 連携では、文言やデータを含むコンポーネントの候補を用意し、モデルに選択と配置を任せます。従来の json-render では、モデルが新しい Props を生成していました。この記事では Jev 連携の仕組みと、従来の json-render との違いを紹介します。

TypeSafe AI の Jev を TypeScript で試してみた

Jev は入力された状態に対して、選択肢の判定や段階評価、真である確率を返すモデルです。この記事では TypeScript で問い合わせを評価し、実際の出力をもとに担当部署や人の確認へ振り分ける処理を紹介します。

React 互換の軽量ランタイム TanStack Redact とは

TanStack Redact は、React のコンポーネントや Hooks の書き方を引き継ぐ軽量ランタイムです。同期描画を採用しており、React と同じ API があっても動作が異なる部分があります。この記事では基本的な導入方法と設計思想を説明し、同じ商品一覧を React と Redact で動かし、startTransition の動作の違いを確かめます。