WEBサイト製作時のディレクトリ構成について考えてみた

どうもふうやです。

今日はTwitterでこんなアンケートをしてみました!

現時点ではディレクトリ構造としては、css、js、imgフォルダは直下に置いているという方が多いみたいです。

人それぞれ開発環境によってディレクトリ構成が違ってくると思います。

自分はフロントエンドのみとバックエンド込みでディレクトリ構成を振り分けています!

ある意味一般的かもしれないですが、紹介させて頂きます!

WEBサイト制作においてのディレクトリ構成を紹介

フロントエンドのみの場合

ディレクトリ構成
- css
- font
- img
- js
- 各種HTMLファイル

上記は一般的なディレクトリ構成になります。

すべてのファイル・フォルダがプロジェクトフォルダの直下に存在しています。

自分はフロントエンドのみの場合上記ディレクトリ構成で開発しています。

または、

ディレクトリ構成
- assets
  - css
  - font
  - img
  - js
- 各種HTMLファイル

フロントエンドの場合でもassetsフォルダを用意して、そこにcss、font、img、jsフォルダを格納している方もよく見かけます!

バックエンド込みの場合

ディレクトリ構成
- assets
  - css
  - font
  - img
  - js
- core
  - データベース接続関連ファイル
  - functions.php
- inc
  - head.php //head内で読み込むmetaタグやcssを読み込むファイル
  - footer-script.php //footerで読み込むスクリプトをまとめたファイル
- parts
  - 各種共通部分のパーツファイル群
- index.php
- 各種ページのメインファイル

一般的なディレクトリ構成は上記になると思います。

coreフォルダには基本、データベース接続関連のファイル群を格納したり、関数をまとめたfunctions.phpを格納します。

自分はincludeするファイルとパーツ部分のディレクトリを分けて上記のようにすることが多いです。

incフォルダーにはheadやfooterで読み込むスクリプトに関するファイルを格納したり、ajax先のファイルとしてこのフォルダに格納することもあります。

headの内容をincludeさせるときはtitleタグも付き物ですから、自分は各種ページのメインファイルの最初で、$page_name = “hogehoge”としてタイトルタグにechoしてます。

使い道はそれだけではなく、現在滞在しているページのナビゲーションのメニューにactiveクラスを付与して色を変えたいときなどに利用したりもします。

partsフォルダには各種ページ上の共通部分をまとめたパーツファイルを格納します。

まとめ

バックエンドでの開発はPHPしか出来ないのでこのようなディレクトリ構成なのかもしれませんが、Railsでの開発環境の場合のディレクトリ構成なんかも知りたいなと思いました。

「自分はこんなディレクトリ構成で開発しているよ」っていう意見有りましたらコメントお願いします♪

ありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です