React系のライブラリにおいて、ts/tsxをトランスパイラーとして、何が使用されているのか調査してみた

はじめに

「Reactを使っている場合はjsxをトランスフォームするためにbabelを使用するのはわかるが、React + TypeScriptの組み合わせを使っている場合、tscでトランスパイルすれば、tsxのトランスフォームもtscがしくてれて、babel使わなくていいんじゃないの？」と知人から聞かれて、たしかにそうだなーと思いつつ、プロダクトでは babel や最近は esbuild 、 swc を使っていることが多くて、tsc を使うことは少ない気がする（というか見たことない）と思ったので調べてみました。

まずReactの環境をどう構築するのか問題

次期公式ドキュメントになるであろう React Docs beta の中では、次の方法が紹介されています。

• Create React App
• Vite
• parcel
• snowpack
• Next.js
• Gatsby
• Razzle

beta.reactjs.org

それぞれどういったトランスパイラーを使用しているか

• Create React App
  • babelを使用
    • 公式ドキュメントに言及されていなかったのでコードから確認
      • create-react-app で作成したアプリで npm run eject して、react-scriptによって隠蔽化されていた設定やスクリプトを展開して確認
        • compilerとしてwebpackが使用されており
          • https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/scripts/build.js#L146
        • webpackでbabel-loaderが使用されており
          • https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpack.config.js#L417
        • ちなみに、babel-loaderはbabelのwebpack用のプラグイン
          • https://github.com/babel/babel-loader
• Vite
  • esbuildを使用
    • https://ja.vitejs.dev/guide/features.html#jsx
    • esbuildはバンドルも可能(正確にはライブラリのみesbuildでバンドルし、アプリはrollupを使用)かつ、tscよりもトランスパイルが20~30倍高速なので、esbuildを使用しているとのこと
      • https://ja.vitejs.dev/guide/why.html#%E9%81%85%E3%81%84%E3%82%B5%E3%83%BC%E3%83%90%E8%B5%B7%E5%8B%95
      • https://ja.vitejs.dev/guide/features.html#typescript
• parcel
  • v2ではswcを使用
    • https://parceljs.org/blog/v2/#babel-preset-warnings
    • https://parceljs.org/blog/beta3/#transpilation-performance
  • v1ではbabelを使用
    • https://ja.parceljs.org/transforms.html
    • https://ja.parceljs.org/javascript.html#default-babel-transforms
• snowpack
  • snowpackのプラグインでpreact形式のjsxに変換
    • https://www.snowpack.dev/reference/supported-files#jsx
  • preact形式のjsxはそのままブラウザで実行可能でビルドは不要
    • https://preactjs.com/guide/v10/getting-started#alternatives-to-jsx
• Next.js
  • swc
    • https://nextjs.org/docs/advanced-features/compiler
• Gatsby
  • parcelを使用
    • https://www.gatsbyjs.com/blog/whats-new-at-gatsbyconf-2022/#gatsby-skip-here
    • https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/#parcel-typescript-features
    • https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/package.json#L24
  • しかしswc対応していないライブラリがあるせいで、swc対応されてはいない。つまりbabelが使用されている模様
    • https://github.com/gatsbyjs/gatsby/discussions/29542
• Razzle
  • babelを使用
    • https://razzlejs.org/plugins/razzle-plugin-typescript#razzle-plugin-typescript

感想

やはり babel を使用していることがそこそこ多く、 tsc は存在しなかったですね。tsx→jsだけでなく、jsx→jsの変換もしようとすると、 babel を採用するのは納得できるなーといった感じです。

多いですね。一方、最近出てきた esbuild や swc はバンドルが可能であったり、トランスパイル自体早いものの、babelのプラグインが必要だったライブラリは移行しづらく、 swc のメンテナーをvercelが採用したのも、このbabel依存を剥がすためにはそのくらい本気で取り組まないと進まないんだなーと感じました。

今後、 esbuild や swc 、あと、今回は出てきていませんが all-in-oneな rome のどれがディファクトスタンダードになるか、見守っていきたいと思います