急速に進化している今日のアプリケーション開発の世界では、プロジェクトは複数の開発者にまたがり、数十のライブラリに依存することがよくあります。Fastly Compute プラットフォームで JavaScript を使用して開発を進める中で、TypeScript とそれが開発プロセスにもたらす堅牢性に魅力を感じるかもしれません—そして、それはあなただけではありません。実際、TypeScript のサポートは開発者からよく寄せられる質問の一つです。幸いなことに、Fastly Compute では TypeScript を簡単に利用できます。

なぜ TypeScript なのか

TypeScript を初めて使う方のために説明すると、TypeScript は JavaScript のスーパーセットであり、静的型付けを追加するものです。これにより、エラーを早期に発見でき、コードの保守性が向上するため、大規模なアプリケーションで人気のある選択肢となっています。TypeScript は開発者の間で非常に人気があります。その理由は、お気に入りの IDE でコード補完や型検査などの機能を利用できる、優れた開発者体験が得られるためかもしれません。

実際、Fastly の JavaScript SDK には、TypeScript タイピングの完全なセットが付属しているため、VS Code や IntelliJ IDEA などの環境で、プレーンな JavaScript を使用して記述する場合でも、非常に快適に作業を行うことができます。

IntelliJ IDEA での JavaScript のコード補完は、@fastly/js-compute からエクスポートされた TypeScript タイピングにより実現されています。

TypeScript を使用してアプリケーションを記述すると、アプリケーション内で型を定義および拡張し、値、変数、関数が使用法と一致することを確認できるため、コードの堅牢性が向上します。これにより、実行時にエラーが発生するのを待たずに、ビルド時、さらにはそれ以前に、構文の強調表示機能によって多くのエラーを早期に検出することができます。

TypeScript は簡単に追加できるように設計されています。実際、TypeScript 言語は JavaScript のスーパーセットとして位置付けられているため、JavaScript にすでに精通している場合は、いくつかのルールとキーワードを学ぶだけで使用できます。TypeScript ハンドブックを参照して、言語を使い始めましょう。

Fastly Compute で TypeScript を始める

コードを実行する際、TypeScript で書かれたソースコードはまず同等の JavaScript に変換され、その後 JavaScript 環境で実行されます。言い換えれば、TypeScript は JavaScript プロジェクトのコンパイラ段階として機能し、Fastly Compute にも簡単に設定できます。

新しいプロジェクトを最初から始める場合、Fastly では簡単に始められるように公式の TypeScript スターターキットを提供しています。最も手軽に始める方法は、新しいディレクトリで npm init @fastly/compute コマンドを実行することです。

mkdir new-project && cd new-project
npm init @fastly/compute@latest

npm init @fastly/compute については以前のブログ記事で詳しく説明していますので、Fastly Compute JavaScript 開発を初めて行う場合は必ずご確認ください。

このコマンドは新しい Compute プロジェクトのセットアップを案内してくれ、途中で言語選択の際に TypeScript を選ぶことができます。これにより、TypeScript starter キットを使用してプロジェクトが生成されます。このキットには、すべてのビルドステップが事前に構成されています。リクエストハンドラーを含む index.ts ファイルも含まれており、すぐに起動して実行するために必要なものがすべて揃っています。

TypeScript を使用すると、IDE はほとんどの場合、変数やパラメータの型を認識します。

TypeScript はビルド時にエラーのクラス全体を捕捉するため、開発効率が向上し、コードの信頼性が向上します。

既存の Compute アプリケーションに TypeScript を追加する

JavaScript ベースの Fastly Compute アプリケーションをすでにお持ちで、TypeScript に移行したい場合は、ほんの数ステップで移行できます。

注: 次の手順では、Compute アプリケーションが Webpack、esbuild、rollup などのバンドラーを使用していないことを前提としています。プロジェクトでバンドラーを使用している場合は、バンドラー (Webpack、esbuild、rollup) の指示に従って TypeScript を追加してください。

1. 開発依存関係として TypeScript をインストールします。

npm install --save-dev typescript

2. プロジェクトルートに tsconfig.json ファイルを作成します。Fastly Compute の推奨設定は次のとおりです。

{
  "compilerOptions": {
    "strict": true,
    "rootDir": "src",
    "outDir": "build",
    "allowJs": true,
    "module": "ES2022",
    "lib": [ "ES2022" ],
    "moduleResolution": "bundler",
    "customConditions": [ "fastly" ],
    "esModuleInterop": true
  }
}

このファイルで設定できるプロパティの詳細については、tsconfig.json のドキュメントを参照してください。

3. 上記の設定では、中間の「コンパイル済み」JavaScript ファイルが build/ ディレクトリに配置されるので、このディレクトリを .gitignoreファイルに追加します。

/build

4. tsc (TypeScript コンパイラ)をアプリケーションの「プレビルド」スクリプトとして追加します。さらに、「ビルド」ステップでは、中間ディレクトリ内の入力ファイルを見つける必要があります。package.json 内のスクリプトを次のように更新します。

{
  "scripts": {
    "prebuild": "tsc",
    "build": "js-compute-runtime build/index.js bin/main.wasm"
  }
}

5. .js ファイルの名前を .ts に変更し、必要に応じて型注釈を追加します。たとえば、ハンドラーのイベントオブジェクトに FetchEvent 型を追加します。

async function handler(event: FetchEvent) {
  // ...
}

これで、TypeScript アプリケーションをビルドして実行できるようになりました。

これらの手順については、JavaScript ドキュメントの TypeScript セクションで詳しく説明していますので、詳細なガイダンスが必要な場合はぜひそちらをご覧ください。

主なしくみ

上記の手順を実行した後、アプリケーションをビルドすると、以下の手順が実行されます。

1.fastly.toml ファイルが参照され、その scripts.build 値 (npm run build) が実行されます。これにより、npm は package.json に記載された build script を実行します。

2. package.json は prebuild スクリプトを定義しているため、npm は最初にそれを実行します。tsc は src/ 内の TypeScript ソースファイルを処理し、bin/ に出力します。

3. npm が build スクリプトを実行します。js-compute-runtime CLI ツールは、JavaScript ランタイムとプログラムを Wasm バイナリファイル (bin/main.wasm) にビルドし、Compute へのデプロイ用にパッケージ化します。

この理解を踏まえて、アプリケーションのビルド設定に必要な調整をさらに行うことができます。

ディスカッションに参加する

Fastly Compute で TypeScript を使用してビルドしたものを見るのが楽しみです！まだお持ちでない場合は、無料の Fastly 開発者アカウントを取得し、Fastly コミュニティーフォーラムにご参加ください。これまでに開発されたものについて、ぜひお聞かせください。

楽しいコーディングを！