React, Type Scriptの開発環境を整える際、babelは導入するべきなのでしょうか。

Question

現在、Reactを勉強しており、React, typescriptを使用できる環境でtodo listを作成しようとしています。
そこで、調べている中で、babelは必要なのか？という疑問を抱きました。

React+Tsの開発環境の作成方法を調べても、babelを導入していたり、いなかったりとまちまちでした。

私は普段babelを使うとしたら、IE対応をする場合か、最近登場したオプショナルチェイニングを使用した際に特定のブラウザで動かないなどを対策するために使用するのですが、React, typescriptでも使用した方が良いのでしょうか。

ちなみに、html, cssは一旦プリプロセッサを使用せず、開発をする予定です。

ご教授しただければと思います。よろしくお願いします。

Answer 1

すべての環境でbabelが必須かというと必ずしもそうではないです。
そもそもbabelというのはトランスパイラの一つなので他のトランスパイラで代用は可能です。
ただし今まで使われてきた実績と機能のおかげでデファクトスタンダードになっています。
typescript -> javascriptができるトランスパイラはbabel,tsc,esbuild,swc,sucrase等があります。(もっとあると思います)

また、"トランスパイラ"が必要なのは以下のような場合です。

• IE(サポート切れますが)等の最新の構文に対応していないブラウザに対応する場合
• プロポーザル(jsの仕様のbeta版みたいなの)の構文に対応する場合
• 独自記法(主にjsx)を使用する場合(typescriptもこれに入る?)

react/typescriptの開発環境を作る場合は少なくともtypescript/jsx -> javascriptの変換が必要でしょう。(jsx使わないならいらないけど)

現在快適な開発環境を構築する上では、ビルドツールを使うことになると思います。
その中で便利だから使われているということですね。
ビルドツールも色々あり(webpack,rollup,esbuild,snowpack,parcel等々...)、babelはpluginとして提供さてたりしています。

---

とりあえず開発環境を整えるならcreate-react-appを使用することをおすすめします。
reactの開発環境をいい感じに整えてくれるやつです。

公式のリンクです。公式のドキュメントを見れば解決することは割とあります。
新しい React アプリを作る – React

Comments

[fdasjk]

ご教授いただき誠にありがとうございます。
また、ご返事が大変遅くなってしまい、申し訳ございませんでした。

> react/typescriptの開発環境を作る場合は少なくともtypescript/jsx -> javascriptの変換が必要でしょ
> う。(jsx使わないならいらないけど)

今回、tsxを使用する想定なのですが、この場合もトランスパイルが必要となるという認識であっていますでしょうか。

[ka2obushi]

はい。(こちらも遅くなってすみません)
- xml-likeな構文から`React.createElement`へ変換 `jsx/tsx -> js/ts`
- 型情報の削除 `ts -> js`

のトランスパイルが必要です。
babelを使えばこの両方のトランスパイルができます。

ただ`create-react-app`を使えばトランスパイラ/バンドラのインストール&設定など面倒なことは勝手にやってくれるので裏方のことはあまり考えなくて済みます。

[fdasjk]

`create-react-app`はとても便利ですね。

なるほど、もやもやが解消されました。
ご教授いただきありがとうございました！