LoginSignup
12
4
お題は不問！Qiita Engineer Festa 2023で記事投稿！
@ikemura23(Ikemura Kazutaka)in株式会社ゆめみ

WEB+DB vol.133のTypeScript最新活用を読んだメモ

Posted at

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から慣れて行きましょう！

12
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
12
4