【TypeScript/JavaScript】Knipで不要なコードを簡単に削除する方法

はじめに

TypeScript/JavaScriptのプロジェクトで不要なコードを検出し、削除するツール「Knip」について紹介します。

Knipとは？

Knipは、TypeScriptやJavaScriptのコードベースから不要なコードを検出するためのCLIツールです。

以下のような不要なコードを検出することができます。

• package.json の dependencies / devDependencies に含まれているが、実際には使われていないパッケージ
• exportされているが、どこからもimportされていない変数、関数、型
• 使用されていないファイル

これらの不要なコードを検出し、整理することでプロジェクトのメンテナンス性を向上させることができます。

Knipの使い方

Knipの使い方は非常にシンプルです。
以下のコマンドを実行することで、プロジェクト内の不要なコードを検出できます。

# インストール
npm install -D knip typescript @types/node

# 実行
npx knip

実行例

以下は、Knipを実行した際のサンプル出力です。

Unused files (2)
  src/oldFile.ts
  src/unusedComponent.tsx

Unused dependencies (2)
  lodash
  moment

Unused exports (3)
  functionA in src/utils.ts
  constantB in src/constants.ts
  typeC in src/types.ts

Knipの機能

Knipは"zero config"を目指しているツールで、追加の設定なしに多くのプロジェクトで利用可能です。
特に以下のような場合でも、簡単に導入することができます。

• 各種linterやtest runner、ビルドツールの設定でimport文を使わず暗黙的に読み込むパッケージがある場合
• monorepoで複数の package.json が存在する場合

Knipの仕組み

Knipが不要なコードを検出する仕組みを理解するためには、エントリーファイルとプラグインという概念が重要です。

エントリーファイル

エントリーファイルは、不要なコードを検出する際の起点となるファイルです。デフォルトでは index.ts や main.tsx などがエントリーファイルとなります。

Knipはエントリーファイルから順番にimportされているファイルを解析し、使用しているパッケージやexportされている変数、関数、型などを検出します。

index.ts

import { functionA } from './utils'
import { componentX } from './components'

// 使用しているコードのみ
functionA()
componentX()

utils.ts

export const functionA = () => {
  console.log('Function A')
};

export const functionB = () => {
  console.log('Function B')
};

components.tsx

export const componentX = () => {
  return <div>Component X</div>
}

export const componentY = () => {
  return <div>Component Y</div>
}

上記の例では、functionBとcomponentYが未使用として検出されます

プラグイン

プラグインは、各ライブラリ（例えばJestやESLint、Next.jsなど）で使用しているファイルから不要なコードを検出する機能です。

プラグインを有効化することで、特定のライブラリやフレームワークに依存するファイルも解析対象に含めることができます。

例えば、Jestのテストファイルに対しても解析を行う設定が自動で適用されます。

jest.config.js

module.exports = {
  testMatch: ['**/__tests__/**/*.js?(x)', '**/?(*.)+(spec|test).js?(x)'],
}

__tests__/example.test.ts

import { functionA } from '../utils'

test('functionA test', () => {
  expect(functionA()).toBe(undefined)
})

この例では、tests/example.test.tsファイルもKnipの解析対象になります。

Knipの導入事例

KnipはTypeScriptやJavaScriptのプロジェクトで広く利用されており、特にベースマキナのプロジェクトでは不要なコードの整理に大いに役立っています。

また、Knipは設定がシンプルであり、導入後のエラー対処も容易であるため、多くのエンジニアにとって使いやすいツールとなっています。

プラグインが正しく機能しない場合の対処法

Knipはzero configとはいえ、追加設定が必要な場合もあります。

例えば、プラグインに関連したパッケージが正しく検出されない場合、以下のように設定を追加することで解決できます。

knip.config.ts

export default {
  jest: {
    entry: ["**/__custom_tests__/**/*.ts"],
    config: ["jest.config.ts"],
  },
  ignoreDependencies: ["jest-watch-select-projects"],
}

おわりに

今回は、TypeScript/JavaScriptの不要なコードを検出するツール「Knip」について紹介しました。

Knipはzero configを目指しているツールであり、簡単に導入できるため、ぜひ皆さんのプロジェクトでも試してみてください。

Knipを利用することで、プロジェクトのコードベースをよりクリーンに保つことができます。

参考文献