svelte/reactivity/window - リアクティブなウィンドウ値

<script lang="ts">
  import { innerWidth, innerHeight } from 'svelte/reactivity/window';
</script>

<p>ウィンドウサイズ: {innerWidth.current}x{innerHeight.current}</p>

<script lang="ts">
  import {
    innerWidth,
    innerHeight,
    outerWidth,
    outerHeight
  } from 'svelte/reactivity/window';
</script>

<div class="size-display">
  <p>内側サイズ: {innerWidth.current}x{innerHeight.current}</p>
  <p>外側サイズ: {outerWidth.current}x{outerHeight.current}</p>
</div>

<script lang="ts">
  import { scrollX, scrollY } from 'svelte/reactivity/window';

  // スクロール位置に基づく派生値
  let showBackToTop = $derived((scrollY.current ?? 0) > 300);
</script>

<div class="scroll-indicator">
  スクロール: ({scrollX.current}, {scrollY.current})
</div>

{#if showBackToTop}
  <button
    class="back-to-top"
    onclick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
  >
    トップへ戻る
  </button>
{/if}

<script lang="ts">
  import { screenLeft, screenTop } from 'svelte/reactivity/window';
</script>

<p>ウィンドウ位置: ({screenLeft.current}, {screenTop.current})</p>

<script lang="ts">
  import { devicePixelRatio } from 'svelte/reactivity/window';
</script>

<p>デバイスピクセル比: {devicePixelRatio.current}</p>

<script lang="ts">
  import { online } from 'svelte/reactivity/window';
</script>

{#if online.current}
  <span class="status online">オンライン</span>
{:else}
  <span class="status offline">オフライン</span>
{/if}

<script lang="ts">
  import { innerWidth } from 'svelte/reactivity/window';

  // ブレークポイントの定義
  const breakpoints = {
    mobile: 640,
    tablet: 1024,
    desktop: 1280
  };

  let deviceType = $derived(() => {
    const width = innerWidth.current ?? 0;
    if (width < breakpoints.mobile) return 'mobile';
    if (width < breakpoints.tablet) return 'tablet';
    if (width < breakpoints.desktop) return 'laptop';
    return 'desktop';
  });

  let isMobile = $derived((innerWidth.current ?? 0) < breakpoints.mobile);
</script>

<div class="layout" class:mobile={isMobile}>
  <header>
    {#if isMobile}
      <button class="menu-toggle">メニュー</button>
    {:else}
      <nav>
        <a href="/">ホーム</a>
        <a href="/about">概要</a>
        <a href="/contact">連絡先</a>
      </nav>
    {/if}
  </header>

  <main>
    <p>現在のデバイス: {deviceType}</p>
  </main>
</div>

<script lang="ts">
  import { scrollY } from 'svelte/reactivity/window';

  // 前回のスクロール位置を追跡
  let prevScrollY = $state(0);

  // スクロール方向を検出
  let isScrollingDown = $derived(() => {
    const current = scrollY.current ?? 0;
    const down = current > prevScrollY;
    // 次回の比較のために保存
    prevScrollY = current;
    return down;
  });

  // ヘッダーの表示/非表示
  let showHeader = $derived(() => {
    const y = scrollY.current ?? 0;
    // 上部近くでは常に表示
    if (y < 100) return true;
    // 上にスクロール中は表示
    return !isScrollingDown;
  });
</script>

<header class:hidden={!showHeader}>
  <nav>ナビゲーション</nav>
</header>

<style>
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: white;
    transition: transform 0.3s;
  }

  header.hidden {
    transform: translateY(-100%);
  }
</style>

<script lang="ts">
  import { online } from 'svelte/reactivity/window';
  import { fly } from 'svelte/transition';

  let wasOffline = $state(false);

  // オンラインに戻った時に通知
  let showReconnected = $derived(() => {
    if (!online.current) {
      wasOffline = true;
      return false;
    }
    if (wasOffline) {
      // 3秒後に非表示
      setTimeout(() => wasOffline = false, 3000);
      return true;
    }
    return false;
  });
</script>

{#if !online.current}
  <div class="notification offline" transition:fly={{ y: -50 }}>
    インターネット接続がありません
  </div>
{/if}

{#if showReconnected}
  <div class="notification online" transition:fly={{ y: -50 }}>
    接続が回復しました
  </div>
{/if}

<style>
  .notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1rem 2rem;
    border-radius: 8px;
    z-index: 1000;
  }

  .offline {
    background: #dc3545;
    color: white;
  }

  .online {
    background: #28a745;
    color: white;
  }
</style>

<script lang="ts">
  import { devicePixelRatio } from 'svelte/reactivity/window';

  let { src, alt }: { src: string; alt: string } = $props();

  // デバイスピクセル比に応じた画像サイズを計算
  let imageSuffix = $derived(() => {
    const dpr = devicePixelRatio.current ?? 1;
    if (dpr >= 3) return '@3x';
    if (dpr >= 2) return '@2x';
    return '';
  });

  let imageSrc = $derived(() => {
    const [name, ext] = src.split('.');
    return `${name}${imageSuffix}.${ext}`;
  });
</script>

<img src={imageSrc} {alt} />

<script lang="ts">
  import { scrollY, innerHeight } from 'svelte/reactivity/window';

  let documentHeight = $state(0);

  // ドキュメントの高さを取得
  $effect(() => {
    documentHeight = document.documentElement.scrollHeight;
  });

  // スクロール進捗（0-100）
  let scrollProgress = $derived(() => {
    const y = scrollY.current ?? 0;
    const height = innerHeight.current ?? 0;
    const maxScroll = documentHeight - height;
    if (maxScroll <= 0) return 0;
    return Math.min(100, (y / maxScroll) * 100);
  });
</script>

<div
  class="progress-bar"
  style="width: {scrollProgress}%"
></div>

<style>
  .progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: #ff3e00;
    z-index: 1000;
    transition: width 0.1s;
  }
</style>

<script lang="ts">
  import { innerWidth } from 'svelte/reactivity/window';
  import { browser } from '$app/environment';

  // サーバーサイドでのフォールバック
  let width = $derived(innerWidth.current ?? 1024);

  // または browser チェックを使用
  let isMobile = $derived(() => {
    if (!browser) return false;
    return (innerWidth.current ?? 0) < 640;
  });
</script>

{#if browser}
  <p>ウィンドウ幅: {innerWidth.current}px</p>
{:else}
  <p>クライアントサイドでレンダリングされます</p>
{/if}

<script lang="ts">
  let innerWidth = $state(0);
  let scrollY = $state(0);
</script>

<svelte:window bind:innerWidth bind:scrollY />

<p>幅: {innerWidth}, スクロール: {scrollY}</p>

<script lang="ts">
  import { innerWidth, scrollY } from 'svelte/reactivity/window';
</script>

<p>幅: {innerWidth.current}, スクロール: {scrollY.current}</p>

interface ReactiveValue<T> {
  readonly current: T;
}

// 各値の型
const innerWidth: ReactiveValue<number | undefined>;
const innerHeight: ReactiveValue<number | undefined>;
const outerWidth: ReactiveValue<number | undefined>;
const outerHeight: ReactiveValue<number | undefined>;
const scrollX: ReactiveValue<number | undefined>;
const scrollY: ReactiveValue<number | undefined>;
const screenLeft: ReactiveValue<number | undefined>;
const screenTop: ReactiveValue<number | undefined>;
const devicePixelRatio: { readonly current: number | undefined };
const online: ReactiveValue<boolean | undefined>;