TypeScriptの学習をはじめようとしたところ、「WEB+DB vol.133のTypeScript特集も読むといいよ」と教わったので読んでみました。
その特集の中で気になったツールや単語をメモっていきます。

ちなみに、自分はKotlinを使ったAndroidアプリ開発者で、TypeScriptはほぼ書いたことがありません。
（node.jsはある程度書けるが...）

そのため、当記事はTypeScript初心者向けとなります。

ESLint

• JavaScriptのためのリンタ

 

• リンタのデファクトスタンダード

 

• カスタマイズしやすいのが特徴

 

• 設定は共有可能

 

• フォーマッタとしても使えるが、Prettierのほうが貫したコーディングスタイルを強制できる

 

• 欠点は、、、

Prettierと組み合わせると複雑になり、初学者が設定でつまずく要因となる
大規模プロジェクトになるとパフォーマンスに問題がでてくる

Prettier

• フォーマッタのデファクトスタンダード

 

• JavaScriptだけでなくやTypeScriptだけでなく、HTMLやCSS，GraphQLやMarkDownもサポートしている

 

• 設定項目が少ないのが特徴

 

• 欠点は、、、

Prettierのコーディングスタイルが気に入らない場合はそれを無効化できない

（カスタマイズ性が低い？）

大規模プロジェクトになるとパフォーマンスに問題がでてくる

Rome

• Rust製

 

• フロントエンドの開発のオールインワンツール

 

• 現在のフロントエンドのツール郡を置き換えることを目標としている

 

• パフォーマンスが良い

 

• 2023年６月時点ではまだ開発中

 

フォーマッタとリンタのみリリースされている

Deno

• JavaScript/TypeScriptランタイム

 

• 開発に必要なツールをビルトインで提供している

 

• フォーマッタ deno fmt とリンタ deno lint が紹介されていた

 

• Rust製

 

リンタは主にDenoをターゲットとしており、ESLintを置き換えるわけではないらしい

トランスパイル

• TypeScriptコードをJavaScriptに変換する工程のこと

 

なぜなら、TypeScriptコードをブラウザは実行できない

トランスパイラ

• トランスパイルしてくれるプログラムのこと

 

• Babelが有名

 

• 昔は新しいJavaScript構文を古い構文に変換してた

IE対応や、ES6をES5に変換など

現在は新たな役割として以下に使われている

TypeScriptのトランスパイル
JSXのトランスパイル

Babel

• トランスパイラとして有名

 

• プラグインシステム（独自の定義）のを追加が便利らしい

便利すぎてプラグインブーム？になったようだ

JavaScript製で、パフォーマンスに懸念がでてきている

バンドラ

• フロントエンド開発の欠かせないツール

 

• importやexportで分割されたコードを解決しつつ、１つのJavaScriptファイルに変換する

 

• ホットリロードの役割も持っている

 

変換速度の高速化が求められているため、GoやRust製のツールが出始めている

SWC

• Vercelという会社が開発したトランスパイラ

 

• Rust製で高速

 

• BabelのかわりにSWCを選ぶプロジェクトも出始めている

 

• BabelをSWCに置き換えるとビルド時間が35％削減されたらしい

 

次のデファクトスタンダードを期待される期待の星らしい

turbopack

• Vercelという会社が開発したバンドラ

 

• Rust製で高速

 

• 現時点ではアルファ版

 

webpackを置き換えるのが目的らしい？

esbuild

• トランスパイラとバンドラが合体したツール

 

• Go製で高速

 

• Bubelやwebpackより高速化なのが売り

 

• TypeScriptとJSXのトランスパイルもサポート済み

 

このツール１つでトランスパイラとバンドラが実行できるのが便利らしい

webpack

• バンドラのデファクトスタンダード

 

• loaderという拡張機能でCSSや画像ファイルをimportして使用できる

 

• ツールの設定の自由化がとても高い

 

JavaScript製で、パフォーマンスに懸念がでてきている

ES Module

• 分割されたJavaScriptファイル（モジュール）をimport/exportでつなぐしくみのこと

 

import/exportでつながったモジュールは非常に遅いため、バンドラで１つのJavascriptファイルにしておくのが定番

AST

• Abstract Syntax Tree（抽象構文木）

 

• ソースコードを扱いやすいように加工されたデータ構造のこと

 

• ESLintやPrettierの構文チェックで使わている

 

• Babelやwebpackも使っているが、両者でASTが異なるため、無駄な変換が発生してパフォーマンスが遅いらしい

 

• SWC + turbopack の組み合わせで同じASTフォーマットを扱えれば、高速化が期待できるらしい

 

esbuildも同じASTフォーマットなので？高速らしい

最後に感想

• Rust製のツールがかなり高速なようで、期待値がかなり高いらしい

将来はRust製ツールが主流になる、と筆者は述べていた
Goも早いが、Rustはもっと早い
プラグインをRustで書く時代がくるかもしれないため、Rust覚えるといいかも

フロントエンドにRustの波が徐々にきてます！
まずはSWCから慣れて行きましょう！