現代のウェブアプリケーションのためのフォルダ構造

ウェブアプリの開発において、メンテナンスしやすいフォルダ構造を作ることは非常に重要です。正しいフォルダに適切なファイルを置くことで、コードの体系を整え、他の開発者がウェブアプリのアーキテクチャがどんな感じなのか、または開発中になる予定なのかを理解しやすくするんだ。この投稿では、モダンなウェブプロジェクトを構築する際のいくつかのフォルダ名について説明するよ。

ウェブアプリを開発する時、整理されたフォルダ構造を維持することは極めて重要だよ。一人で作業しているときやリソースが少ない時には、最初に考えることではないかもしれないけどね。そうでないと、非プロフェッショナルに見えるリスクがあるから。

フォルダ構造を設計する際のヒント

• ウェブプロジェクトの目的を理解する：ウェブプロジェクトをどのように整理するかを決めるには、何を持っているのか、そしてウェブアプリケーションの機能や組織しようとしているアセットの量に応じて、よく理解する必要があるんだ。
• フォルダとファイルに適切な命名規則を使用し、それらがウェブアプリケーションで果たす目的を表すようにすること。

フォルダ構造とその説明

Assets
assetsフォルダには、ウェブアプリケーションで使用されるすべての画像、アイコン、CSSファイル、フォントファイルなどが含まれているよ。カスタム画像、アイコン、有料フォントをこのフォルダに置くのさ。

Context
React Jsを好みのフロントエンドUIライブラリとして使用している場合、contextフォルダはコンポーネントや複数のページで使われるreact contextファイルを保存する場所だよ。

Components
componentsフォルダはアプリケーションのUIを保持しているんだ。ナビバー、フッター、ボタン、モーダル、カードなど、UIコンポーネントがここに入っている。

Composables
Vueアプリケーションの文脈で、「composable」とはVueのComposition APIを利用して状態の論理をカプセル化し再利用するための関数のことを指すよ。

Data
dataフォルダはテキストデータをJSONファイルとして保存し、異なるセクションやページで使用するためのものだ。これにより、情報の更新が容易になる。

Features
このフォルダには、各ページ（認証、テーマ、モーダルなど）の個別のフィーチャーを含むフォルダが含まれているよ。例えば、それぞれのページはモーダルのフィーチャーを持つことがある。

Hooks
Hooksは、関数コンポーネントからReactの状態とライフサイクル機能に「フックする」ことを可能にする関数だ。カスタムフックは「use」という名前で始まり、他のフックを呼び出すために使うことができる。

Layouts
ウェブページの一般的な見た目と感じを定義するとき、Layoutsフォルダが便利だ。サイドバー、ナビバーやフッターなどのレイアウトベースのコンポーネントを配置するために使われるんだ。ウェブアプリケーションに複数のレイアウトがある場合、それらを保存するのに最適な場所だよ。

Modules
Modulesフォルダはアプリケーションの特定のタスクを扱うよ。

Pages
pagesディレクトリにはウェブアプリケーションのビューが含まれているんだ。例えばNext JsやNuxt Jsのようなフロントエンドフレームワークのpagesディレクトリはディレクトリ内のすべてのファイルを読み込み、自動的にルーター設定を作成するんだよ。

Public
publicディレクトリはサーバールートで直接提供され、favicon.icoなどの変更されない公開ファイルを含んでいる。

Routes
routesフォルダは、ウェブアプリケーション内の異なる画面へのルートパスを保存する場所だよ。

Utility/Utils
このフォルダは、認証、テーマ、handleApiErrorなど、すべてのユーティリティ関数を保存するためのものだ。

Views
Viewsフォルダはpagesフォルダのようなものだよ。ビューはページを適切に表現するために使用され、ユーザーが行き来することができるようにするんだ。

結論

良いフォルダ構造は、あなたや他の開発者がファイルを素早く見つけやすく管理する手助けとなるよ。整理されたフォルダ構造は、あなたをプロフェッショナルに見せるんだ。

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/noruwa/folder-structure-for-modern-web-applications-4d11