フロントエンド27 件の記事

フロントエンド の記事

Oxc / Oxlint の歩き方 - Rust 製 JavaScript ツールチェーンと ESLint の現実的な付き合い方

Oxc / Oxlint の歩き方 - Rust 製 JavaScript ツールチェーンと ESLint の現実的な付き合い方

Rust 製の JavaScript ツールチェーン Oxc と、その目玉である高速リンタ Oxlint を整理します。Oxc が含むツール群(パーサ・Oxlint・Oxfmt・トランスフォーマ・リゾルバ・ミニファイア)、ESLint 比 50〜100倍という速度、tsgo による型認識リント、そして「全部置き換える」のではなく ESLint とどう分担するかを、導入判断の目線でまとめます。

React Router v7 の歩き方 - Declarative / Data / Framework の3モードと Remix 統合後の姿

React Router v7 の歩き方 - Declarative / Data / Framework の3モードと Remix 統合後の姿

React Router v7 を、3つのモード(Declarative / Data / Framework)という軸で整理します。単なるルーターから、ローダー・アクションを持つデータ駆動、さらに Vite プラグインで SSR まで含む「フレームワーク」へと段階的に広がる構造、Remix が React Router v7 に統合された経緯、そして Next.js 以外の選択肢としてどう位置づけるかを実務目線でまとめます。

Speculation Rules API 入門 - SPAでなくてもページ遷移を一瞬にする

Speculation Rules API 入門 - SPAでなくてもページ遷移を一瞬にする

Speculation Rules API を実務目線で整理します。script type=speculationrules の JSON でブラウザに prefetch / prerender を指示し、次に読まれるページを先読みして遷移を一瞬にする仕組みです。prefetch と prerender の違い、eagerness(immediate / eager / moderate / conservative)、list rules と document rules、そして prerender でアナリティクスが二重計上される落とし穴まで、ブログや EC で安全に使う勘所をまとめます。

Storybook 10 の歩き方 - コンポーネントカタログからテスト基盤へ、Figma 連携まで

Storybook 10 の歩き方 - コンポーネントカタログからテスト基盤へ、Figma 連携まで

Storybook 10 を、いまの立ち位置から整理します。コンポーネントを分離して開発する「カタログ」から、インタラクション・アクセシビリティ・ビジュアルを含むテスト基盤へと役割が広がりました。あわせて addon-designs や Storybook Connect、Figma Code Connect によるデザインとの往復を、実務の導入目線でまとめます。

Baseline 入門 - 「この機能もう使っていい?」をチームの共通語にする

Baseline 入門 - 「この機能もう使っていい?」をチームの共通語にする

Web の機能を採用するときの判断軸 Baseline を整理します。Newly available と Widely available の2段階、コアブラウザ集合の定義、Baseline 年バッジ、MDN / Can I Use / web.dev での表示、そして Browserslist や ESLint への組み込みまで。「caniuse を毎回見る」から「Baseline で判断する」へ、チームの共通言語にする方法をまとめます。

Zod 4 の歩き方 - 型と実行時バリデーションをつなぐ、LLM出力検証まで

Zod 4 の歩き方 - 型と実行時バリデーションをつなぐ、LLM出力検証まで

Zod 4 を実務目線で整理します。Zod 3 からの大幅な高速化とバンドル削減、z.email() などトップレベルに移った文字列フォーマット、error パラメータへ統一されたエラー指定、registry と .meta() によるメタデータ、z.toJSONSchema() での JSON Schema 変換、そして tree-shakable な Zod Mini まで。フォームや API 境界、LLM の構造化出力検証での使いどころをまとめます。

Angular 21 の zoneless 化 - Zone.js を外す変更検知の新標準と移行チェック

Angular 21 の zoneless 化 - Zone.js を外す変更検知の新標準と移行チェック

Angular 21 で標準になった zoneless 変更検知を整理します。長年 Angular の再描画を握ってきた Zone.js がなぜ外れるのか、Zone.js なしで何が変更検知を起動するのか(Signals・markForCheck・setInput・イベント・dirty view)、有効化と Zone.js 除去の手順、そして既存 Angular 案件の移行チェックリストを、React/Vue 勢にも分かるようにまとめます。

Chrome の組み込み AI APIs 入門 - ブラウザ内 Gemini Nano で何ができて何がまだ実験的か

Chrome の組み込み AI APIs 入門 - ブラウザ内 Gemini Nano で何ができて何がまだ実験的か

