モジュールサポート

Pages Functionsは、Workers ↗と同様に、いくつかのモジュールタイプをサポートしています。これにより、WebAssembly（Wasm）やtext、binaryファイルなどの外部モジュールをFunctionsコード内でインポートして使用することができます。

このガイドでは、Pages Functions内でこれらの異なるモジュールタイプを使用する方法を説明します。

ECMAScriptモジュール

ECMAScriptモジュール（略してESモジュール）は、JavaScriptの公式な標準化された ↗モジュールシステムです。これは、モジュール化され再利用可能なJavaScriptコードを書くための推奨メカニズムです。

ESモジュール ↗は、importおよびexportステートメントを使用して定義されます。以下は、ESモジュール形式で書かれたスクリプトの例と、そのモジュールをインポートするPages Functionの例です：

export function greeting(name: string): string {
  return `こんにちは ${name}！`;
}

import { greeting } from "../src/greeting.ts";

export async function onRequest(context) {
    return new Response(`${greeting("Pages Functions")}`);
}

WebAssemblyモジュール

WebAssembly（略してWasm）は、Rust、Go、Cなどの言語を、ウェブブラウザ、Cloudflare Workers、Cloudflare Pages Functions、その他のWebAssemblyランタイムなど、さまざまな環境で実行できるバイナリ形式にコンパイルすることを可能にします。

WebAssemblyにおける配布可能でロード可能、実行可能なコードの単位はモジュール ↗と呼ばれます。

以下は、Pages Functionsコード内でWasmモジュールをインポートする基本的な例です：

import addModule from "add.wasm";

export async function onRequest() {
  const addInstance = await WebAssembly.instantiate(addModule);
  return new Response(
    `人生の意味は ${addInstance.exports.add(20, 1)} です`
  );
}

テキストモジュール

テキストモジュールは、HTMLファイルなどのリソースをStringとしてインポートするための非標準化手段です。

以下のHTMLファイルをPages Functionsコードにインポートするには：

<!DOCTYPE html>
<html>
  <body>
    <h1>こんにちは Pages Functions！</h1>
  </body>
</html>

次のスクリプトを使用します：

import html from "../index.html";

export async function onRequest() {
  return new Response(
    html,
    {
      headers: { "Content-Type": "text/html" }
    }
  );
}

バイナリモジュール

バイナリモジュールは、画像などのバイナリデータをArrayBufferとしてインポートするための非標準化手段です。

以下は、Pages Functionsコード内でバイナリファイルからデータをインポートする基本的な例です：

import data from "../my-data.bin";

export async function onRequest() {
  return new Response(
    data,
    {
      headers: { "Content-Type": "application/octet-stream" }
    }
  );
}

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings