2-5 ドキュメントルートとURLの関係を理解する

MAMPを使ってPHP環境を構築し、
http://localhost/test.php にアクセスできたとしても、

・なぜこのURLで表示されるのか
・ファイルはどこに置けばいいのか
・フォルダを作るとURLはどう変わるのか

これが分からないまま進んでしまう人は非常に多いです。

この「ドキュメントルートとURLの関係」は、
Web開発で一生使う超重要概念です。

この記事では、
ファイルの置き場所とURLがどう対応しているのかを、
図をイメージしながら初心者向けに解説します。

この記事で学べること
ドキュメントルートとは何か
1. MAMPのドキュメントルート（再確認）
URLとファイルの対応関係
1. 具体例で理解する
2. なぜこの対応になるのか
index.php が省略できる理由
1. よく使われるindexファイル
よくある「表示されない」原因
フォルダ構成を意識するメリット
本番サーバーでも同じ考え方
学習でのおすすめフォルダ構成
まとめ
次に読むべき記事

この記事で学べること

・ドキュメントルートとは何か
・ファイルパスとURLの対応関係
・フォルダを作った場合のURLの変化
・なぜ「表示されない」エラーが起きるのか

ドキュメントルートとは何か

ドキュメントルートとは、
ブラウザからアクセスできるファイルの起点となるフォルダです。

Webサーバーは、
このフォルダを「Webの入口」として扱います。

MAMPのドキュメントルート（再確認）

MAMPのデフォルト設定では、
ドキュメントルートは次の場所です。

/Applications/MAMP/htdocs

このフォルダの中にあるファイルだけが、
ブラウザからURLでアクセスできます。

URLとファイルの対応関係

ここが最重要ポイントです。

URLは、ドキュメントルートを起点にした「ファイルの場所」を表しています。

具体例で理解する

次のような構成を考えてみます。

htdocs/
 ├─ test.php
 └─ sample/
     └─ index.php

この場合、URLは次のように対応します。

・http://localhost/test.php
→ htdocs/test.php

・http://localhost/sample/index.php
→ htdocs/sample/index.php

なぜこの対応になるのか

Webサーバーは、

http://localhost/

を htdocsフォルダ として扱っているからです。

そのため、
URLの後ろに続くパスは、
そのままフォルダ構造に対応します。

index.php が省略できる理由

次のURLを見てください。

http://localhost/sample/

実はこれでも、
先ほどの index.php が表示されます。

理由は、
Webサーバーが自動的に index.php を探す設定になっているからです。

よく使われるindexファイル

一般的に、
次のファイル名は「最初に表示するファイル」として扱われます。

・index.php
・index.html

この仕組みは、
本番サーバーでも同じです。

よくある「表示されない」原因

ここで、初心者が必ず一度はハマる原因を整理します。

原因① ファイルを置く場所が違う

・デスクトップ
・Downloadsフォルダ

これらに置いても、
ブラウザからは表示されません。

必ず
ドキュメントルート（htdocs）配下に置く必要があります。

原因② URLとファイル名が一致していない

例
ファイル名：test.php
URL：http://localhost/test.html

この場合、
当然表示されません。

原因③ フォルダ構成を間違えている

フォルダを作った場合は、
URLにも必ず反映させる必要があります。

フォルダ構成を意識するメリット

この考え方が身につくと、
次のようなメリットがあります。

・どこに何を置けばいいか迷わない
・エラー原因を自分で切り分けられる
・本番サーバーでも応用できる

これは、
初心者から一段レベルアップする分岐点です。

本番サーバーでも同じ考え方

レンタルサーバーやVPSでも、
基本的な考え方は同じです。

・ドキュメントルートが存在する
・URLはフォルダ構造に対応する
・indexファイルが入口になる

ローカルで理解しておけば、
本番環境でも混乱しません。

学習でのおすすめフォルダ構成

学習中は、
次のような構成がおすすめです。

htdocs/
 ├─ html/
 ├─ css/
 ├─ js/
 ├─ php/
 └─ index.php

これにより、
役割ごとに整理しながら学習できます。

まとめ

ドキュメントルートとURLの関係は、
Web開発の基礎中の基礎です。

・ドキュメントルートがWebの起点
・URLはフォルダ構造に対応する
・index.phpは自動で読み込まれる

この理解があるだけで、
「表示されない」「動かない」トラブルの多くを自力で解決できます。

次は、
HTMLを実際に書きながら学ぶフェーズに進んでいきましょう。

次に読むべき記事

▶ 次の記事：
3-1 HTMLとは何か｜Webページの構造を作る言語