T-CREATOR

Astro × React/Vue/Svelte/Preact：混在 UI の最強戦略

Astro × React/Vue/Svelte/Preact：混在 UI の最強戦略

現代の Web 開発では、プロジェクトの要件に応じて最適な UI フレームワークを選択することが重要になっています。しかし、一つのプロジェクトで複数のフレームワークを使い分けたいと思ったことはありませんか？

Astro なら、React、Vue、Svelte、Preact を同一プロジェクト内で自由に組み合わせることが可能です。この革新的なアプローチにより、各フレームワークの長所を最大限に活用した、まさに「最強」の開発戦略を実現できるのです。

背景

現代の Web 開発における UI フレームワーク選択の課題

Web 開発の現場では、プロジェクトごとに異なる要件や制約に直面します。データの可視化が重要なダッシュボードでは React の豊富なエコシステムが有利で、リアルタイムなユーザーインターフェースには Vue の双方向バインディングが威力を発揮します。

一方で、パフォーマンスを重視するモバイル向けアプリケーションでは Svelte の軽量性が魅力的ですし、既存の React コードベースとの互換性を保ちながら軽量化したい場合は Preact が最適な選択となります。

プロジェクトごとに最適なフレームワークが異なる現実

従来の開発では、プロジェクト開始時に一つのフレームワークを選択し、その制約の中で開発を進める必要がありました。しかし実際の開発現場では、以下のような状況が頻繁に発生します。

プロジェクト途中でより適したフレームワークが見つかった場合や、特定の機能だけ別のフレームワークで実装したい場合、チームメンバーの得意なフレームワークがバラバラな場合など、単一フレームワークでは対応が困難な課題が生まれています。

課題

単一フレームワークの制約

単一のフレームワークに依存する開発では、そのフレームワークの思想や制限に合わせてアプリケーション全体を設計する必要があります。例えば、React で開発しているプロジェクトでアニメーションを多用する場合、追加のライブラリが必要になったり、パフォーマンスの問題が発生したりする可能性があります。

また、フレームワークのバージョンアップやサポート終了により、プロジェクト全体のリファクタリングが必要になるリスクも抱えることになります。これらの制約は、開発の自由度を大きく制限し、最適な解決策を選択する機会を奪ってしまいます。

チーム内での技術スタック統一の困難

現代の開発チームでは、メンバーそれぞれが異なるフレームワークの経験を持つことが一般的です。React に精通したフロントエンドエンジニア、Vue での開発経験が豊富なデザイナー、Svelte の軽量性を活かした開発を得意とするエンジニアなど、多様なスキルセットが存在します。

しかし、プロジェクトで単一フレームワークを選択すると、チームメンバーの一部は慣れ親しんだツールから離れて新しい技術を習得する必要があり、開発効率の低下や学習コストの増大が問題となります。

コンポーネント再利用性の低さ

既存のプロジェクトで作成したコンポーネントを、異なるフレームワークを使用する新しいプロジェクトで再利用することは非常に困難です。React で作成したコンポーネントを Vue プロジェクトで使用したり、Svelte のコンポーネントを React プロジェクトに組み込んだりすることは、実質的に不可能に近い状況でした。

この問題により、似たような機能を持つコンポーネントを各フレームワーク用に個別に開発する必要があり、開発工数の無駄遣いと保守性の低下を招いていました。

解決策

Astro による Islands Architecture の活用

Astro が提供する Islands Architecture は、これらの課題を根本的に解決する革新的なアプローチです。この仕組みでは、ページの大部分を静的な HTML として生成し、必要な部分だけを「島（Island）」として動的なコンポーネントにすることができます。

さらに重要なのは、各 Island で異なるフレームワークを使用できることです。つまり、同一ページ内で React、Vue、Svelte、Preact のコンポーネントを自由に組み合わせることが可能になります。

javascript---
// Astro コンポーネントでの複数フレームワーク読み込み
import ReactCounter from '../components/ReactCounter.jsx';
import VueForm from '../components/VueForm.vue';
import SvelteChart from '../components/SvelteChart.svelte';
import PreactButton from '../components/PreactButton.tsx';
---

