プログラミング初学者向け サーバーサイドとクライアントサイド

クライアントサイドプログラムとは

プログラミングを勉強していると、サーバーサイドとクライアントサイドという言葉を聞いたことがあるかもしれません。

最初に学習するであろうHTMLやcssはマークアップ言語ですので、厳密にはプログラミング言語はありません。

ですが、JavaScriptはプログラミング言語ですので、プログラミングを最初に学ぶのはJavaScriptという方も多いと思います。

このJavaScriptは、基本的にはクライアントサイドで動いているプログラムということになります。

最近ではサーバーサイドで動作しているJavaScriptも存在しますが、ここではクライアントサイドで動いているものとして話を進めます。

では、クライアントサイドとは何でしょうか？

この図の１つ目の手順のように、WEBサイトをブラウザ（Google Chromeなど）で閲覧する場合、「https://ドメイン名/index.html」をブラウザのURL欄に入力してアクセスします。

index.html を書かない事も多いと思いますが、「https://ドメイン名/」のようにアクセスすれば、基本的には「index.html」を要求していることになります。

要求を受けたサーバーコンピューターは、そのファイル（index.html）と、html内に関連付けされた 「style.css」と「my-script1.js」を返します。

実際にはサーバーが返しているわけでは無く、ブラウザが「style.css」と「my-script1.js」を自動的にダウンロードしています。

絵を見て頂ければ分かる通り「my-script1.js」は自分のコンピュータの方に来ています。

つまり、クライアントサイド（＝自分のパソコン側）にJavaScriptのファイルが読み込まれて、クライアント側でJavaScriptのプログラムが動作しているということになります。

サーバーサイドプログラムとは

前項の「index.html」は、お問い合わせフォームの画面だったとします。

ここで、登録を押して、名前や電話番号、メールアドレスが正しく入力されているかチェックを行う場合、そのチェックをJavaScriptで行うことができます。これはクライアントサイド側のプログラムになります。（もちろん、サーバーサイドプログラムで行う方法もあります）

しかし、登録したそのデータをどこに置いておきましょう？

通常はサーバー上にあるデータベースに格納します。

しかし、JavaScriptなどでダイレクトにデータベースをいじるのは、セキュリティ上好ましくないため通常行いません。

この時登場するのが、PHPやRubyといった、サーバーサイドで動作しているプログラムです。

PHPを使用する場合など、通常は「index.html」ではなく「index.php」を呼び出します。

「index.html」同様、「index.php」の場合でも「https://ドメイン名/」で呼び出すことができます。もし、サーバー上の同じフォルダに「index.html」「index.php」の両方が存在した場合、どちらを優先して呼び出されるかは、サーバー側の設定によります。

「index.php」などのphp ファイルが呼ばれると、PHPさんが「index.php」に書かれているプログラムを実行してくれます。

そして、クライアントサイドに必要な情報をクライアントに渡してくれます。

PHPさんは、フォーム入力情報をデータベースに登録する場合も間に入ってくれます。

絵の中では、JavaScriptさんがPHPさんにデータ登録を依頼しています。

JavaScriptさんが間に入らないケースもありますが（むしろそのケースの方が多いですが）、ここではサーバーサイドとクライアントサイドを切り分けるため、あえてJavaScript経由での登録としています。

このように、クライアントサイドとデータベースの間に位置するプログラムなど、サーバーサイドに存在して、あれこれ制御してくれるようなプログラムをサーバーサイドプログラムと位置づけられています。

まとめ

サーバーサイドプログラムとは、クライアント側からは一切見えない所で動いているプログラムで、主にデータベースへの登録や、データベースから取得した情報を一覧化してクライアントで見れるように整形したりしています。

もちろん、データベースとの連携だけがサーバーサイドプログラムの役割ではありませんが、ここではお問合せフォームを一例にしていますので、サーバーサイドプログラムをデータベースとの中継役として説明させて頂きました。

逆にクライアントサイドプログラムは、クライアント側で動いているプログラムですので、実際にWEBサイトを見ている利用者にもプログラムは見えてしまいます。

クライアントサイドでは、主に入力チェックや、画像をスライドさせてみたり、アニメーションするページを作ったりと、ページの再読み込みなしにWEBサイトを動かす仕組みを提供しています。

プログラミング初学者の方は、JavaScript を学ぶと同時にサーバーサイドプログラムも学ぶことで、知識の幅が広がり全体の構成が見えやすくなると思います。