engineer.notes

try / verify / log

2026.07.26

engineer.notes
engineer.notes // programming, servers, networks, security, AI — engineer's working notes, indexed for later lookup.
検索
タグ

フロントエンド

フロントエンド に関連する記事をまとめています。

プログラミング フレームワーク ソフトウェア 2026.07.04 38

Viteとは？爆速の開発サーバーとビルドツール、Rolldownまで解説

Viteとは何かを、爆速の開発サーバーとビルドツールという観点で解説します。Viteは、開発中はブラウザ標準のES Modulesを使って一瞬で起動しHMR（保存即反映）が速い開発サーバーと、本番用にまとめて最適化するビルドの両方を担うツールです。React・Vue・Svelte・Astroなど多くのフレームワークの土台として使われています。2026年はRust製バンドラRolldownへの移行が進み、Vite 8ではビルドが大幅に高速化しました。何がうれしいのか、仕組み、どこで使われているかまで、初心者にも分かるように整理します。
# 開発環境 # フロントエンド # Vite
フレームワーク 2026.07.04 44

AstroとNext.jsはどっち？用途別の使い分けを判断軸で整理

AstroとNext.jsのどちらを選ぶかを、用途別の使い分けとして判断軸で整理します。ざっくり、コンテンツ中心の軽いサイト（ブログ・LP・ドキュメント・コーポレート）はAstro、アプリのように動的なプロダクト（SaaS・管理画面・EC）はNext.jsが基本です。両者の設計思想の違い、性能（送るJSの量）、開発体験、判断チェックリスト、迷いやすいケースまで、実務目線でまとめます。
# Next.js # React # フロントエンド
フレームワーク 2026.07.04 42

アイランドアーキテクチャ（Astro Islands）とは？必要な所だけ動かす仕組みを解説

アイランドアーキテクチャ(Astro Islands)とは何かを、必要な所だけ動かす仕組みという観点で解説します。ページの大部分を静的HTMLで返し、対話が必要な部分だけを「島」として切り出してそこだけJavaScriptを読み込む設計です。従来の全ページハイドレーションとの違い、client:load/idle/visibleなどのディレクティブ、複数UIフレームワークの混在、Server Islandsで動的な部分だけ後から差し込む仕組み、向く場面と限界まで、Astro公式の考え方に沿って整理します。
# フロントエンド # Astro # パフォーマンス
フレームワーク プログラミング ソフトウェア 2026.05.15 104

Svelte / SvelteKit とは何か？コンパイル型 UI フレームワークの特徴と React との使い分け

Svelte は 「仮想 DOM ではなくコンパイル時に最適化された JS を出力する UI フレームワーク」 で、Svelte 5 では新しい 「Runes API」 によりリアクティビティが大きく刷新されました。SvelteKit はそれを土台にしたフルスタックフレームワークで、SSR / SSG / Edge をサポート。React との違い、書き味、採用判断軸を整理します。
# TypeScript # React # フロントエンド
プログラミング フレームワーク ソフトウェア 2026.05.15 111

Tailwind CSS v4 とは何が変わったか？Oxide エンジン・CSS first 設定・自動コンテンツ検出を整理

Tailwind CSS v4 は、Rust 製の新エンジン Oxide、CSS first の設定方式(「@theme」)、自動コンテンツ検出など、v3 から大きく変わったメジャーバージョンです。何が変わったのか、移行で気をつけるポイント、「tailwind.config.js が消えた」 と聞いた人向けの実体まで整理します。
# フロントエンド # Tailwind # CSS