現代のフロントエンド開発に必須の技術と設定サンプル(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
  }
}

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

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