現代のフロントエンド開発に必須の技術と設定サンプル(Typescript、Webpack、ESLint、Jest、Prettier)

この記事を書いた理由

どんなフロントエンドのフレームワークを使って開発するにせよ、現代のモダンフロントエンド開発にTypescriptはもはや必須といっても過言ではないわけですが、Typescript含めそれらの周辺のエコシステムを使用するための設定ファイルが多く、初学者にとってとっつきにくいものとなっています。

そのため、雰囲気で使用するとうまく動作していなかったり意図していない動作になったりする危険性があります。

そこで、本記事ではTypescript、Webpack、ESLint、Jest、Prettierの設定サンプルと主要な各設定項目とその内容を列挙していますので、これらを参考にしていただければ、いきなりフロントエンドの開発を任されてもある程度は対応できると思いますし、雰囲気で設定を記述するということも減り、適切な開発環境を構築することができるのではないかと思います。 

環境

  • node 16.17.0
  • npm 8.15.0
  • typescript 4.8.4
  • webpack 5.74.0
  • eslint 8.27.0
  • jest 29.2.2
  • prettier 2.7.1

Typescript

ツールの役割

  • 型システムを活用することで、コードの品質を向上させる
  • エディタ上で型補完が効くので、開発効率が向上する

設定ファイル

以下のコマンドにより、tsconfig.jsonが初期生成される

npx tsc --init

デフォルトの設定は以下の通り(typescript 4.8.4)

tsconfig.json

{
    "compilerOptions": {
      "target": "es2016",
      "module": "commonjs", 
      "esModuleInterop": true,
      "forceConsistentCasingInFileNames": true,
      "strict": true,
      "skipLibCheck": true
  }
}
分類項目内容
compiler Options
target
  • TypeScriptをJavaScriptにコンパイルする際、どのバージョンのJavaScript(ECMAScript)で出力するか
  • 例えば、es6以降から使用できるclassのprivateアクセス修飾子などを使用したtsファイルのソースがある場合に、targetをes5で指定してしまうと、そのような記法はないので、以下のようにコンパイルエラーになる
    • TS18028: Private identifiers are only available when targeting ECMAScript 2015 and higher
  • 最終的には、ES5へトランスパイルされる
  • 指定する値の目安としては、コンパイルを実行する環境のNode.jsのバージョンに対応したものを指定するとよい。理由としては、コードサイズや実行時間の最適化が期待できるため(Node.js16はES2021をサポートしているので、target: “ES2021″となる)
  • Node.jsとtsconfig.jsonのtargetの対応は以下を参考に
    • https://github.com/microsoft/TypeScript/wiki/Node-Target-Mapping
    • https://node.green/
module
  • どのような形式でモジュール(js)を読み込むか指定する(CommonJS, ES Module形式など)
  • モジュールの構文のみについてのオプションなので注意(ほかの構文は関係ない)
  • バックエンドならcommonjsを、フロントエンドならESModule(es2015, es2020, es2021, esnextを指定するのがよい
    • 例えば、ES2020からはawait文を使ったコード中のモジュールの読み込みができるようになったが、moduleを2015などで指定していると、それらのコードがコンパイルエラーになる(ESModule形式でもバージョンにより多少の違いがあるということ)
    • ESNextは、TypeScriptがサポートしているECMAScriptの最も新しいバージョンを指す
    • ESNextを指定すると、Tree Shakingなどの最適化ができる
esModuleInterop
CommonJS形式のモジュールをESModuleでimportする際などに、モジュールシステムの互換性を保つための設定
forceConsistent
CasingInFileNames
import時にファイルパスの文字列について大文字小文字を区別するかどうか
strict
コンパイル時の様々な厳格な型チェック機能を有効にする。Ex. noImplicitAny(any型が推論されたらエラーになる) https://www.typescriptlang.org/tsconfig/#strict
skipLibCheck*.d.ts ファイルに対する型チェックをスキップする

上記以外でよく使用する設定は以下の通り

分類項目内容
compiler OptionsrootDir
  • outDir(デフォルトならdist)にファイルを出力する際のディレクトリ構成を維持するためだけに使用される
  • コンパイル対象を決めるオプションではない
  • rootDirで指定したディレクトリ以外の場所に.tsという拡張子を持つファイルが存在するとエラーが生じるので注意
    • 例えば、jestのテスト用ファイルをtestsディレクトリに、ソースコードをsrcディレクトリに分けて配置し、roodDirを./srcのみ指定すると、jest用のtsファイルに対してエラーになるので、後述のincludeと組み合わせる必要がある
 outDir
  • tscコマンドでトランスコンパイルした時のファイルの出力先を指定する
  • webpackを使用しており、outputにパスを指定している場合はこちらの設定は本質的には不要
sourceMaptrueを指定することで、出力されたJavaScriptファイルに対応する元のTypeScriptソースを表示できるようになる
importsNotUsedAsValuesinterfaceやtypeなど型の定義だけを持つのtsファイルのインポートは、import typeの形式での記述を強制できる(コンパイルエラーにする)
resolveJsonModule
  • JSONファイルのimport、型の抽出や生成が可能になる
  • moduleResolution(基本的には、nodeを指定すればOK)も併せて指定していないと使用できないので注意
baseUrl
相対パスによるimportを行う際の起点となるパス
paths
  • 特定のディレクトリをエイリアスで表現できる(@など)ので、相対パスのimport(../../../)地獄を解消してくれる
  • baseUrlの指定がないと使用できないので注意
include
  • コンパイルの対象ファイルを指定
  • src/**/*.tsと指定した場合、src配下のtsファイル全て(ディレクトリのネストが深くなっても再帰的に全て)をコンパイル対象にすることが可能
exclude
コンパイルの非対象ファイルを指定(node_modulesなど)

node.js(ver16)の環境かつ、フロントエンドでstrictモードで使用するという前提に立つと、以下のようになった

タイトルとURLをコピーしました