🎄

tsx TypeScript Execute / TypeScript一人カレンダー

2024/12/23に公開

こんにちは、クレスウェア株式会社の奥野賢太郎 (@okunokentaro) です。本記事はTypeScript 一人 Advent Calendar 2024の22日目です。昨日は『using宣言』を紹介しました。

tsx とは

皆さんはtsxをご存知でしょうか。

そう聞くと、まず「.tsx」というファイル拡張子を想起することが多いと思います。これはReactにおけるJSXのTypeScript版であることを示す拡張子です。

しかし今回はそうではなく、「tsx TypeScript Execute」という全く別のツールのご紹介です。紛らわしくも同じ名称なので注意が必要です。

Node.jsでTypeScriptを動かす

かつてNode.js上でTypeScriptを動かすには、まずtsc (TypeScript Compiler)を使ってJavaScriptにコンパイルし、コンパイル結果の.jsファイルをNode.jsで実行する必要がありました。その後、ts-nodeが登場したことで、コンパイル作業を挟まずにTypeScriptを直接実行できるようになり、とても便利になりました。

node file.js

nodeだとこのように書いていたスクリプトは、tsxでは次のようになります。

tsx file.ts

.ts拡張子のファイルがそのまま渡せることが特徴です。

CJS, ESMの移行過渡期による混迷と、tsxの登場

tsxは、ts-nodeよりさらに現代の需要を満たすツールといえます。

筆者がts-nodeからtsxに切り替えた理由は、主にCJS (CommonJS)とESM (ECMAScript Module)の移行過渡期による混乱です。実務上、まだCJSから完全に移行できていないプロジェクトは多く存在しますが、一方でOSSなどの小規模ユーティリティはどんどんESM化が進んでいます。

このようにCJSとESMが混在する状況では、ts-nodeでスクリプトを実行しようとして動かないケースが散見されました。しかしtsxはこの移行過渡期を経たモダンな設計のため、ESM/CJS間の混在をそこまで気にせずに「ほとんど動いてくれる」のが大きな利点です。

TypeScriptランタイムとしての選択肢

TypeScriptのコードをサクッと動かしたいのであれば、筆者はtsxをおすすめします。

一方、TypeScriptを実行できるランタイムとしては他にもDenoBunといったランタイム存在します。 DenoはNode.jsやChromiumと同様にV8にてJavaScriptを動作させます。 一方で、BunはWebKitでも使われているJavaScriptCore (JSC)を使っています。

Node.js標準ライブラリに慣れているのであればtsxを選び、Deno固有の標準ライブラリ、Bun固有の標準ライブラリを試したいのであればDenoやBun、といった形で使い分けられます。ランタイムによって同じコードでも処理速度が異なるため、速度を追求して選ぶこともできるでしょう。

WinterCGの動き

こうした複数のランタイムが生まれる中、WinterCG (Web-interoperable Runtimes Community Group)という組織が立ち上がりました。

この組織ではランタイムの標準APIや相互運用性の確立を目指した取り組みが進められています。設立メンバーにはNode.js, Deno, Cloudflare, Shopify, Vercel, igaliaなどが名を連ねます。

たとえばfetch()関数やURLの標準化などに功績があります。

なお、BunはWinterCGに加盟しておらず、一部非互換のAPIを実装しているため、筆者はNode.jsとの互換を意識する場面においては利用に注意が必要だと考えています。詳細は『Bun の非互換な拡張 API』という記事にて紹介されています。

ランタイムを選択する際はこのような背景や動向も踏まえた上で、ライブラリ選定と同様に自分たちに何が必要なのか、あるいは単なる好奇心なのか、明確にしてから採用することをおすすめします。

それでもtsxがしっくりくる

最終的には、筆者が長年Node.jsに慣れ親しんでいることもあり、やはりNode.js環境で動くtsxが最も手になじみます。

ですが、冒頭にも述べたように「.tsx」という拡張子に見えてしまうのはやはり紛らわしいですね。ツール名としての「tsx」が定着するには、さらなる布教に励みたいと思います。

明日は『tsupでバンドルする』

本日は『tsx TypeScript Execute』を紹介しました。明日は『tsupでバンドルする』を紹介します。それではまた。

Discussion