Category
フロントエンド（Next.js / React / UI / a11y）の実装ガイド
フロントエンドは「速さ・アクセシビリティ・型安全」を最初から設計に織り込む領域です。Next.js 16のサーバー中心レンダリングとキャッシュ、React 19の新フック、Core Web Vitals、WCAG準拠のa11y、Tailwind/shadcnのデザインシステム、そしてExpoによるモバイルまで——本番運用に耐えるUI/UXの作り方を扱います。
12 articles in total
Foundational guide
Foundational guide (start here)
Next.js 16 App Router Practical Guide: Designing Cache Components and Data Fetching with Real Code
A practical guide to the Next.js 16 App Router. The Server/Client Components boundary, data fetching and waterfall countermeasures, Cache Components (use cache, cacheLife, cacheTag), PPR, and safe mutations with Server Actions — explained with working code.
Related practical articles
- パッケージマネージャモノレポフロントエンドCI/CDセキュリティ
npm vs Yarn vs pnpm thorough comparison: a package-manager selection guide read through the official docs [2026 edition]
An accurate technical comparison of the differences between npm, Yarn, and pnpm based on each official documentation (as of June 2026). From the node_modules construction method, the blocking of phantom dependencies, disk efficiency, lockfiles, and monorepos, to the 'dependency scripts off by default' that works against supply-chain attacks, it systematizes selection criteria from the design philosophy.
19 min read - Next.jsパフォーマンスフロントエンドReactアクセシビリティ
Core Web Vitals optimization guide [2026 edition] — improving INP, LCP, and CLS with Next.js to grow SEO and CV
A practical guide to improving 2026's Core Web Vitals (INP, LCP, CLS) with Next.js. With real code, it explains production-quality techniques: crushing the most failure-prone INP, image/font/SSR optimization to get LCP under 2.5 seconds, dimension reservation to bring CLS near zero, and field measurement (web-vitals / RUM).
8 min read - React NativeExpoTypeScriptEASCI/CD
Expo Production Operation Guide 2026: Expo Router, CNG, EAS, and OTA Updates Explained in Real Code
A practical guide to fully using Expo SDK 56 (React Native 0.85 / React 19.2, New Architecture standard) in production. Explained with working code from a real monorepo: Expo Router v7's file-based routing, CNG (Continuous Native Generation) and config plugins, EAS Build/Update/Submit/Workflows, and the runtimeVersion design of OTA updates that prevents accidents.
17 min read - Next.jsフロントエンドアクセシビリティTypeScriptアーキテクチャ設計
Playwright E2E test design guide [2026 edition] — unbreakable, fast, trustworthy tests at production quality
A complete guide to designing production-quality E2E tests with Playwright. With real code, it explains: eliminating flakes with role-based locators and web-first assertions (auto-waiting), mocking external APIs, inspecting a11y in CI, a configuration that runs against the production build, observability with traces/reports, and CI sharding.
8 min read - Reactパフォーマンスフロントエンドa11yTypeScript
Building a Large-Scale Frontend Fast and Accessibly with React 19: Code Splitting, React Compiler, Bundle Optimization, and a11y/i18n in Practice
An implementation guide for building a large-scale SPA/web app fast and accessibly with React 19. Shrink the initial bundle with route-level code splitting via lazy+Suspense, auto-memoize with React Compiler, optimize bundles with manualChunks, handle a11y (ARIA/keyboard operation/focus management/prefers-reduced-motion), and scale multilingual support — all with real code faithful to the official docs.
27 min read - ReactNext.jsフロントエンドTypeScriptパフォーマンス
A thorough guide to React 19's new hooks [2026 edition] — mastering use and useOptimistic at production quality
A practical guide to mastering React 19's new APIs, use and useOptimistic, at production quality. With real code it covers: in-render async reads with use(promise) and Suspense streaming, the infinite-suspend pitfall, instant feedback and automatic rollback with useOptimistic, and accessibility, security, and testing.
8 min read - ReactNext.jsフロントエンドアクセシビリティTypeScript
Web accessibility implementation guide [2026 edition] — practical techniques to comply with WCAG 2.2 in React / Next.js
A complete guide to accessibility implementation that complies with WCAG 2.2 (AA) in React / Next.js. With real code it explains semantic HTML, keyboard operation, focus management, the correct use of ARIA, forms, contrast, prefers-reduced-motion, the new WCAG 2.2 criteria, and automated testing with axe.
10 min read - ReactTailwind CSSTypeScriptフロントエンドアクセシビリティ
shadcn/ui design guide [2026 edition] — an ownable design system built with cva, cn, and Slot
A complete guide to designing shadcn/ui as a production-quality design system. With real code, it explains: the advantages of the 'own the code' model rather than an npm dependency, variant design with class-variance-authority (cva), the role of cn(), polymorphism with asChild / Slot, CSS-variable themes, extension via composition, a11y, and organization-wide deployment with a custom registry.
8 min read - Tailwind CSSフロントエンドアクセシビリティNext.jsアーキテクチャ設計
Tailwind CSS v4 practical guide [2026 edition] — CSS-first design, design tokens, dark mode, and a11y at production quality
A complete guide to mastering Tailwind CSS v4's CSS-first configuration (@import / @theme / @custom-variant) at production quality. With real code it explains single-source management of design tokens, the pitfall of runtime-switching dark-mode design, fluid typography, container queries, and accessibility support such as prefers-contrast / forced-colors.
9 min read - ReactTanStack QueryTypeScriptNext.js状態管理
TanStack Query v5 Practical Guide [2026 Latest] — Type-Safe Cache Design, Optimistic Updates, Next.js App Router Integration
A TanStack Query practical guide faithful to the latest official documentation (the v5.101 family). Explains 'when and how to use it' with production-quality code examples: the new Mutation callbacks (context.client), type-safe design with queryOptions, predicate invalidation, two methods of optimistic updates, and Next.js App Router prefetch / hydration.
17 min read - Next.jsTypeScriptApp Routerキャッシュ管理トラブルシューティング
The time I burned half a day after being told 'revalidateTag works sometimes and not others' — the pitfall of the Next.js App Router's 4-layer cache
A real experience of stepping on the mysterious bug in production where the Next.js App Router's `revalidateTag` 'only works sometimes,' until I realized the cause was not the Data Cache but the client's Router Cache. A troubleshooting record organizing the responsibilities of the 4-layer cache and the invalidation means of each.
10 min read