最近業務でTypescriptを使用することが増えたので、ディレクトリ構成方法について自分なりにまとめてみようと思います。
ディレクトリ構成
srcディレクトリ
・全てのTypescriptソースファイルをsrcディレクトリに設置する。
・機能やモジュールごとに整理するのがベスト
src/
├── components/
├── services/
├── hooks/
├── utils/
├── types/
└── main.ts
distディレクトリ
Typescriptはブラウザでそのまま実行することができないので、まずJavascriptにコンパイルする必要がある。
その際にソースコードと区別してコンパイル後のファイルをdistに出力します。
・コンパイル後のJavascriptファイルはdistに出力
・ソースコードとビルドファイルを分離することで管理が簡単になります。
・distは自動で生成されるため、通常はGitで管理しない。これによりリポジトリが不要なファイルで膨らむのを防ぐ。
dist/
└── main.js
testsディレクトリ
テストファイルはtestsにまとめる
tests/
├── user.test.ts
configディレクトリ
設定ファイルはこちらに追加
環境ごとの設定もここで管理
assetsディレクトリ
画像やスタイルシート、フォントなどの静的アセットを格納
assets/
├── images/
└── styles/
typesディレクトリ
・型定義を共通で管理し、再利用しやすくします。
types/
├── user.ts
└── product.ts
utilsディレクトリ
・汎用的に使える関数やロジックを格納。
utils/
├── formatDate.ts
└── calculateTax.ts
servicesディレクトリ
・外部APIとの通信処理やビジネスロジックを担当。
componentsディレクトリ
ボタンやカードなどの再利用可能なコンポーネントを管理。