Webアプリとは？
最終更新日: 2019年 04月21日
Webアプリ基礎ということで今回は、Webアプリケーションの仕組みについて説明をしていきます。
アプリというと、みなさんスマホの中に入っているあの角が丸くて四角いアイコンをイメージされる方が多いのですが、実はみなさんがみているWebページの多くはWebアプリケーションと呼ばれるアプリケーションの一種でとても身近にあるものです。
反対にエンジニア界隈であのスマートフォンに入っているアプリケーションはネイティブアプリ。SlackやGoogle ChromeなどExcelなどPCに実際にインストールして扱うアプリケーションを デスクトップアプリと言います。
このようにアプリケーションにはそれが実行される環境によっていくつか種類がわかれます。その中でもWebエンジニアはWebアプリを作るのが仕事なので、 Webアプリケーションについて取り上げて、Webアプリがどういった仕組みになっているのかということを説明していきます。
Webアプリとは？
先にWebアプリについては少し説明してしまいましたが、HTTPという通信プロトコルを用いてサービスを提供するアプリケーションです。
こう書くと定義が少し難しすぎたかもしれないのですが、ブラウザを使ってアクセスするWebサイトのほとんどはWebアプリケーションです。
みなさんがWebサイトを見るときに使うURLにはいつも頭に http:// (最近はhttps:// が多いかも）という文字 がつくことが多いのですがこれは実は ブラウザでHTTPというプロトコルで通信してねという意味を表しているので、みなさんがURLを打ち込んでいるときというのは無意識にHTTP通信を行なっています。
このように、ブラウザを介して何らかのサービスを提供するアプリケーションをWebアプリと言うのですが、今日のWebアプリケーションはクライアントとサーバーという 概念を基本としており、クライアントからHTTPリクエストという形でリクエストを行い、サーバからHTTPレスポンスという形で応答を返す仕組みを基本としています。
クライアントとサーバのイメージ
Webページが表示される仕組み
Webアプリにクライアントとサーバが不可欠なことはすでに説明しましたが、次はクライアントとサーバの関係を念頭にWebサイト（Webアプリ）がどのように Webページを表示するのかというところについてもうすこし掘り下げて解説していきます。
まず、クライアントとはGoogle ChromeのWebブラウザなどがそれにあたるのですがブラウザでは任意のサイトのWebページを見ることができます。 Webページは実はHTMLというマークアップ言語によって表現されており、ブラウザはこのHTMLを解析して人が見やすいような形にして表示しています。
HTMLについては聞いたことのある方もいるかもしれませんが、実際のHTMLは以下のような<></>のタグと呼ばれる記号で囲まれたテキストです。 下のこの文字をコピーしてファイルを作ってブラウザにドラッグアンドドロップしてみると、見事にHTMLのサンプルという文字がブラウザに表示されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTMLのサンプル</title>
</head>
<body>
<p>HTMLのサンプル</p>
</body>
</html>
また実際のサイトのHTMLをみてみたい場合はブラウザの画面で右クリックをして「ページのソースを表示」を選択すると実際のHTMLを見ることもできます。
先のHTMLファイルをドラックアンドドロップして文字を表示したところでは単純に自分のPC上のHTMLをみているだけですが実際のWebページではこれをインターネットを通して行います。
まず、みなさんがブラウザを開いてhttps://www.google.com/ というURLを打ち込むとグーグルのページをみることができますが、これはみなさんのブラウザから「 https://www.google.com/ という URLに対応したページをください」というリクエストをGoogleのサーバに投げており、それに応答したGoogleのサーバがリクエストに応じたHTMLを返却します。そして、サーバから返却されたHTML を解析してブラウザがWebページを表示して一連の通信が終わりとなります。
ここまでを簡潔にすると以下のようになります。
- ブラウザにURLを打ち込む
- ブラウザがURLに対応したWebページを取得するリクエストを送る
- サーバがリクエストに応答してHTMLを返却
- 返却されたHTMLをブラウザが解析してWebページを表示
普段何気なくみているWebページですが、この流れを知っているかどうかはWebアプリを作る上で実際の処理をイメージできるかどうかに関わるので、Webページが表示されるまでの流れは知っておきたいです。
クライアントで使われる言語、サーバで使われる言語
ここまで、Webアプリケーションの仕組みはある程度解説できたとおもうのですが、Webエンジニアを目指す方にはそれぞれの言語がクライアント側、サーバ側どちらで使われるのか？ ということは覚えていてもらいたいです。
Webアプリを作る上で抑えておかないといけない言語は下記の六つですが、それぞれの言語はどこで使われるのでしょうか？
- HTML
- CSS
- JavaScript
- PHP
- Ruby
- SQL
それぞれの言語はWebアプリを作る上ではある程度知識として知っておかなければならないものですが、これらの技術を一つずつ勉強する前にそれぞれの技術がどこで 使われるのかというところを明確にしておきましょう。
ここでは考えてもしょうがないので答えを書いていきますが、クライアント側で使用される技術は
- HTML
- CSS
- JavaScript
の三つです。HTMLは先ほど説明したようにWebページ自体の構造を定義する言語なので当然クライアント側の技術です。次にCSSですが、CSSは文字のサイズを調節したり色をつけたりHTMLを装飾するための言語なので こちらもクライアントサイドの技術です。最後にJavaScriptもクライアントサイドの技術です。Nodeなどの技術も最近では出てきたサーバで使われることも増えていますが、フロントのアニメーションだったり価の検証 などやはりフロントでの使用を想定して使われることが一般的なのでクライアントサイド(フロントエンドとも言います）の技術と行って良いでしょう。
次にサーバサイドの技術は残る三つで
- PHP
- Ruby
- MySQL
です。PHP, Rubyはサーバ側の言語でサーバでの処理を記述する際に必要です。実際にWebエンジニアを目指す際にはどちらかの言語が使えれば良いです。これらの言語の役割を先ほどの Webページを表示する流れから説明すると、PHP・Rubyは実際に表示するHTMLを生成するための処理やリクエストを元にデータベースを更新したりする処理を記述するために利用されます。 サーバはリクエストを受けてからレスポンスを返すまでに任意の処理を実行するのですがそこの処理を記述するのがPHP・Rubyなどのサーバサイド言語です。
ここでは、比較的に勉強しやすいRuby・PHPを例に出しましたがC#、Java、Goなどもサーバサイドの言語です。
最後にSQLもサーバサイドの言語でこちらはデータベースからデータを取り出したり、データを更新するための言語です。実際のWebアプリではリクエストに応じてユーザの情報を更新したり、参照したり する必要があるのでそういった場所で活躍するのがSQLです。
Webアプリをつくろうと思ってプログラミングを勉強し始めたのは良いですが、いかんせん勉強量が大量にあるのでそれぞれの技術がごっちゃになってしまうことがあるので 全体感を維持しつつもそれぞれの勉強を進めておけるとよいでしょう。
各技術の使われる場所のイメージ
まとめ
- Webアプリは、アプリケーションの種類の一種
- Webアプリは、インターネットを介してHTTPというプロトコルを用いてサービスを提供するアプリケーション
- クライアントがURLを用いてリクエストを投げて、サーバがリクエストに応じた応答を返却する
- Webページを表示するサイトのサーバーはHTMLを返却し、ブラウザ（クライアント）がそれを解析してページを表示する。
- HTML, CSS, JavaScriptはクライアントサイド（フロントエンド）で使われる
- Ruby, PHP, SQLはサーバサイドで使われる
Webアプリケーションてどういうもの？WebアプリケーションがどのようにWebページを表示するかという一連の流れを説明しました。
WebサイトがWebページを表示するための細かい流れは普段意識しないですがプログラミングを行う上では非常に大事な概念になるので頭でイメージできるまで繰り返し頭で反芻しましょう。
また、最後に各技術がどこで使われるのか？というところを説明しましたがこちらは頭の中を整理するのに是非とも使ってみてください。また、各技術がどこで使われるかの図をのせましたが あのクライアントがあってサーバがある中にアプリとDB(データーベース）があるというWebアプリの基本的な構造も非常に大事なので同時にイメージできるようになっているとよいでしょう。