Snapkit Logo

React統合#

@snapkit-studio/reactパッケージは、Snapkitの画像最適化機能をReactアプリケーションにシームレスに統合することを提供します。

インストール#

ReactプロジェクトにSnapkitをインストール：

npm install @snapkit-studio/react
# または
yarn add @snapkit-studio/react
# または
pnpm add @snapkit-studio/react

クイックスタート#

環境設定#

まず、環境変数を設定してください：

VITE_SNAPKIT_ORGANIZATION_NAME=your-organization-name
VITE_SNAPKIT_DEFAULT_QUALITY=85
VITE_SNAPKIT_DEFAULT_OPTIMIZE_FORMAT=auto

基本的な使用法#

ReactアプリケーションでSnapkitを使用する最も簡単な方法：

import { Image } from '@snapkit-studio/react';
 
function MyComponent() {
  return (
    <Image
      src="/project/hero.jpg"
      alt="ヒーロー画像"
      width={800}
      height={600}
      priority
      transforms={{ format: 'auto' }}
    />
  );
}

SnapkitProviderの使用（推奨）#

複数の画像と一元化された設定を持つアプリケーションの場合：

import { SnapkitProvider, Image } from '@snapkit-studio/react';
 
function App() {
  return (
    <SnapkitProvider
      baseUrl="https://snapkit-cdn.snapkit.studio"
      organizationName="your-org"
      defaultQuality={85}
      defaultFormat="auto"
    >
      <YourApplication />
    </SnapkitProvider>
  );
}
 
function YourApplication() {
  return (
    <Image
      src="/hero.jpg"
      alt="ヒーロー画像"
      width={800}
      height={600}
    />
  );
}

主な機能#

自動フォーマット最適化#

Snapkitはブラウザサポートに基づいて自動的に最適な画像フォーマットを選択します：

<Image
  src="/product.jpg"
  alt="製品"
  width={400}
  height={300}
  transforms={{ format: 'auto' }}
/>

視覚的変換#

様々な視覚効果と変換を適用：

// グレースケール効果
<Image
  src="/photo.jpg"
  transforms={{ grayscale: true }}
/>
 
// ブラー効果
<Image
  src="/background.jpg"
  transforms={{ blur: 20 }}
/>
 
// 反転と回転
<Image
  src="/icon.png"
  transforms={{
    flip: true,
    rotate: 90
  }}
/>

領域抽出#

画像から特定の領域を抽出：

<Image
  src="/large-image.jpg"
  transforms={{
    extract: {
      x: 100,
      y: 100,
      width: 400,
      height: 300
    }
  }}
/>

パフォーマンス最適化#

優先読み込み#

すぐに読み込むべきabove-the-fold画像の場合：

<Image
  src="/hero-banner.jpg"
  priority={true}
  width={1200}
  height={600}
/>

遅延読み込み#

初期ページ読み込みを改善するbelow-the-fold画像の場合：

<Image
  src="/footer-image.jpg"
  loading="lazy"
  width={600}
  height={400}
/>

ネットワーク認識品質調整#

ネットワーク状況に基づく動的品質最適化：

<Image
  src="/high-res.jpg"
  width={1200}
  height={800}
  transforms={{
    quality: 'auto' // 接続速度に基づいて調整
  }}
/>

レスポンシブ画像#

フィルモード#

コンテナを埋める画像の場合：

<div className="relative w-full h-64 rounded-lg overflow-hidden">
  <Image
    src="/background.jpg"
    fill={true}
    className="object-cover"
    alt="背景"
  />
</div>

レスポンシブサイジング#

異なる画面サイズ用のsrcset生成：

<Image
  src="/responsive.jpg"
  width={800}
  height={600}
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 800px"
  transforms={{ format: 'auto' }}
/>

バンドルサイズ最適化#

最適化されたインポート（〜9KB）#

バンドルサイズが重要なアプリケーションの場合：

import { Image } from '@snapkit-studio/react/image';
 
// providerなしで使用 - propsで設定
<Image
  src="/photo.jpg"
  baseUrl="https://your-cdn.snapkit.studio"
  organizationName="your-org"
  width={400}
  height={300}
/>

フルバンドル（〜22KB）#

一元化された設定のためにproviderパターンを使用する場合：

import { Image, SnapkitProvider } from '@snapkit-studio/react';

高度な設定#

カスタムローダー#

特定の要件のためのカスタム画像ローダーを作成：

const customLoader = ({ src, width, quality }) => {
  const params = new URLSearchParams({
    w: width.toString(),
    q: (quality || 75).toString(),
  });
 
  return `https://your-cdn.snapkit.studio/${src}?${params}`;
};
 
<Image
  loader={customLoader}
  src="image.jpg"
  width={400}
  height={300}
/>

TypeScriptサポート#

型安全な変換を持つ完全なTypeScriptサポート：

import { Image, type ImageTransforms } from '@snapkit-studio/react';
 
const transforms: ImageTransforms = {
  format: 'webp',
  quality: 90,
  blur: 0,
  grayscale: false,
};
 
<Image
  src="/typed-image.jpg"
  transforms={transforms}
  width={600}
  height={400}
/>

ベストプラクティス#

  1. 複数画像にProviderを使用: アプリケーションに多くの画像がある場合はSnapkitProviderを使用して繰り返し設定を避けてください。

  2. 重要な画像を最適化: above-the-fold画像にはpriority={true}を使用してLCP（Largest Contentful Paint）を改善してください。

  3. Below-fold画像の遅延読み込み: すぐに見えない画像にはloading="lazy"を使用して初期ページ読み込みを改善してください。

  4. 適切な寸法を設定: レイアウトシフト（CLS）を防ぐために常にwidthとheightを提供してください。

  5. 自動フォーマットを使用: transforms={{ format: 'auto' }}でSnapkitが自動的に最適なフォーマットを選択するようにしてください。

移行ガイド#

ネイティブIMGタグから#

// 前
<img
  src="/image.jpg"
  alt="説明"
  width="400"
  height="300"
/>
 
// 後
<Image
  src="/image.jpg"
  alt="説明"
  width={400}
  height={300}
  transforms={{ format: 'auto' }}
/>

他の画像コンポーネントから#

ほとんどの画像コンポーネントは最小限の変更で直接置き換えることができます：

// 前（他のライブラリ）
<OptimizedImage
  source="/photo.jpg"
  width={500}
  height={400}
/>
 
// 後（Snapkit）
<Image
  src="/photo.jpg"
  width={500}
  height={400}
  transforms={{ format: 'auto' }}
/>

トラブルシューティング#

よくある問題#

  1. 画像が読み込まれない: baseUrlとorganizationNameが正しく設定されていることを確認してください。

  2. TypeScriptエラー: 最新バージョンの@snapkit-studio/reactがインストールされていることを確認してください。

  3. レイアウトシフト: 常に明示的なwidthとheight属性を提供してください。

  4. ぼやけた画像: 画像を元のサイズを超えて拡大していないことを確認してください。

ブラウザサポート#

  • AVIF: Chrome 85+, Firefox 93+, Safari 16+
  • WebP: Chrome 23+, Firefox 65+, Safari 14+
  • 遅延読み込み: Chrome 76+, Firefox 75+, Safari 15.4+

主要機能の要約#

  • 自動フォーマット検出（AVIF、WebP、JPEG）
  • Next.js Imageコンポーネント互換性
  • TypeScriptサポート
  • レスポンシブ画像読み込み
  • DPRベース最適化
  • 遅延読み込み
  • ネットワーク認識品質調整

リソース#