Webサーバーやコンピューター全般で使われる「ディレクトリ」についてです。
ディレクトリの意味や種類、ディレクトリからファイルへの経路については必ず知っておくべき事だと思っています。
私の場合はWebサイトで使用してるWebサーバーを調べていてディレクトリが必ず出てきて「ディレクトリって何？」となり、理解しておかないと後で苦労しそうと思いながらも数か月。ようやく記事にすることにしました。
ディレクトリについての知識が身に付くと、コンピューター全般で自分自身のできる範囲が広がると思えます。
ディレクトリとは
ディレクトリ(directory)とはWindowsやMacなどのOSでいうとフォルダのことです。
ディレクトリはファイルをいれておく箱として考えると分かりやすく、必要なファイルを入れる場所に箱を配置してファイル管理する感じです。
ディレクトリとフォルダは言葉は違うけど意味はほぼ同じ。しかし区別をつけるとしたら次のようになると思いました。
- ディレクトリはファイルシステムとしての実装レベルの概念
- フォルダはユーザー操作環境(GUI)における見せ方レベルの概念
ファイルを識別するために、その実体との関係性を管理する感じなのかなと思っています。
もう一つ必要だと思うのがディレクトリを整理整頓の役割にすること。
そのためにはルートディレクトリやサブディレクトリなどのディレクトリの種類を理解して使い分けていく必要が出てきます。
ディレクトリは、ディレクトリの中にディレクトリを作っていき、ディレクトリパスやディレクトリ名がそれぞれのディレクトリにあってファイルをいれていく。
事務整理っぽくまとめると
使用する必要なファイル(書類)をディレクトリ(箱)にまとめて入れる(整理)
のような覚え方が分かりやすいです。
ディレクトリの種類
複数のファイルが混在しないようにディレクトリを階層にして使うとファイルまでの経路を分かりやすくできますが、逆に複雑なディレクトリ構造になってしまう場合もあるかもしれません。
そんな複雑になったとき、一つのファイルに行くとしても色々な指定方法があるのでディレクトリを分かりやすく理解するためにディレクトリの種類を覚えておきたいと思います。
ルートディレクトリとドキュメントルート
ルートディレクトリとはディレクトリ階層の最上階のディレクトリ。これ以上の上にはディレクトリはない起点としたディレクトリをルートディレクトリといいます。
【ドキュメントルート】
Webサイトを運営してる人ならすでに理解してる事かもしれませんがドキュメントルートはWebサーバー上に公開するためのルートディレクトリです。
そしてWebサイトやFTPなどで外部公開するためのデータが設置されてるサーバー上のデータを入れるルートディレクトリになります。
例えばドキュメントルートに置いたディレクトリにはindex.htmlファイルが設置してあり「http://ドメイン名」でアクセスするとトップページが表示できる。
私のサーバー環境(エックスサーバー)ではpublic.htmlがドキュメントルートになり、WordPressサイトで公開するファイルが置かれています。
逆にWebサイトに公開したくないファイルのアップロードをする場合はpublic.htmlより上に置くとセキュリティの確保ができます。
サブディレクトリがあって階層構造になる
基本的にディレクトリは1つのルートディレクトリの下にあるのでルートディレクトリ以外をサブディレクトリといえます。
ディレクトリという大きい箱の中にディレクトリという中くらいの箱を入れて、更にディレクトリという小さい箱を入れた妄想をしてください。
中と小の箱をまとめて入れられる大きい箱がメインの箱になって初めてサブの箱といえます。
- 大きい箱の中の中くらいの箱のサブディレクトリ
- 中くらいの箱の中の小さい箱のサブディレクトリ
大きい箱にサイズ違いの箱をどんどん入れていくと階層構造が出来上がってます。
たとえばWebサーバー(エックスサーバー)のディレクトリ構造では
- 最上階の「/」をルートディレクトリ
- public_htmlはドメインのサブディレクトリ
- public_htmlの下にあるwp-contentはpublic_htmlのサブディレクトリ
というように一つ上の階層とつながりを持つ下層ディレクトリをサブディレクトリといいます。
ルートディレクトリから始まってサブディレクトリがある階層構造は家系図みたいなものでしょうか。
間違えてはいけないカレントディレクトリの起点
現在作業しているディレクトリをカレントディレクトリといいます。
ルートディレクトリのときはディレクトリの最上階が起点になりましたが、カレントディレクトリは現在作業してるディレクトリが起点になるのがルートディレクトリとの違いです。
カレントディレクトリの上の階層は親ディレクトリ。
そしてカレントディレクトリからの経路をパスにするときは相対パスでファイルやディレクトリを指定する基準位置になるのでパスについても見てみましょう。
パスとは
まずパスとはPC内やWebサーバー内で、目的のファイルがどこのフォルダやディレクトリに保存されているか経路を示す文字列です。それにコンピューターにファイルの場所を伝えるためにも必要です。
ディレクトリのパスはルートディレクトリからサブディレクトリに下がるごとに「/」でディレクトリが区切られています。UNIX系のOSでは「/」Windowsの場合は「￥」で区切られてたりします。
url構造やurlの仕組みはurlパスを使用しているので、ディレクトリをWeb表示するときやWebサーバーでファイルを確認するときなどに必要になるのがパス。
しかしルートディレクトリとカレントディレクトリではパスの指定方法が変わってきます。
絶対パスと相対パスの2種類のパス指定方法を覚えておきたいと思います。
絶対パスはルートディレクトリからの経路
絶対パスはルートディレクトリから目的ファイルまでの経路を指定する方法です。
ディレクトリ階層の一番上から作業ファイルまでの道順をパス指定するだけなので、作業してるファイルの場所が変わってもスタート位置は絶対に変わらないので指定方法としては簡単です。
ディレクトリ構造で見る絶対パス
たとえばtest1.pngを読み込む時です。
shu-sait.comの中のimgディレクトリの中のファイルです。
<img src=”https://shu-sait.com/img/test1.png“>
絶対パスはルートディレクトリが起点なのでimgタグsrc属性の記述の絶対パスはドメイン名が起点になります。
次はWebサーバーのディレクトリ構造と一緒にパスをFTPで見てみます。
ルートディレクトリ「/」からディレクトリ階層が下がるにつれてのパスもみてください。
パスはドメイン名が表示されて現在はドメイン名にいます。
ドメイン名の下の階層にpublic_htmlをカレントディレクトリにするとパスもpublic_htmlが追加されています。
public_html下の階層のwp-contentをカレントディレクトリにするとパスでもwp-contetまでの経路が分かります。
相対パスはカレントディレクトリからの経路
私の脳では難しく思ったのが相対パスです。
相対パスはカレントディレクトリ(現在地)から目的のファイルに進む経路を指定する方法です。
カレントディレクトリは作業する内容によってファイルの場所が変わるので現在地を起点とする相対パスの経路も当然その時その時で変わります。
相対パスのルール
- 1階層上にあるフォルダの中のファイル 「../フォルダ名/ファイル名」
- 2階層上 「../../」
- 下の階層 「./フォルダ名/ファイル名
- 同じ階層 ファイル名か「./ファイル名」
- 上の階層 「../ファイル名」
上記の相対パスルールを使用してhtmlタグでimgタグのsrc属性を使い、Webサイトの目的のページに違うディレクトリの中にある画像ファイルをリンクさせる場合で例えます。
【1階層上にあるフォルダの中のファイルの場合】 ../フォルダ名/ファイル名
style1.cssでtest1.pngを参照する場合の相対パス
<img src=”../img/test1.png”>
カレントディレクトリより一つ上の階層のimgディレクトリがtest1ファイルのあるディレクトリなので「../」が一個上の階層に上がるパス指定です。
【2階層上にある場合】 ../../ファイル名
1階層上にあるときのパス指定を応用して「../」(1階層上)だったのを「../…/」(2階層上)と指定すれば2階層上になります。
【下の階層にある場合】 ./フォルダ名/ファイル名
index.htmlでtest1.pngを参照する相対パス
<img src=”img/test1.png”>
【同じ階層にある場合】 ファイル名だけか、または ./ファイル名
同じ階層にいるので階層を上がったり下がったりの指定を書く必要がないのでファイル名を書いて指定してあげるだけです。
ドットが1つとスラッシュ「./」は同じ階層という意味なのですが書いても書かなくてもいいので、フォルダ名だけでパス指定もできます。
なんか極端すぎる構成図の画像になってますが構成図作りに燃え尽きたのでご勘弁を…
style.cssでimg.pngを参照する相対パス
<img src=”./style2.css”>
または
<img src=”style2.css”>
となります。
相対パスは難しいかもしれないですね。
私は一度では覚えられなかったので、実際に自分のディレクトリ環境をいじってみたりディレクトリ構成図を作成したりするとパス指定も理解が深められるので良ければ試してみてください。
