Svelte/SvelteKit

SvelteKitを中心としたフルスタックWEB開発の知見。ルーティング・SSR・状態管理からパフォーマンスチューニングまで、実装レベルのノウハウを発信します。

11件の記事

Svelte + Tauriでデスクトップ開発

デスクトップアプリの開発でSvelte + Tauri(Rust)を選んだ理由と、実際に重い処理を書いた上で見えてきたメリット・デメリットを実体験ベースで整理します。「TauriとSvelteでネイティブアプリを作ってみた」という入門記事ではなく、実装を通して得られた知見に絞った内容です。開発していたプロジェクトの詳細は記事末尾で触れています。

storeを使わずrunesだけでグローバル状態を作る——SvelteKitの多言語切り替えを3層で実装する

モジュールスコープに置いた$stateは、writableストアを使わずにアプリ全体で共有できる「グローバル変数」として機能します。ただしSvelteKitのSSRではこれだけでは足りません。多言語切り替えを例に、クライアントのリアクティブ更新・SSRでの初期表示・チラつき防止という3つの役割をどう分担させるかを整理します。

state_referenced_locallyの警告が出たら——propsから$stateを初期化する正しい書き方

propsの値をそのまま$stateの初期値に使うと、Svelteのコンパイラがstate_referenced_locallyという警告を出すことがあります。この警告が何を指摘しているのか、$derivedとuntrack()のどちらで解決すべきかを実例で整理します。

画像やアイコンは/staticか$lib/assetsか、配置先の使い分け

SvelteKitでは画像の置き場所として/staticと$lib/assetsの2つの選択肢があります。見た目には似ていますが、Viteによる処理の有無という決定的な違いがあるため、用途に応じて使い分ける必要があります。

アプリだけじゃない。WEBサイト制作にも最適なSvelteKit

SvelteKitはSPAやダッシュボードのようなWebアプリ向けという印象を持たれがちですが、静的サイト生成と相性が良く、レンタルサーバーでも動かせる軽量なコーポレートサイト構築にも十分な選択肢になります。実際にこのサイト自体もSvelteKitで作られています。

Tailwind CSSは使うべきか？——Alcogyがscssを選ぶ理由

Tailwind CSSはutility-firstで開発速度を上げてくれる一方、AlcogyはSvelteの<style lang="scss">とapp.scssのグローバル変数で統一しています。採用しなかった理由と、逆にTailwindが向いているケースを解説します。

Next.jsとSvelteKitのコーディング的な違い

仮想DOMかコンパイラかというアーキテクチャの話や、Vercelのゼロコンフィグデプロイのようなインフラの話は一旦置いて、実際に手を動かすときのコーディング面での違いを比較します。

Svelteのstateをコンポーネントの外に出す

SvelteKitのコンポーネントはstateとロジックを書き込むほど肥大化していきます。Alcogyが実践している「stateを.svelte.tsに出す」設計と、classではなく関数で管理している理由を解説します。

+page.server.tsと+page.tsの使い分け

SvelteKitの+page.server.tsと+page.tsはどちらもデータ取得に使えますが、実行環境と用途が異なります。Alcogyの実装判断基準を実例とともに紹介します。

Svelte 5のrunesでコンポーネント設計はどう変わったか

$state・$derived・$propsといったrunes構文の導入で、コンポーネント間のデータの流れが明快になりました。旧stores構文との違いと実務での恩恵を整理します。

$libとファイルベースルーティングで保守しやすい構成を作る

SvelteKitのファイルベースルーティングと$libエイリアスは、使い方次第で保守性が大きく変わります。ページ固有ロジックと共通ロジックの線引きをAlcogyの実例で解説します。