CloudFront FunctionsはES5.1固定じゃなかった、cloudfront-js-2.0でES6以降の一部にも対応してる

  • AWS
  • CloudFront
  • CDK

この記事は、構成と文章の整理にAIを使っています。
あくまで読みやすくするための補助で、内容そのものをAIにすべて任せて書いているわけではありませんが、ところどころ相談しながら整えています。

何が起きたか

以前、CloudFrontのDefault Root Objectはサブディレクトリでは効かないという記事でCloudFront FunctionsをES5.1前提で書いていたが、実際にはcloudfront-js-2.0というランタイムがあって、ES6以降の機能もある程度使えることが分かった。

cloudfront-js-2.0とは

CloudFront Functionsのランタイムにはcloudfront-js-1.0とcloudfront-js-2.0の2種類がある。2.0はES5.1準拠に加えてES6〜ES12の一部機能をサポートしている。

サポートされている主な機能：

  • const / let
  • async / await
  • テンプレートリテラル（マルチライン文字列、式展開）
  • アロー関数、rest parameter構文
  • ES7の指数演算子（**）
  • ES12の数値セパレータ（1_000_000のような記法）

Buffer moduleが使えるのも2.0の特徴で、CloudFront KeyValueStoreを使う場合は2.0が必須になる。

一方で、以前使っていた非標準の文字列メソッド（String.prototype.toUTF8()など）は2.0では使えなくなっているので、1.0からの移行時は要注意らしい（自分の実装では未使用だったので今回は影響なし）。

CDKでの指定方法

CDKのcloudfront.Functionはruntimeを指定しないとFunctionRuntime.JS_1_0がデフォルトになる（CDKのフィーチャーフラグ@aws-cdk/aws-cloudfront:defaultFunctionRuntimeV2_0を有効にしている場合のみJS_2_0がデフォルト）。以前の記事のコードはこの指定が抜けていたので、明示的に追加した。

const cfFunction = new cloudfront.Function(this, 'MyCloudFrontFunction', {
  code: cloudfront.FunctionCode.fromInline(`
    function handler(event) {
      const request = event.request;


      if (request.uri.endsWith('/')) {
        request.uri = request.uri + 'index.html';
      }


      return request;
    }
  `),
  runtime: cloudfront.FunctionRuntime.JS_2_0,
});

constとテンプレートリテラルはそのまま動く。以前の記事のようにTypeScriptをES5にトランスパイルする手順は必須ではなくなり、const/letベースのコードならほぼそのままインラインで書ける。

導入時期

cloudfront-js-2.0は2024年4月に導入されている。つまり以前の記事（2025年3月時点）の実装当時も、実は2.0はすでに存在していた。当時は1.0前提で書いてしまっていたので、この記事で訂正しておく。

以前の記事との差分

  • ランタイム：runtime未指定（実質1.0扱い） → FunctionRuntime.JS_2_0を明示指定
  • コードの書き方：var前提のES5スタイル → const/テンプレートリテラルを使ったスタイルに変更可能
  • TypeScriptのビルドステップ：ES5トランスパイルが必須ではなくなった（ただしprojenでの自動生成が無い点は変わらず、ビルドスクリプト自体は引き続き必要）