クライアントとブラウザ

ここまで、Webアプリの全体の説明、サーバーの説明と来ましたがWebアプリ基礎の最後は、クライアントについてです。

また、クライアントとなりうるツールは色々あるのですが、ブラウザが最も身近なのでブラウザについても説明していきます。

クライアントとは？

前二つの記事を読まれている方はすでにわかると思うのですが、現在のWebアプリケーションはクライアントとサーバがそれぞれ 通信を行なうで実現されています。

クライアントとはそのうちの役割のひとつなのですが、クライアントの一番身近な具体例はGoogle Chrome, Safariなどのブラウザです。 みなさんがブラウザを開いて、Webページを見る時はURLを打ち込むか検索フォームに文字を入れて検索すると思いますが、 ブラウザはこの時にリクエストをサーバに対して送り、サーバから返ってきたHTMLを表示しています。

このようにサーバにリクエストを送りそのレスポンスによってサービスを受けるものをクライアントと呼びます。

ブラウザ以外のクライアントツール

クライアントの例としてよく出てくるブラウザですが、クライアントとはあくまでも役割の名前になるので、コンピュータの世界にはブラウザ以外の クライアントツールが存在します。

その中でもよく使われるのがcurlコマンドと呼ばれるコマンドです。このコマンドをターミナルからURLを指定して叩くと、 そのWebページのHTMLを自分のPCにダウンロードしたり、画像やPDFをダウンロードすることが可能です。

例えば、

$curl https://statics.web-nari.net/uploads/others/curriculums/it-base.png > it-base.png

のようにターミナルからコマンドをたたくとcurlコマンドの引数に渡したURLにリクエストを送り、コマンドラインからレスポンスを取得することができます。 上の例の場合は、指定したURLのレスポンスをit-base.pngというファイルに保存する。という意味になります。

このコマンドを叩いたあとに、Finderでファイルを見てみるとちゃんとURL先の画像が保存されているはずです。

クライアントの概念についての説明のついでにcurlというブラウザ以外のクライアントツールを紹介しましたが、 実はみなさんのスマホにインストールされているアプリもクライアントとしての役割を担っています。

普段アプリを使っているとなんかサーバーと通信しているなというのはわかると思うのですが、実際のところはアプリからサーバにリクエスト を送ってレスポンスで受け取ったデータを表示していというを繰り返しています。 ここままで勘の良い方はわかったかもしれませんが、みなさんのスマホにインストールされているアプリ自体もクライアントの機能を持っていると言えます。

このようにブラウザ以外にもクライアンとしての役割を果たしているものはたくさんあるので、そのアプリケーションが果たしている役割を見ながら、 クライアントなのかどうかというのがわかるというのはWebアプリを理解している一つの指標になるかもしれません。

フロントエンドとクライアント

Webエンジニアの役割としてフロントエンドエンジニアという言葉があり、最近では人気の職種として認知度も上がってきていますが、 フロントエンドというのは基本的にクライアントサイドの開発というものとほとんど同義になります。

フロントエンドの反対はサーバーサイドと呼ばれ、Java、Ruby、PHPなどなどサーバサイド用の言語で開発を行いますが、 フロントエンドの開発はHTML、CSS、JavaScriptなどで基本的にWebページの見た目の処理を実装することになります。

フロントエンド、サーバーサイドの違いは、Webページという形でユーザの目に触れるかどうか？というところがわかりやすいですが、それだと一般の人のWebへの理解の域を出ません。 Webエンジニアを目指す方にはこのWebアプリの仕組みを念頭においてフロントエンドエンジニアが担当する領域がどこなのか？ということを理解できると良いでしょう。

まとめ

今回はクライアントについて集中して説明しましたが、クライアント-サーバを前提としたWebアプリケーションについて理解はできたでしょうか？

ここらへんの話は抽象度が高く、普段なれない考え方なので理解は難しいかもしれないのですが重要な概念なのでくりかえしこれらの記事を読んでみたり ネットで検索をしてみたり、コードを書いたりしながら理解していきましょう。

ここを理解するには慣れや実際の具体例に触れてきたかどうか？なところもあるので繰り返し記事を読んだりプログラミングしたりしながら身につけていきましょう。