静的、動的の違い
昔はわからなかった静的、動的という意味について。
よくこう言われる。
『HTML、CSSは静的なコンテンツ、javascriptは動的なコンテンツを作成するときに使われる。』
でもCSSを勉強してるときに、animationとかがあるだろう。これを見て『え、動いてるから動的じゃん。CSSも動的って言えるんじゃないの？』と当時の僕は思い、頭をひねり、調査し、結果、頭の隅の暗い箱へとその疑問を封印しました。
何年か経ち、Javaなどにも触れはじめ、何も考えなくてもjavascriptの基本的な動きや役割がわかりかけてきた昨今。
今なら説明できる気がする～！ということで備忘録。
静的とは？
まず、HTMLが静的といわれる意味について。
肝は、HTMLは、1ページに対して1つのファイルが必要なんですよね。
内容はほぼ同じだけれども少しだけ違う2つのページをHTMLとCSSだけで作ろうとしたときには、
- page1.html
- page2.html
のように2つのページがどうしても必要になる。
例えばみなさんよく使う楽天やらじゃらんやら、アカウントを作ってサービスを利用する場合を考えてみます。
まずサービスを使うためには『ログイン』ボタンをクリックしてログインするわけですが、そうすると『ログイン』ボタンだったところが『ログアウト』に変わりますよね。
ページの内容は全く変わっていないのにこの文字の部分だけが変わっている。
これをHTMLとCSSだけで実装しようとすれば、先ほどのようにpage1.html、page2.htmlみたく2つのファイルを作成しなくちゃならないんです。
ほんの少ししか違わないのに、ですよ。これをサイト全体で繰り返していたらいったい何ページのファイルを作らにゃならんのやら。サイトが完成する前にプログラマー全員の肩が化石になります。
静的、動的の見分け方
これをjavascriptなどの動的な動きを実装できる言語を使用するとこのくらいのコンテンツ変更であればちょちょいっと変更できるわけです。
コンテンツっていう言葉が出てきましたけど、これが動的か静的かを見分ける鍵のような気がします。
ちょっと問題です。以下の2ページの組はいずれも、内容がほぼ一緒なのに一部だけ違うプログラムの例です。この2つのページを、たとえばボタン1つで切り替えたい場合、今まで話してきたようにHTMLとCSSのみでは2つのファイル作成が必要になります。
ただ、このうち1つだけ、CSSをうまく使えば1つのファイルでも実装できるものがあります。どれでしょう？
■プログラム1
- 文頭が『こんにちは』から始まるページ
- 文頭が『こんばんは』から始まるページ
■プログラム2
- 最初の見出しが赤色になっているページ
- 最初の見出しが青色になっているページ
■プログラム3
正解は…
プログラム2、ですよね。
そんなの簡単だよ。という人もいると思いますが、この違いを見分けることが静的、動的を説明するうえでは重要なんです。
なぜプログラム2だけ1ページでも実装できるのかというと、プログラム2での2つのページの差異は『装飾』のみだからです。
画像も記事を装飾しているじゃないか！と思う方もいるかもしれませんが、ここでいう『装飾』とは、文字や画像など、すでにある要素（コンテンツ）に対して変化を与える効果のことを言います。
記事っていうのは概念的なものなので、画像を入れることで可読性が上がる！といった効果を『装飾』とは言いません。
そしてこの装飾をつかさどるプログラムがCSSなんですね。この装飾を変更するのみであれば、HTMLとCSSのみで変化を付けることができます。（まぁjavascriptの方が簡単に実装できますが）
まとめ
文字、テキストや画像などの『コンテンツ』をHTMLで記述し、CSSで『装飾』する。
もしこのページに変化を加えた場合、『装飾』の変更のみであればCSSで対応できる。
ココマデが静的。
もしも『コンテンツ』を変更したい場合にはjavascriptのような動的な言語が必要になる。（javascriptは画像の入れ替えとか文字の変更とかも対応できる）
という切り分け。
みなさんもこの記事でちょっとでも理解が深まったら『やったー！静的だー！動的だ―！』って叫んでみてくださいね。
