ESA の [関数とページ] テンプレートは、さまざまな主流のフロントエンドフレームワークとビルドツールをサポートしています。静的 Web サイト、シングルページアプリケーション (SPA)、またはサーバーサイドレンダリングプロジェクトのいずれを構築している場合でも、ESA はワンクリックデプロイメントと自動ビルドのためのエンドツーエンドのワークフローを提供し、世界中の POP (Point of Presence) を介してコードにアクセスできるようにします。
Vite + React.js
Vite は、高速なコールドスタートと瞬時のホットモジュール交換 (HMR) を特徴とするフロントエンドビルドツールです。React.js と組み合わせることで、複雑なユーザーインターフェース向けのパフォーマンス専有型 SPA を迅速に構築できます。Vite は、ブラウザの ES モジュールに対するネイティブサポートを活用することで、開発者エクスペリエンスを向上させます。
デフォルトのビルド設定:
ビルドコマンド:
npm run build開発起動コマンド:
npm run dev静的リソースディレクトリ:
./dist
Vite + Vue.js
Vite と Vue.js 3 は、高速な開発者エクスペリエンスを提供します。Vue は、スキャフォールディングツールとして Vite を公式に推奨しています。@vitejs/plugin-vue は、.vue ファイル、JavaScript XML (JSX)、およびサーバーサイドレンダリング (SSR) をすぐに使えるようにサポートします。
デフォルトのビルド設定:
ビルドコマンド:
npm run build開発起動コマンド:
npm run dev静的リソースディレクトリ:
./dist
Next.js
Next.js は、React ベースのフルスタックフロントエンドフレームワークであり、すぐに使える SSR、静的サイト生成 (SSG)、インクリメンタル静的再生成、API ルーティング機能を提供します。React Server Components と App Router アーキテクチャをサポートしており、アプリケーションの初回描画の読み込みと SEO パフォーマンスを大幅に向上させます。Next.js には、組み込みの Rust ベースの高速パッケージングツール Turbopack と Webpack 5 が含まれています。ファイルシステムベースのルーティングと組み合わせることで、高速な開発サーバーの起動とホットアップデートが可能になり、React アプリケーションにスムーズな開発者エクスペリエンスを提供します。ESA は Next.js の SSG モードのみをサポートします。
デフォルトのビルド設定:
ビルドコマンド:
npm run build開発起動コマンド:
npm run dev静的リソースディレクトリ:
./out(詳細については、「構成例」をご参照ください。)
React Router
React Router は、React 向けの最も人気のあるフロントエンドルーティングライブラリの 1 つです。SPA 向けに設計されており、宣言的ルーティング、動的ルートマッチング、ネストされたルート、プログラムによるナビゲーションをサポートしています。バージョン 6 以降、React Router は、コンポーネントベースの構成とベストプラクティスに焦点を当てた、よりシンプルな API 設計を特徴としています。これにより、アプリケーションの保守性とパフォーマンスが向上します。React とシームレスに統合し、useNavigate、useParams、useLocation などの関数コンポーネントとフックをサポートして、複雑なクライアントサイドのルーティングロジックを管理します。
デフォルトのビルド設定:
ビルドコマンド: たとえば、
npm run build。メインプロジェクトによって決定されます。開発起動コマンド: たとえば、
npm run dev。メインプロジェクトによって決定されます。静的リソースディレクトリ: たとえば、
./build/client。メインプロジェクトによって決定されます。
Astro
Astro は、静的 Web サイトやコンテンツ駆動型アプリケーションを構築するための軽量なフロントエンドフレームワークです。そのコアコンセプトはアイランドアーキテクチャです。デフォルトでは、Astro はクライアントに最小限の JavaScript を送信し、React、Vue、Svelte コンポーネントなどのインタラクティブなコンポーネントをアクティブ化します。このアプローチにより、初期読み込み速度とパフォーマンスが向上します。Astro では、同じプロジェクトで異なる UI フレームワークのコンポーネントを使用できます。純粋な HTML、CSS、および最小限の JavaScript を出力するため、インタラクティビティのコストはほぼゼロになります。
デフォルトのビルド設定:
ビルドコマンド:
npm run build開発起動コマンド:
npm run dev静的リソースディレクトリ:
./dist
Nuxt
Nuxt は Vue.js をベースにしたフルスタックフロントエンドフレームワークです。静的に生成されるページや SPA 向けに設計されています。Nuxt 3 以降、このフレームワークは Vue 3、Vite、および Nitro エンジンを全面的に採用し、高速な開発者エクスペリエンスと拡張性の高いサーバーサイドロジックを提供します。Nuxt は、ファイルシステムベースの自動ルーティング、コンポーネントの自動インポート、モジュール式プラグインシステム、および API レイヤー、TypeScript、ESLint、プログレッシブ Web アプリケーション (PWA) サポートなどの組み込み機能をサポートしています。これらの機能により、開発効率とプロジェクトの保守性が向上します。
デフォルトのビルド設定:
ビルドコマンド:
npm run build開発起動コマンド:
npm run dev静的リソースディレクトリ:
./dist
React チャットボットソリューション
React チャットボットは、React 上に構築された会話型 UI ソリューションです。Redux や Context API などの状態管理ツール、自然言語処理 (NLP) サービス、LLM、Dialogflow、Rasa などのバックエンド AI モデルと統合して、スマートなインタラクションを作成します。このソリューションはコンポーネントベースであり、高度にカスタマイズ可能な UI 設計、マルチターン対話ロジック、テキスト、カード、ボタン、イメージなどのリッチメディアメッセージをサポートします。また、リアルタイム通信のために WebSocket または REST API を使用することもできます。
デフォルトのビルド設定:
ビルドコマンド:
npm run build開発起動コマンド:
npm run startまたはnpm run dev静的リソースディレクトリ:
./dist
Gatsby
Gatsby は、React ベースの静的サイトジェネレーターで、パフォーマンス専有型で SEO フレンドリな Web サイトを構築するために設計されています。GraphQL を使用して、ローカルファイル、コンテンツ管理システム (CMS)、API、Markdown、Contentful などのさまざまなデータソースからコンテンツをフェッチします。ビルド中に、Gatsby はページを静的な HTML、CSS、JavaScript ファイルに事前レンダリングします。これにより、非常に高速な読み込み速度と優れた SEO が実現します。Gatsby は、コンテンツ駆動型 Web サイトを迅速に開発するのに最適です。ホットリロード、自動コード分割、および gatsby-plugin-image や gatsby-source-contentful などの豊富なプラグインエコシステムにより、開発を加速します。Gatsby は TypeScript ともシームレスに統合し、プログレッシブ Web アプリ (PWA) をサポートします。
デフォルトのビルド設定:
ビルドコマンド:
npm run build開発起動コマンド:
npm run develop静的リソースディレクトリ:
./public
Svelte
Svelte フレームワークのコアコンセプトは、ランタイムではなくコンパイル時に作業を行うことです。React や Vue とは異なり、Svelte は仮想 Document Object Model (DOM) を使用しません。コンポーネントを効率的なネイティブ JavaScript に直接コンパイルします。このアプローチにより、ランタイムでのフレームワークのオーバーヘッドがほとんどなくなり、パフォーマンスが大幅に向上し、パッケージサイズが削減されます。Svelte は、宣言的な割り当てとリアクティブな $:、組み込みのアニメーションサポート、コンテキスト API、柔軟な状態管理などの機能を備えたシンプルな構文を提供します。公式のフルスタックフレームワークである SvelteKit は、ルーティング、SSR、SSG、API ルートなどの機能を提供し、軽量でありながら完全な Web フレームワークとなっています。
デフォルトのビルド設定:
ビルドコマンド:
npm run build(SvelteKit)開発起動コマンド:
npm run dev静的リソースディレクトリ:
./build