はじめに SvelteKitでは、+layout.ts、+layout.server.ts、+page.ts、+page.server.tsファイル内でそれぞれload関数を呼び出して値を返すことができます。しかし、同じキーの値を返した場合や、+page.tsと+page.server.tsでそれぞれ値を返す場合にどうなるかなど、少し分かりづらい点がありますので、ここでまとめて説明します。 動作確認環境 SvelteKit: 2.5.17 svelte: 4.2.18 実行される順序 +layout.server.ts (サーバー側のレイアウトデータ) ↓ +layout.ts (クライアント側のレイアウトデータ) ↓ +page.server.ts (サーバー側のページデータ) ↓ +page.ts (クライアント側のページデータ) +layout.tsと+page.tsの例

はじめに チーム開発で普段からpnpmを使っていますが、チーム内でpnpmとNode.jsのバージョンを統一して作業を進めたいと思い、できるだけ外部ツールを使わずに管理する方法を試してみました。こちらがとても便利だったので、共有いたします。 動作確認環境 Node.js 20.14.0 pnpm 9.4.0 macOS Sonoma 14.5 pnpmとは pnpmは、Node.jsエコシステムのパッケージマネージャーの一つです。npmやyarnと同様に、プロジェクトの依存関係を管理するためのツールですが、pnpmはいくつかの点で独自の特徴を持っています。 ディスクスペース効率: pnpmはハードリンク機能を使用して依存関係を共有するため、ディスクスペースの使用量が大幅に減少します。同じ依存関係を持つプロジェクトが複数あった場合でも、依存パッケージは一つの場所に置かれ、ハードリンクとして各

<script> import Header from './Header.svelte'; import './styles.css'; + import { onNavigate } from '$app/navigation'; + onNavigate(() => { + if (!document.startViewTransition) return; + + return new Promise((resolve) => { + document.startViewTransition(async () => { + resolve(); + await navigation.complete; + }); + }); + }); </script> <div class="app"> <Header /> <main> <slot /> </main> <footer> <

はじめに 皆さんはnpm, yarn, pnpmどのPackage Managerを使っていますか？ yarnしか使わない！という方もいるかもしれませんが、pnpm評判いいみたいだし使ってみようかなとか、チーム開発では安定のnpmなんだよなとか、複数のPackage Managerを使用するケースって少なくないかと思います。 そういった場合、それぞれのコマンドを覚えるのも面倒ですし、プロジェクトに応じて頭の切り替えをしないといけないのは大変です。 本記事は、そういった悩みを解決する方法を紹介します。 ni niはnpm,yarn,pnpm,bunに対応していて、それぞれのlockfileを読み取って、適切なコマンドを実行してくれるPackage Managerです。 niのコマンドは短く、わかりやすいのですぐ覚えられると思います。 ちなみに、作者はVueやNuxt、Viteなどのコアチーム