静的サイトの成り立ち③：HTMLを変化させるJavaScript
Webページを構成するものとして、最後に紹介するのがJavaScriptです。JavaScript自体はとある1つのプログラミング言語なのですが、Webページと組み合わせて使われるケースが多いです。
Webページ内にJavaScriptを組み込むと、ブラウザ側でJavaScriptが実行され、「クライアントサイドでの動的な仕掛け」をつくることができます。決してサーバーサイドではなく、クライアントサイドというのが特徴ですね。
特に深追いする必要はありませんが、DOMと呼ばれるHTMLドキュメントにアクセスする方法があり、それを介してJavaScriptがブラウザ側のHTMLを変化させたりします。これを応用すると様々なことが可能になります。
- Webページの特定の部分を動かす
- 移動させるだけではなくてフェードイン・フェードアウトなどもできる
- ボタンを押すと一番上までスクロールして戻る
- クライアントサイドだけでフォームの入力値検証
- スライドショーなど特殊な見た目の実装
上記がパッと思いつくJavaScriptを使った実装例です。また、動的サイトではJavaScriptを使った非同期の通信＝Ajaxと呼ばれるような仕組みづくりも可能です。
今回のまとめ
最低限HTML、装飾をしたければCSS、ページに動きを持たせたければJavaScriptを利用し、サーバーで配信をすれば静的な要素のWebサイトとして成り立たせることができます。
今回はそのためにそれぞれの基礎的な事柄や事例を紹介してきました。深追いすると1冊の書籍、いや、それ以上の知識が必要となりますので、興味のある方はまずは Webのリソースを調べるなどをしてみるのをオススメします。
次回は、より複雑なケースとして動的サイトの裏側を紹介していきたいと思います。
Webの記事を読むのもいいけれど、リアルゆーすけべーさんに会って直接講義を受けませんか？
本講座では、実際のWebサービス制作における事例やエピソードを交えながら、ディレクターの役割と必要なスキル、そしてチームの共通言語となるWeb基礎技術について学びます。Webディレクターに成り立ての人やWebクリエイターとのやり取りがイマイチうまくいかない人にオススメです。
