[React.js] - パート2: React + TypeScript + Viteのフォルダ構成ガイド
Ace Lennox
ReactとTypeScriptを使用し、Viteで構築されたプロジェクトでは、フォルダ構成を適切に管理することが、保守性や拡張性を向上させる上で重要です。このガイドでは、基本的なフォルダとファイルの役割について説明します。
フォルダ構成の概要
フォルダとファイルの説明
1. node_modules/
このフォルダには、インストールされたすべての依存パッケージとライブラリが含まれています。yarn などのパッケージマネージャーによって自動的に管理されるため、手動で編集する必要はありません。
2. public/
public フォルダには、静的なファイル（画像やアイコンなど）が含まれます。このフォルダ内のファイルは、そのままサーバーから提供されます。
例:
vite.svgはpublic/内にあるため、/vite.svgとして直接アクセスできます。
3. src/
src フォルダには、Reactアプリケーションのメインコードがすべて含まれています。
assets/
静的な画像やアイコンなどのリソースを保存するためのサブフォルダです。この例では、react.svgが格納されています。App.tsx
アプリケーションのメインコンポーネントで、アプリ全体の構造を定義します。通常は、ルーティングや主要なコンポーネントを含みます。main.tsx
アプリケーションのエントリーポイントであり、AppコンポーネントをDOMにレンダリングします。
例:
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)vite-env.d.ts
Viteの環境変数に関する型定義を提供するTypeScript宣言ファイルです。App.css&index.css
それぞれ、グローバルスタイルとコンポーネント固有のスタイルを定義するCSSファイルです。
4. .gitignore
Gitで管理しないファイルやフォルダを指定するファイルです。例えば、node_modules/ や .env などが含まれます。
5. eslint.config.js
コードの品質を保つためのESLintの設定ファイルです。コードの一貫性を保ち、バグを防ぐために使用されます。
6. index.html
Viteが提供するメインのHTMLファイルです。このファイルの <div id="root"></div> 要素にReactアプリケーションが挿入されます。
7. package.json
プロジェクトのメタデータや依存関係、スクリプトが記載されています。主なスクリプトには以下があります：
dev: 開発サーバーを起動します。build: 本番環境用にビルドします。preview: ビルドしたプロジェクトをローカルでプレビューします。
8. README.md
プロジェクトのセットアップ方法や使い方を記載するドキュメントファイルです。
9. tsconfig.json
TypeScriptのメイン設定ファイルで、ターゲットバージョンやモジュール解決、型チェックのオプションを定義します。
10. tsconfig.app.json
アプリケーション用の特定のTypeScript設定ファイルです。tsconfig.json を継承し、アプリケーション固有のオプションを指定できます。
11. tsconfig.node.json
Node.js関連のファイル（スクリプトやサーバーサイドコード）用のTypeScript設定ファイルです。
12. vite.config.ts
Viteの設定ファイルで、TypeScriptで記述されています。プラグインやエイリアス、ビルドオプションをカスタマイズできます。
13. yarn.lock
yarn によって自動生成されるファイルで、依存関係のバージョンを固定し、環境ごとに一貫性のある依存関係を確保します。
まとめ
このフォルダ構成は、React + TypeScript + Viteでのアプリケーション開発に十分対応できる基本的なものです。適切に管理されたフォルダ構成によって、開発効率の向上と保守性の向上が期待できます。プロジェクトが大きくなるにつれて、必要に応じてフォルダを追加し、さらに拡張していくことが可能です。
ソースコード
このプロジェクトの完全なソースコードはGitHubで利用可能です。