HTML・CSS・JavaScript の違い — Web サーバー層が描いているもの

この記事は、Web サーバー層を作る HTML・CSS・JavaScript の 3 つを扱います。

書く場所が index.html・style.css・script.js に分かれているのは、決めることが違うからです。

3 つのファイルは、まとめて届くわけではありません。

3 つのファイルはどれもブラウザが受け取り、読み込むのも実行するのもブラウザです。

HTML は、画面に何があるかを部品の種類と順番で書く

HTML（HyperText Markup Language。画面に何があるかを、部品の種類と順番で書く言語）は、index.html に書きます。

画面の部品 1 つ 1 つが要素（element）、要素に付ける名前や設定が属性（attribute）、要素の始まりと終わりを示す記号がタグ（tag）です。

予約フォームの index.html は、この 3 つでできています。

<form>
  <input type="date">
  <button type="button" id="reserve" class="action">予約する</button>
  <p id="message"></p>
</form>

id と class は、あとで CSS と JavaScript が部品を選ぶための名前です。

id は 1 ページに 1 つだけ、class は何個の要素に付けてもかまいません。

要素は入れ子にでき、button 要素は form 要素の中に入っています。

head 要素にはページのタイトルと使うファイルの名前を書き、画面に出るのは body 要素の中だけです。

index.html は何があるかだけを書く

index.html に書くのは、画面に何があるかだけです。

部品の種類をタグで示して中身と並ぶ順番を書き、開始タグに付けた id と class は、あとで別のファイルがその部品を選ぶための名前です。

CSS は、要素がどう見えるかを別のファイルにまとめて書く

CSS（Cascading Style Sheets。HTML の要素をどう見せるかを、色・大きさ・配置の決まりとして書く言語）は、見た目だけを決めます。

style.css は次の形です。

.action {
  background-color: #2a6f97;
  color: white;
  border-radius: 8px;
}

先頭の .action が、どの要素に適用するかの指定です。

class が action の要素すべてに、波かっこの中の 3 行が適用されます。

style.css の中には、こうした決まりをいくつも並べます。

同じ画面にボタンが 3 つあるとき、色を変えるのに直す場所は、見た目をどこに書いたかで変わります。

見た目を要素の style 属性に書く方法もありますが、要素の数だけ同じ変更を繰り返します。

style.css にまとめておけば、直すのは 1 か所です。

style.css は名前で選んで見た目を決める

style.css がしているのは、どの部品を、どう見せるかを並べることだけです。

どの部品かは index.html に付けた class や id の名前で選び、部品を増やしたり、文字を書き換えたりはしません。

JavaScript は、操作に反応して画面を書き換える

HTML と CSS だけの画面は、表示されたあとに内容が変わりません。

ボタンが押されたときに文字を出すのが、 Web サーバー層での JavaScript の担当です。

script.js は次の形です。

const button = document.querySelector("#reserve");
button.addEventListener("click", () => {
  document.querySelector("#message").textContent = "予約を送りました";
});

1 行目の document は、ブラウザが読み込んだページ全体を指す名前です。

続く #reserve が id が reserve の要素を選ぶ書き方で、名前の前の記号が class か id かを表します。

3 つのファイルは、index.html に付けた名前でつながっています。

2 行目の addEventListener が、click のときに行う処理の登録です。

後ろの () => { } は、押されたときに動かす処理を波かっこの中に書く形です。

このクリックのように、利用者の操作をブラウザがプログラムに知らせる出来事がイベント（event）です。

イベントの種類は、クリックだけではありません。

どのイベントのときに何をするかを、先に登録しておきます。

マウスを乗せたときの色の変化は CSS で、フォームの送信はブラウザが行います。

script.js も利用者のブラウザへ届いて中身を読めるので、他人に見せてはいけない値は書きません。

script.js は呼ばれてから動く

script.js は、押されたらこれをする、と先に登録しておくだけです。

押されたときにブラウザが呼び出した処理が画面の部品を書き換えますが、index.html の中身は変わらず、また script.js は利用者のブラウザに届くので、他人に見せてはいけない値は書きません。

ブラウザは HTML から DOM を作り、CSS を適用して描き、JavaScript で書き換える

ブラウザは HTML の文字をそのまま出すのではなく、要素の入れ子をデータとして組み立てます。

これがDOM（Document Object Model。要素を入れ子のまま並べたデータ）です。

画面に見えているのは、この DOM を描いたものです。

script.js が登録した処理も、DOM と同じブラウザのメモリの中で待っています。

3 つのファイルは別々に届き、ブラウザの中で 1 つの DOM にまとまります。

この DOM を描いたものが、画面に見えているページです。

DOM に CSS を適用し、位置と大きさを計算して描くことがレンダリング（rendering）です。

書き換わるのは、ブラウザのメモリの中の DOM だけです。

届いた index.html も、公開サーバーに置いてあるファイルも、そのままです。

残したい内容は、アプリケーションサーバー層に送ってデータベース層に保存します。

JavaScript の書き方と、ブラウザで動かす練習は JavaScript 入門講座 で扱います。

画面は DOM を描いたもの

ブラウザは、届いた index.html から部品の入れ子を組み立て、style.css の決まりで色や大きさを付けて描きます。

script.js が書き換えるのはこの組み立てたほうなので、読み込み直すと届いたファイルから組み立て直され、書き換えた内容は消えます。