WEBエンジニアがWEBサービスを構築する時には、様々な言語を扱わなければいけないのですが・・・
一般的なOS直下型のアプリケーションを構築する際にはそのアプリケーションのプラットフォームに見合った言語１つを扱えば、大体のアプリケーションは出来上がってしまうが、WEBシステムに関しては、HTML,CSS,Javascript,PHP（他のCGI）などを全部使わないと出来上がらないという現状があります。
webエンジニアの勉強に壁があるのは、一般的なアプリケーションプログラマーと違ってこうしたマルチ言語を全て熟知しておかないと行けない上、サーバーやネットワークと言った周辺知識も必要になり、実は非常に幅広い知識とスキルと経験が必要であることが原因だと考えられます。
今回は僕が個人的に不満に思っているそれぞれの言語や用途において、階層の考え方が違っているという、初心者のトラブルポイントのひとつを紹介したいと思います。
プログラム初心者の方で、階層の扱いがピンと来ていない人は一読してみてください。
言語別の読み込み階層の種類
htmlからjavascriptやcssファイルや画像を読み込む階層
<script src="***"></script>
<link rel="stylesheet" href="">
<img src="">
読み込みを行なうhtmlファイルを基準にした、階層で指定するので、一般的にはhtmlは一番rootに設置して、それぞれのモジュールをディレクトリ下層に配置して読み込みを行なう。
また、階層下に無く、別の兄弟ディレクトリに配置されている場合には、「../../」という風に、階層を上って行なう「相対パス」と「/」ルートからの配置を行なう「絶対パス」の2パターン存在する。
個人的には相対パスで書いたほうが、本番サイトとテストサイトでの環境誤差によるトラブルが発生しにくいので、オススメです。
ただし、「http://...」という風にURLで記述する場合も絶対パスになりますが、API的なモジュールになるので、この場合は固定読み込みが期待できるので、絶対パスでも安定感がありますね。
cssからimportを使って読み込む階層
@import url("test.css");
【階層構造】
index.html
css/sample.css
css/test.css
上記の読み込みに関して、初心者が難しくなるポイントが入っており、「index.html」から「css/sample.css」を読み込み、その「sample.css」から同じ階層に設置してある「css/test.css」を読み込むようになっているのですが、
「@import url("css/test.css")」
ではなく、
「@import url("test.css")」
になる事に注意してください。
これは、読み込むモジュールからの相対階層になるので、トラブルに注意してください。
同じ要領で、「background-image:url(...)」なども、読み込みもジールからの相対パスにならなければいけないので、要注意です。
javascriptのajaxを使って読み込む階層
$.ajax({
url : "test.php"
...
})
これはjQueryを使ったajax記述の例ですが、urlの部分にhttpから記述する場合は何の問題もありませんが、ローカルファイルを指定する場合は、ここでも相対パス問題が発生しがちです。
この場合の相対パスの元階層は、このajaxを実行（表示）しているhtmlファイルが元階層になります。
cssとは感覚が違っているのでここもトラブルポイントになりがちですね。
javascriptに関しては、javascript内での元階層は、読み込みを行って表示しているhtmlファイルの階層が全ての階層対象になるという事です。
htmlじゃなく、phpで実行している場合も同じなのですが、分かりやすく言えば、アドレスバーにかかれているURLが基準階層になるという事なんですね。
nodejsのrequireで読み込む階層
前述したjavascriptと同じ言語であるnode.jsですが、階層の扱い方は少々異なる為、要注意です。
require(nodejs/load.js');【階層構造】
base.js
nodejs/load.js
nodejs/sample.js
require(sample.js');
ここで行っているのは、nodejsのライブラリ階層を作った際に、ライブラリ内で別モジュールを呼び出す場合、基本階層は、読み込みをするモジュールが相対元になるという事に注意しましょう。
「load.js」と「sample.js」は同じ階層にあるんですが、「base.js」で読み込む場合と「load.js」で読み込む場合の階層の違いでトラブらないようにしましょう。
phpのrequire_onceで読み込む階層
index.php
lib/load.php
lib/sample.php
<?php
require_once "lib/load.php";
<?php
require_once "sample.php";
<?php
echo "sample !!!";
phpもnodejsと同じように、読み込むモジュールが基本階層になるので、相対パスのサーバーサイドはこれが標準と考えてもよさそうですね。
大きく分けて2種類
上記を見て分かる通り、大元の読み込みファイル（階層）が基準になる場合と、実行するファイル階層が基準になる2パターン存在することがわかります。
プログラム構造を考えると理解できるのですが、webエンジニアとしては、使う言語に応じて基準階層が変わっているので、間違えてコーディングしてしまうことも多々あります。
フレームワークを使っている場合などは、その中で処理してくれる場合も多いようですが、php、javascript、cssどれも一括で管理してくれるフレームワークは無いので、独自のことをやろうとすると、こうした知識は熟知しておく必要があります。
また、一般的には、モジュールの数珠つなぎの読み込みは行なわず、c言語の様に、初回で一括してライブラリ読み込みを行なうという方が効率的なのかもしれません。
こういう事を考慮した自分フレームワークを構築しておくことも、作業効率化に大きく役立つかもしれませんね。
