ITワクワク塾クライアントサイド言語とは？ブラウザーの中で動くプログラム
Webページの中には、利用者の手元にあるブラウザーで動くプログラムがあります。こうしたプログラムを書く言語が、クライアントサイド言語です。
本記事では、コードが利用者のパソコンに届いて動くまでの流れと、得意な仕事、ブラウザーの中で守られている範囲を解説します。対になるサーバーサイド言語との違いも、あわせて見ていきましょう。
クライアントサイド言語とは
クライアントサイド言語は、クライアント、つまり利用者の側のブラウザーで動かすプログラムの言語です。Webでは、JavaScriptがこの役目を担っています。
ページを開くと、サーバーから3種類のファイルが届きます。ページの中身を書いたHTML、見た目を決めるCSS、動きを書いたJavaScriptです。ブラウザーはHTMLとCSSから画面を作り、JavaScriptのプログラムを実行します。
この3つをまとめたものが、クライアントサイドのコードです。HTMLとCSSは、書いたとおりに表示するための書き方で、手順を書いて動かすプログラムの言語とは性格が違います。そのため、「クライアントサイド言語」と言えば、多くの場合はJavaScriptのことです。
クライアントサイドのコードは、利用者のパソコンにダウンロードされてから動きます。手元に届いたコードなので、利用者がその中身を見ることもできるわけです。
得意な仕事
クライアントサイドのコードが受け持つのは、届いたページの見た目と動きをよくする仕事です。
たとえば、メニューの開け閉めや、画面の一部だけの入れ替えが挙げられます。入力欄に書いた内容の形式を、その場で確かめる処理も、クライアントサイドの仕事の1つです。手元のブラウザーで動くので、サーバーとのやりとりを待たずに、操作へすぐ反応できます。
一方、どの記事を見せるか、誰に見せてよいかを決めるのは、サーバーの側の仕事です。データベースに保存した情報を扱う処理も、ふつうはサーバーで動くサーバーサイド言語が受け持ちます。
ブラウザーの中で守られている範囲
ブラウザーの中のJavaScriptができることには、限りがあります。どのページを開いても安全に使えるよう、ブラウザーが動ける範囲を区切っているためです。
ブラウザーは、タブごとにプログラムを動かす場所を分けています。あるタブのJavaScriptは、ほかのタブやほかのサイトのプログラムに直接手を出せません。
パソコンのOSやファイルにも、ほとんど触れられない作りです。この区切りがあるので、知らないサイトのページを開いただけで、パソコンの中のファイルを自由に読み書きされることはありません。
ただし、クライアントサイドで行う入力の確認は、利用者の便利のためのものです。攻撃者はブラウザーの画面を通さずに、好きな中身をサーバーへ直接送れます。入力の内容は、サーバーの側でもあらためて確かめなければなりません。この点は、クライアントサーバーシステムとは？の「安全面の注意」で詳しく扱っています。
サーバーサイド言語との関係
クライアントサイド言語の対になるのが、サーバーの機械の中で動くプログラムの言語、サーバーサイド言語です。PHP、Python、Ruby、C#などがあります。
| 呼び方 | 動く場所 | 主な役目 |
|---|---|---|
| クライアントサイド言語 | 利用者のパソコンのブラウザー | 届いたページの見た目と動きをよくする |
| サーバーサイド言語 | サーバーの機械 | どの内容を返すかを選び、作って返す |
この呼び分けは、言語の種類ではなく、プログラムを動かす場所で決まります。JavaScriptも、サーバーで動かせばサーバーサイドのコードです。詳しくはサーバーサイド言語とは？で解説しました。
参考にした一次情報
本記事は、次の資料をもとに書きました。MDN Web Docsは、ブラウザーのFirefoxを作っているMozillaが公開している、Webの技術の解説資料です。