<html>
  <body>
    <main>
      <!-- React コンポーネント -->
      <ReactCounter client:load />
      
      <!-- Vue コンポーネント -->
      <VueForm client:visible />
      
      <!-- Svelte コンポーネント -->
      <SvelteChart client:idle />
      
      <!-- Preact コンポーネント -->
      <PreactButton client:media="(max-width: 768px)" />
    </main>
  </body>
</html>

フレームワーク混在のメリットと実現方法

フレームワークを混在させることで、以下のような大きなメリットを享受できます。

まず、適材適所でのフレームワーク選択が可能になります。複雑なデータ処理には React、シンプルなフォームには Vue、パフォーマンスが重要な部分には Svelte を使用するといった、戦略的な使い分けができます。

次に、段階的な移行が実現できます。既存の React プロジェクトに新しく Svelte コンポーネントを追加したり、Vue コンポーネントを段階的に React に置き換えたりすることが可能です。

具体例

React コンポーネントの実装

React コンポーネントでは、豊富なエコシステムを活用したデータ処理や複雑な状態管理を行います。以下は、データフェッチとリアルタイム更新を行うカウンターコンポーネントの例です。

typescript// components/ReactCounter.tsx
import { useState, useEffect } from 'react';

interface ReactCounterProps {
  initialCount?: number;
  step?: number;
}

