今や、世の中のほとんどのWebサイトがプログラミング技術を使った動的なものになりつつあります。いわゆる「Webアプリ」と言われるものですが、ちょっとその仕組みをおさらいしてみましょう。
そもそも、Webの仕組みって？
Webアプリの前に、そもそも通常の静的なWebサイトをブラウザで閲覧する場合の仕組みをおさらいしておきましょう。静的なWebサイトの場合、ブラウザにWebページが表示されるまでの処理の流れは以下のようになります。
- ブラウザからWebサーバへ、「このURLのページを見たい」というリクエストを送る
- Webサーバは、URLで指定された場所にあるHTMLファイルに書かれているHTMLのコードをブラウザに送る
- ブラウザは、受け取ったHTMLコードを解釈し、レンダリング（表示）する
この場合、Webサーバはただ単純に自分が持っているHTMLファイルの内容を何ら加工せずにそのまま送信するだけです。つまり、Webサーバ上に保存されているHTMLファイルをダウンロードしてブラウザで開いているのとほとんど同じことです。
Webアプリの場合は？
Webアプリの場合は、ブラウザにWebページが表示されるまでの処理の流れは以下のようになります。
- ブラウザからWebサーバへ、「このURLのページに、こんな入力を渡して、その入力に応じた出力結果を見たい」というリクエストを送る
- Webサーバは、URLで指定された場所にあるプログラムにブラウザからの入力を渡す
- プログラムは、ブラウザからの入力を元に、どんなページを出力すれば良いかを演算し、その場でHTMLコードを生成する
- Webサーバは、プログラムが生成したHTMLコードをブラウザに送る
- ブラウザは、受け取ったHTMLコードを解釈し、レンダリング（表示）する
静的なWebサイトと違い、Webアプリの場合はブラウザからの入力に応じてその場でHTMLコードを生成しているわけです。これにより、動的なWebサイト（ユーザのアクションに応じて振る舞いが変わるようなWebサイト）が実現できます。
ブラウザ側で動的な振る舞いを実現するJavaScript
ところで、Webの技術として広く使われているものにJavaScriptというものがあります。JavaScriptはプログラミング言語の一つで、動的なWebページを作るために標準的に使われている技術です。
先ほど、「Webアプリ＝Webサーバが動的にHTMLコードを生成するようなWebサイト」と説明しましたが、実はその意味では、JavaScriptはいわゆるWebアプリの技術ではありません。なぜなら、JavaScriptのプログラムはWebサーバ側ではなくブラウザ側で実行されるからです。
- Webアプリの場合は、Webサーバ側でプログラムが実行されて、その実行結果に応じたHTMLコードがブラウザに送られてくる
- JavaScriptの場合は、プログラムのソースコードそのものがHTMLコードと一緒にWebサーバから送られてきて、ブラウザ側でそのプログラムを実行する
というわけです。もっと端的に言うと、
- Webアプリは、プログラムを実行する際にページを読み込む（Webサーバと通信をする）必要がある
- JavaScriptは、ページの読み込み無しに、ブラウザの中だけでプログラムを実行できる
というのが最大の特徴です。皆さんが日頃利用しているWebアプリは、これらの技術を用途や目的に応じて使い分けたり組み合わせたりして作られているのです。
まとめ
Webアプリの技術やJavaScript、またそれらを組み合わせたAjaxと呼ばれる技術なんかもあります。最近ではHTML5やCSS3が注目を集めるなど、Webを取り巻く技術も日々進化しています。
Web業界は進化のスピードが速いですが、技術的な面も含めて、取り残されないようにキャッチアップしていきたいものですね。