Chrome に搭載されたオンデバイス AI(Gemini Nano)を使う組み込み AI APIs を整理します。Translator・Summarizer・Language Detector・Prompt・Writer・Rewriter・Proofreader それぞれの安定度、availability から create で使う共通の作法、サーバー LLM との使い分け、そしてフォールバック設計まで、実務で踏むべき注意点をまとめます。

Tailwind CSS v4 実践移行 - JS設定から CSS-first と @theme へどう移すか

Tailwind CSS v4 実践移行 - JS設定から CSS-first と @theme へどう移すか

Tailwind CSS v4 への移行を、単なる新機能紹介ではなく「設定思想の転換」として整理します。自動アップグレードツール、@tailwind ディレクティブから @import への変更、tailwind.config.js から @theme への移行、@tailwindcss/postcss / vite などパッケージ分離、ブラウザ要件、詰まりやすいユーティリティ改名まで、移行設計の勘所をまとめます。

Claude Code 公式 frontend-design プラグイン - 「いかにもAI」なUIを脱する導入と仕組み

Claude Code 公式 frontend-design プラグイン - 「いかにもAI」なUIを脱する導入と仕組み

Anthropic 公式の frontend-design プラグインを実際に導入して中身まで確認します。インストール手順、スキル1つだけという構成、SKILL.md に書かれたデザイン哲学(避けるべき汎用AIデザイン、大胆な方向づけ、タイポグラフィ・配色・モーションの指針)、使い方と注意点を、手元の v1.0.0 を読みながら整理します。

Vite 7 と Rolldown - アップグレード前に押さえる Node 要件・ブラウザターゲット・バンドラ移行

Vite 7 と Rolldown - アップグレード前に押さえる Node 要件・ブラウザターゲット・バンドラ移行

Vite 7 の変更点を、アップグレードで詰まりやすい順に整理します。Node.js 20.19+/22.12+ 要件、デフォルトブラウザターゲットの baseline-widely-available への変更、Rust 製バンドラ Rolldown(rolldown-vite)への移行、Sass legacy API 削除など、移行前に知っておくべき差分をまとめます。

Passkeys / WebAuthn 入門 - パスワードレス認証を管理画面に入れる前に知っておくこと

Passkeys / WebAuthn 入門 - パスワードレス認証を管理画面に入れる前に知っておくこと

パスキー(Passkeys)と Web Authentication API(WebAuthn)の仕組みを、公開鍵暗号・登録/認証セレモニー・フィッシング耐性の観点から整理します。なぜパスワードより安全なのか、管理画面に導入するときの判断材料(復旧手段・MFAとの違い)まで、実装目線でまとめます。

Vitest 4 のブラウザモード - jsdom を卒業して実ブラウザでテストする

Vitest 4 のブラウザモード - jsdom を卒業して実ブラウザでテストする

2025年10月にリリースされた Vitest 4 で、ブラウザモードが experimental から安定版になりました。jsdom/happy-dom の擬似DOMではなく Playwright 経由で実ブラウザを使うこの機能を、設定方法・移行のポイント・toMatchScreenshot などの新機能とともに、本ブログの構成を例に整理します。

CSS 2026 - ブラウザに仕事をさせる新機能まとめ(contrast-color・shape・Anchor Positioning ほか)

CSS 2026 - ブラウザに仕事をさせる新機能まとめ(contrast-color・shape・Anchor Positioning ほか)

2026年にBaseline入りした、あるいは主要ブラウザが出揃ったCSSの新機能を整理します。contrast-color()、shape()、:active-view-transition、Anchor Positioning、@scope など、これまでJSやライブラリでやっていたことをブラウザ標準だけで実現する機能を、用途と注意点つきでまとめます。

Nuxt 4 徹底解説 - app/ ディレクトリ・データ層の刷新・TypeScript 分離と Nuxt 5 への準備

Nuxt 4 徹底解説 - app/ ディレクトリ・データ層の刷新・TypeScript 分離と Nuxt 5 への準備

Nuxt 4 の主要な変更点と新機能を、Nuxt 3 からの移行視点で整理します。新しい app/ ディレクトリ構造、シングルトン化されたデータフェッチング層(useAsyncData / useFetch)、TypeScript 設定のコンテキスト分離、CLI 高速化、Unhead v2、Vue Router v5、useAnnouncer などのアップデート、そして future.compatibilityVersion: 5 による Nuxt 5 への準備までを解説します。