const ReactCounter: React.FC<ReactCounterProps> = ({ 
  initialCount = 0, 
  step = 1 
}) => {
  const [count, setCount] = useState(initialCount);
  const [isLoading, setIsLoading] = useState(false);

  // API からデータを取得する処理
  useEffect(() => {
    const fetchInitialData = async () => {
      setIsLoading(true);
      try {
        const response = await fetch('/api/counter');
        const data = await response.json();
        setCount(data.count);
      } catch (error) {
        console.error('データの取得に失敗しました:', error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchInitialData();
  }, []);

  return (
    <div className="react-counter">
      <h3>React カウンター</h3>
      {isLoading ? (
        <p>読み込み中...</p>
      ) : (
        <>
          <p>現在のカウント: {count}</p>
          <button onClick={() => setCount(count + step)}>
            +{step}
          </button>
          <button onClick={() => setCount(count - step)}>
            -{step}
          </button>
        </>
      )}
    </div>
  );
};

export default ReactCounter;

このコンポーネントの使用方法は以下のとおりです。

javascript// Astro ページでの React コンポーネント使用
---
import ReactCounter from '../components/ReactCounter.tsx';
---

<ReactCounter 
  initialCount={10} 
  step={5} 
  client:load 
/>

Vue コンポーネントの実装

Vue コンポーネントでは、直感的な双方向データバインディングを活用したフォーム処理を実装します。リアクティブな入力検証と送信処理を含む例をご紹介します。

vue<!-- components/VueForm.vue -->
<template>
  <div class="vue-form">
    <h3>Vue フォーム</h3>
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label for="name">名前:</label>
        <input
          id="name"
          v-model="form.name"
          :class="{ 'error': errors.name }"
          type="text"
          placeholder="お名前を入力してください"
        />
        <span v-if="errors.name" class="error-message">
          {{ errors.name }}
        </span>
      </div>

      <div class="form-group">
        <label for="email">メールアドレス:</label>
        <input
          id="email"
          v-model="form.email"
          :class="{ 'error': errors.email }"
          type="email"
          placeholder="example@mail.com"
        />
        <span v-if="errors.email" class="error-message">
          {{ errors.email }}
        </span>
      </div>

      <button type="submit" :disabled="!isFormValid || isSubmitting">
        {{ isSubmitting ? '送信中...' : '送信' }}
      </button>
    </form>

    <div v-if="submitMessage" class="submit-result">
      {{ submitMessage }}
    </div>
  </div>
</template>

Vue コンポーネントのスクリプト部分では、リアクティブなデータ管理と検証ロジックを実装します。

vue<script setup lang="ts">
import { ref, reactive, computed } from 'vue';

// フォームデータの定義
const form = reactive({
  name: '',
  email: ''
});

// エラーメッセージの管理
const errors = reactive({
  name: '',
  email: ''
});

// フォームの状態管理
const isSubmitting = ref(false);
const submitMessage = ref('');

// バリデーション関数
const validateForm = () => {
  errors.name = '';
  errors.email = '';

  if (!form.name.trim()) {
    errors.name = '名前は必須項目です';
  }

  if (!form.email.trim()) {
    errors.email = 'メールアドレスは必須項目です';
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) {
    errors.email = '正しいメールアドレス形式で入力してください';
  }

  return !errors.name && !errors.email;
};

// フォームの有効性チェック（computed プロパティ）
const isFormValid = computed(() => {
  return form.name.trim() !== '' && 
         form.email.trim() !== '' && 
         /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email);
});

// フォーム送信処理
const handleSubmit = async () => {
  if (!validateForm()) return;

  isSubmitting.value = true;
  submitMessage.value = '';

  try {
    const response = await fetch('/api/contact', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(form),
    });

    if (response.ok) {
      submitMessage.value = 'フォームが正常に送信されました！';
      form.name = '';
      form.email = '';
    } else {
      throw new Error('送信に失敗しました');
    }
  } catch (error) {
    submitMessage.value = 'エラーが発生しました。もう一度お試しください。';
    console.error('Form submission error:', error);
  } finally {
    isSubmitting.value = false;
  }
};
</script>

Svelte コンポーネントの実装

Svelte コンポーネントでは、軽量で滑らかなアニメーションを含むチャートコンポーネントを作成します。Svelte の特徴であるコンパイル時最適化により、非常に高いパフォーマンスを実現できます。

svelte<!-- components/SvelteChart.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  import { tweened } from 'svelte/motion';
  import { cubicOut } from 'svelte/easing';

  // プロパティの定義
  export let data: { label: string; value: number; color: string }[] = [];
  export let title: string = 'データチャート';
  export let width: number = 400;
  export let height: number = 300;

  // アニメーション用の値
  const animatedValues = data.map(item => 
    tweened(0, {
      duration: 1000,
      easing: cubicOut
    })
  );

  // 最大値の計算
  $: maxValue = Math.max(...data.map(item => item.value));

  // チャートバーの高さ計算
  const getBarHeight = (value: number) => {
    return (value / maxValue) * (height - 60);
  };

  // コンポーネントマウント時のアニメーション開始
  onMount(() => {
    data.forEach((item, index) => {
      setTimeout(() => {
        animatedValues[index].set(item.value);
      }, index * 200);
    });
  });

  // データ更新関数
  const updateData = () => {
    data.forEach((item, index) => {
      const newValue = Math.floor(Math.random() * 100) + 1;
      animatedValues[index].set(newValue);
      data[index].value = newValue;
    });
  };
</script>

<div class="svelte-chart">
  <h3>{title}</h3>
  
  <svg {width} {height} class="chart-svg">
    {#each data as item, index}
      <g class="bar-group">
        <!-- バーの描画 -->
        <rect
          x={index * (width / data.length) + 20}
          y={height - getBarHeight($animatedValues[index]) - 40}
          width={(width / data.length) - 40}
          height={getBarHeight($animatedValues[index])}
          fill={item.color}
          class="chart-bar"
        />
        
        <!-- 値の表示 -->
        <text
          x={index * (width / data.length) + (width / data.length) / 2}
          y={height - getBarHeight($animatedValues[index]) - 45}
          text-anchor="middle"
          class="bar-value"
        >
          {Math.round($animatedValues[index])}
        </text>
        
        <!-- ラベルの表示 -->
        <text
          x={index * (width / data.length) + (width / data.length) / 2}
          y={height - 20}
          text-anchor="middle"
          class="bar-label"
        >
          {item.label}
        </text>
      </g>
    {/each}
  </svg>

  <button on:click={updateData} class="update-button">
    データを更新
  </button>
</div>

Svelte コンポーネントのスタイル定義では、スコープされた CSS を活用します。

svelte<style>
  .svelte-chart {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
  }

  .chart-svg {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .chart-bar {
    transition: fill 0.3s ease;
  }

  .chart-bar:hover {
    opacity: 0.8;
  }

  .bar-value {
    font-size: 12px;
    font-weight: bold;
    fill: #333;
  }

  .bar-label {
    font-size: 10px;
    fill: #666;
  }

  .update-button {
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #007acc;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .update-button:hover {
    background-color: #005a9e;
  }
</style>

Preact コンポーネントの実装

Preact コンポーネントでは、React との互換性を保ちながら軽量化されたボタンコンポーネントを作成します。特にモバイル環境でのパフォーマンスを重視した実装例をご紹介します。

typescript// components/PreactButton.tsx
import { useState, useCallback } from 'preact/hooks';

interface PreactButtonProps {
  label: string;
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
  loading?: boolean;
  onClick?: () => void | Promise<void>;
}

const PreactButton = ({
  label,
  variant = 'primary',
  size = 'medium',
  disabled = false,
  loading = false,
  onClick
}: PreactButtonProps) => {
  const [isProcessing, setIsProcessing] = useState(false);

  // クリックハンドラーの最適化
  const handleClick = useCallback(async () => {
    if (disabled || loading || isProcessing || !onClick) return;

    setIsProcessing(true);
    try {
      await onClick();
    } catch (error) {
      console.error('Button action failed:', error);
    } finally {
      setIsProcessing(false);
    }
  }, [disabled, loading, isProcessing, onClick]);

  // クラス名の動的生成
  const getClassName = () => {
    const baseClass = 'preact-button';
    const variantClass = `preact-button--${variant}`;
    const sizeClass = `preact-button--${size}`;
    const stateClasses = [
      disabled && 'preact-button--disabled',
      (loading || isProcessing) && 'preact-button--loading'
    ].filter(Boolean).join(' ');

    return `${baseClass} ${variantClass} ${sizeClass} ${stateClasses}`.trim();
  };

  return (
    <button
      type="button"
      className={getClassName()}
      disabled={disabled || loading || isProcessing}
      onClick={handleClick}
      aria-label={label}
    >
      {(loading || isProcessing) && (
        <span className="preact-button__spinner" aria-hidden="true">
          ⟳
        </span>
      )}
      <span className="preact-button__text">
        {label}
      </span>
    </button>
  );
};

export default PreactButton;

Preact ボタンのスタイリングでは、CSS-in-JS を使わずに効率的な CSS クラスを定義します。

css/* styles/preact-button.css */
.preact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  outline: none;
  text-decoration: none;
}

/* サイズのバリエーション */
.preact-button--small {
  padding: 6px 12px;
  font-size: 0.875rem;
}

.preact-button--medium {
  padding: 8px 16px;
  font-size: 1rem;
}

.preact-button--large {
  padding: 12px 24px;
  font-size: 1.125rem;
}

/* カラーバリエーション */
.preact-button--primary {
  background-color: #007acc;
  color: white;
}

.preact-button--primary:hover:not(.preact-button--disabled) {
  background-color: #005a9e;
}

.preact-button--secondary {
  background-color: #6c757d;
  color: white;
}

.preact-button--secondary:hover:not(.preact-button--disabled) {
  background-color: #545b62;
}

.preact-button--danger {
  background-color: #dc3545;
  color: white;
}

.preact-button--danger:hover:not(.preact-button--disabled) {
  background-color: #c82333;
}

/* 状態のスタイル */
.preact-button--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.preact-button--loading {
  cursor: wait;
}

.preact-button__spinner {
  display: inline-block;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

混在プロジェクトの構築手順

実際に複数のフレームワークを混在させたプロジェクトを構築する手順をご紹介します。

まず、Astro プロジェクトの初期化から始めます。

bash# 新規 Astro プロジェクトの作成
yarn create astro@latest mixed-frameworks-project
cd mixed-frameworks-project

# 必要な UI フレームワークの追加
yarn astro add react vue svelte preact

# TypeScript サポートの追加（推奨）
yarn astro add typescript

# 開発用の追加パッケージ
yarn add -D @types/node sass

次に、プロジェクト構造を整備します。

javascript// astro.config.mjs - 設定ファイル
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import vue from '@astrojs/vue';
import svelte from '@astrojs/svelte';
import preact from '@astrojs/preact';

export default defineConfig({
  integrations: [
    react(),
    vue(),
    svelte(),
    preact()
  ],
  // ビルド最適化の設定
  build: {
    // 各フレームワークのバンドルを最適化
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom'],
          'vue-vendor': ['vue'],
          'svelte-vendor': ['svelte'],
          'preact-vendor': ['preact']
        }
      }
    }
  },
  // 開発サーバーの設定
  server: {
    port: 3000,
    host: true
  }
});

