🚀 コンポジション API - 開発の利器

🌟 紹介

Vant コンポジション API の世界へようこそ！🎉

@vant/use は様々な開発ツールが詰まった宝箱のような存在です 🧰。ここでは、一連の洗練されたコンポジション API を提供しています。これらの API は Vant コンポーネント内部で重要な役割を果たすだけでなく、日常の開発においても得力する助手となります！

🎯 なぜ @vant/use を選ぶのか？

• ⚡ 即座に使える：車輪の再発明をする必要がなく、実戦で検証済みの API をそのまま使用
• 🔧 高い再利用性：一度導入すれば、どこでも使用可能
• 📱 モバイル最適化：モバイルシーン向けに特別に最適化
• 🛡️ 型安全：完全な TypeScript サポート
• 🎨 Vue 3 ネイティブ：Composition API をベースに設計

📦 インストール

Vant の依存には既に @vant/use が含まれていますが、より良い開発体験と型ヒントを得るために、明示的にインストールすることを強く推奨します：

# npm を使用する場合
npm i @vant/use

# yarn を使用する場合
yarn add @vant/use

# pnpm を使用する場合
pnpm add @vant/use

# Bun を使用する場合
bun add @vant/use

🎮 クイックスタート

簡単な例を通して、コンポジション API の魅力を実感してみましょう！以下では useWindowSize を使用してウィンドウサイズをリアルタイムで取得します：

<template>
  <div class="window-info">
    <h3>📱 現在のウィンドウ情報</h3>
    <p>幅：{{ width }}px</p>
    <p>高さ：{{ height }}px</p>
    <p>スクリーンタイプ：{{ screenType }}</p>
  </div>
</template>

<script setup>
import { useWindowSize } from '@vant/use';
import { computed } from 'vue';

// ウィンドウサイズを取得し、自動的に変化に反応
const { width, height } = useWindowSize();

// 幅に基づいてデバイスタイプを判断
const screenType = computed(() => {
  if (width.value < 768) return '📱 モバイルデバイス';
  if (width.value < 1024) return '📟 タブレットデバイス';
  return '💻 デスクトップデバイス';
});
</script>

🎯 実際の使用シーン

📱 レスポンシブレイアウト制御

import { useWindowSize } from '@vant/use';

const { width } = useWindowSize();
const isMobile = computed(() => width.value < 768);

// スクリーンサイズに応じて動的にレイアウトを調整
watch(isMobile, (mobile) => {
  if (mobile) {
    // モバイルレイアウトのロジック
  } else {
    // デスクトップレイアウトのロジック
  }
});

🎪 インタラクティブ体験の最適化

import { useClickAway, useToggle } from '@vant/use';

const [visible, toggle] = useToggle(false);
const popupRef = ref();

// 外部領域をクリックしてポップアップを閉じる
useClickAway(popupRef, () => {
  if (visible.value) {
    toggle(false);
  }
});

📚 API リスト

以下は Vant が提供するすべてのコンポジション API です。それぞれが開発に役立つ実用的なツールです：

🔧 API 名	📝 機能説明	🎯 適用シーン
useClickAway	🖱️ 要素の外部クリックを監視	ポップアップ、ドロップダウンメニュー、検索提案
useCountDown	⏰ カウントダウン管理機能を提供	認証コード、イベントカウントダウン、限定セール
useCustomFieldValue	📝 カスタムフォームコンポーネント内のフィールド	フォームコンポーネント開発、データバインディング
useEventListener	👂 簡単にイベントをバインド	スクロール監視、キーボードイベント、タッチイベント
usePageVisibility	👁️ ページの可視状態を取得	動画再生制御、データポーリング最適化
useRect	📐 要素のサイズとビューポートに対する位置を取得	アニメーション位置決め、スクロール位置決め、衝突検出
useRelation	🔗 親子コンポーネント間の関係を確立	コンポーネントライブラリ開発、複雑なコンポーネント通信
useScrollParent	📜 要素の直近のスクロール可能な親要素を取得	無限スクロール、仮想スクロール、スクロール同期
useToggle	🔄 ブール値間の切り替えを行う	スイッチ制御、モーダル、アコーディオン
useWindowSize	📏 ブラウザウィンドウのビューポート幅と高さを取得	レスポンシブデザイン、チャートの自動調整
useRaf	🎬 requestAnimationFrame 管理機能を提供	アニメーション制御、パフォーマンス最適化、フレームレート制御

💡 ベストプラクティス

🎯 必要なものだけ導入

// ✅ 推奨：必要なものだけ導入
import { useWindowSize, useToggle } from '@vant/use';

// ❌ 避ける：全量導入
import * as VantUse from '@vant/use';

🔄 組み合わせて使用

// 複数の API を組み合わせて使用し、より強力な機能を作り出す
import { useWindowSize, useEventListener, useToggle } from '@vant/use';

export function useResponsiveMenu() {
  const { width } = useWindowSize();
  const [menuVisible, toggleMenu] = useToggle(false);
  
  // ESC キーを監視してメニューを閉じる
  useEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      toggleMenu(false);
    }
  });
  
  // デスクトップでは自動的にメニューを表示
  watch(width, (newWidth) => {
    if (newWidth >= 1024) {
      toggleMenu(true);
    }
  });
  
  return {
    menuVisible,
    toggleMenu,
    isMobile: computed(() => width.value < 768)
  };
}

🛠️ 開発スキル

📊 パフォーマンスモニタリング

import { useWindowSize, useRaf } from '@vant/use';

// ウィンドウサイズの変化頻度を監視
const { width, height } = useWindowSize();
let resizeCount = 0;

watch([width, height], () => {
  resizeCount++;
  console.log(`ウィンドウサイズ変更回数: ${resizeCount}`);
});

🎨 デバッグツール

// 開発環境用のデバッグアシスタント
if (process.env.NODE_ENV === 'development') {
  const { width, height } = useWindowSize();
  
  // コンソールに現在のウィンドウ情報を表示
  watch([width, height], ([w, h]) => {
    console.log(`🖥️ ウィンドウサイズ: ${w} x ${h}`);
  }, { immediate: true });
}

🌐 ブラウザ互換性

すべての API は広範な互換性テストを受けており、以下をサポートしています：

• ✅ 現代ブラウザ：Chrome 60+、Firefox 60+、Safari 12+
• ✅ モバイルブラウザ：iOS Safari 12+、Android Chrome 60+
• ✅ WeChat Mini Program：H5 ページをサポート
• ⚠️ IE ブラウザ：polyfill のサポートが必要

📖 関連ドキュメント

🎯 コアコンセプト

• Vue 3 Composition API - コンポジション API の設計理念を理解する
• VueUse - より多くの実用的な Vue コンポジションツールライブラリ

🛠️ 開発ツール

• Vue DevTools - Vue 公式の開発者ツール
• Vite - 推奨されるビルドツール
• TypeScript - 型安全な JavaScript

🎨 デザインシステム

• テーマカスタマイズ - コンポーネントのテーマをカスタマイズ

---

🎉 コンポジション API の旅を始めましょう！ 興味のある API を選び、詳細ドキュメントを表示して、開発をより効率的で楽しいものにしましょう！