プロジェクトのディレクトリ構造を以下のように組織化します。

bash# プロジェクト構造の例
src/
├── components/
│   ├── react/
│   │   └── ReactCounter.tsx
│   ├── vue/
│   │   └── VueForm.vue
│   ├── svelte/
│   │   └── SvelteChart.svelte
│   └── preact/
│       └── PreactButton.tsx
├── pages/
│   └── index.astro
├── styles/
│   ├── global.css
│   └── components/
│       └── preact-button.css
└── types/
    └── global.d.ts

最後に、統合ページでの各コンポーネントの使用例をご紹介します。

javascript---
// pages/index.astro - メインページ
import Layout from '../layouts/Layout.astro';
import ReactCounter from '../components/react/ReactCounter.tsx';
import VueForm from '../components/vue/VueForm.vue';
import SvelteChart from '../components/svelte/SvelteChart.svelte';
import PreactButton from '../components/preact/PreactButton.tsx';

// チャート用のサンプルデータ
const chartData = [
  { label: 'React', value: 85, color: '#61DAFB' },
  { label: 'Vue', value: 75, color: '#4FC08D' },
  { label: 'Svelte', value: 90, color: '#FF3E00' },
  { label: 'Preact', value: 70, color: '#673AB8' }
];
---

<Layout title="混在フレームワーク デモ">
  <main>
    <h1>Astro × 複数フレームワーク統合デモ</h1>
    
    <section class="demo-section">
      <h2>React コンポーネント</h2>
      <ReactCounter 
        initialCount={0} 
        step={1} 
        client:load 
      />
    </section>

    <section class="demo-section">
      <h2>Vue コンポーネント</h2>
      <VueForm client:visible />
    </section>

    <section class="demo-section">
      <h2>Svelte コンポーネント</h2>
      <SvelteChart 
        data={chartData}
        title="フレームワーク人気度"
        width={500}
        height={350}
        client:idle 
      />
    </section>

    <section class="demo-section">
      <h2>Preact コンポーネント</h2>
      <PreactButton 
        label="Preact ボタン" 
        variant="primary" 
        size="medium"
        client:media="(max-width: 768px)" 
      />
    </section>
  </main>
</Layout>

まとめ

Astro による複数フレームワーク混在戦略は、現代の Web 開発における多くの課題を解決する革新的なアプローチです。React の豊富なエコシステム、Vue の直感的なデータバインディング、Svelte の軽量性とパフォーマンス、Preact のコンパクトさを、一つのプロジェクト内で自由に組み合わせることができます。

この戦略により、開発チームは各メンバーの得意分野を活かしながら、プロジェクトの要件に最適なツールを選択できるようになりました。また、既存のコンポーネント資産を有効活用し、段階的な技術移行も可能になります。

Islands Architecture による部分的ハイドレーションと、各フレームワークの適材適所での使用により、パフォーマンスと開発効率の両方を向上させることができます。これからの Web 開発において、Astro を中心とした混在フレームワーク戦略は、まさに「最強」の選択肢と言えるでしょう。

ぜひ皆さんも、この革新的なアプローチを活用して、より柔軟で効率的な Web 開発を体験してみてください。

関連リンク

Astroの記事Astro

もっと見る

記事Article

もっと見る

ブログBlog

もっと見る

書籍レビューReview

もっと見る