この記事では5回に分けてwebアプリケーションの作り方を説明していく
第1回
webアプリケーションの構成、仕組み(この記事)
第2回
サーバーの立ち上げ
第3回
フロントエンドの実装
第4回
バックエンドの実装
第5回
メニュー画像の読み取り
実際に作ったアプリケーション
そもそもwebアプリケーションとは
webアプリケーションとは、高度な性能のwebサイトのような認識で大丈夫。
・webサイト
webサイトは静的なコンテンツが提供され、何かを読んだり、動画を視聴できたりなどの比較的単純なインタラクションが行われる。頻繁に更新はされない。
・webアプリ
webアプリは動的なコンテンツを提供し、ユーザーの情報に応じて、データベースやサーバーなどと連携し、リアルタイムで情報を更新、管理する。
・モバイルアプリケーションとの違い
webアプリと違い、インストールする必要がある。webアプリではブラウザからアクセスするので特定のOSに依存せず、クロスプラットフォーム(様々なプラットフォーム、iOS, MAC, Windows, Androidなど)で動かせる。
大まかな構成
今回作成するのは、現在地から近いWi-Fiのある場所で、希望金額以下のメニューがあるお店を表示する、というものである。イメージとしてはGoogle Mapを思い浮かべて欲しい。
全体的な流れ
フロントエンド
現在地と、希望金額を取得。それらの情報をバックに送る。
バックエンド
現在地と希望金額の情報をフロントから取得し、近くのWi-Fiのある場所を検索。検索に引っ掛かった店のurlに飛び、メニュー表などを読み込み、最安値を取得。もし最安値が希望金額より低かったらOK, 希望金額より高かったらNGとし、最終的にOKな店の情報をフロントに返却。
フロントエンド
店の場所にピンを立て、最寄りの場所までの道のりを示す。
流れとしてはこんな感じだ。では実際にコードを書いていくのだが、その前にwebアプリケーションの流れについて説明する。
アプリケーションの動作フロー
少し詳しく流れを説明する。
ブラウザのアドレスバーにURLを入力
ユーザーがブラウザでアプリケーションのURLを検索する
入力されたURLをDNSを使用し解決する
DNS(Domain Name System)とは、インターネット上でドメイン名をIPアドレスに変換するシステム。
- ドメイン、IPアドレス、URLについて
IPアドレス(Internet Protocol Address)とは、インターネット上の各デバイス(コンピューター、サーバー、スマートフォンなど)に一意に割り当てられている住所のようなもの。このアドレスを通じてデバイス間でデータが送受信される。
このIPアドレスの形式には２種類あり、
・IPv4 : 32ビットの数字で構成されてあり、0から225までの数字を4つ、ドットで区切って表現する （例 : 192.168.1.1)
IPv4は約43億通りのIPアドレスを管理することが可能だったが、インターネットの普及によって、枯渇してきている、、、
・IPv6 : 128ビットの数字で構成されており、より多くのデバイスをサポートするための形式で、コロンで区切られた16進数8個で表現する。
(例 : 2001:0db8:85a3:0000:0000:8a2e:0370:7334)
しかし、これらのアドレス名をいちいち覚えておくことは難しい、、、
それを、わかりやすい形にしたのがドメイン名。
example.com.jp
これをIPアドレスに直してくれるシステムがDNSである
ではURLとは
URLは、インターネット上のリソースの正確な場所を示すための完全なアドレス。URLにはドメイン名のほかに、プロトコル（例: http, https）、パス（サーバー内の特定のファイルやページへのパス）など、他の情報も含む。
http://example.com.jp:3000/image
プロトコル://ドメイン名:ポート/パス
IPアドレスが住所のようなものとするとポートは玄関、入り口を表す。
サーバー側のポートは常に開いている状態になっており、そこを指定して入る(今回だと3000）。httpプロトコルの場合、デフォルトは80になっており、開いているポートにアクセスしないとエラーになる。(httpsは443がデフォルト)
ここでさらにDNSキャッシュという話もしようと思う。
そもそもDNSでIPアドレスに変換する際はまず検索されたURLの.で区切られた部分のツリー構造のようになっている部分を検索している。つまり
example.com.jp
のような場合だと、 jp の中にある com の中にある exmaple というドメイン名を探して、それをIPアドレスに変換している。これを世界中の人が同時にリクエストしていたら、大きな負荷がかかりすぎて、処理が遅くなるなどの問題が発生してしまう。
これを解決するためにDNSキャッシュというものが存在する。これは一度DNSでIPアドレスを取得したものをデータベースに一時的に保存しておき、再度検索された際に、上記のような処理をもう一度行うのではなく、データベースからIPアドレスを直接取ってしまおう、という考え方である。このおかげで頻繁に見るサイトなどは都度アクセスしておらず処理が早く済む。そしてこれらのIPアドレスは一定期間が過ぎると自動的に消去される。
webサーバーがリクエストを受ける
もしアクセスした場所のコンテンツが静的な場合はそのままwebブラウザに返却する。もし動的な場合はアプリケーションサーバーにリクエストを送る。
その後、リクエストを受けたアプリケーションサーバー内でデータベースを必要とするならば、データベースサーバーにリクエストを送り、そこから情報を受け取り、アプリケーションサーバー内でのロジックを終了させて、webサーバーに情報を返却。最終的には静的なコンテンツと同様にwebブラウザにデータが送信されて、それらを解析して、ユーザーが見れる画面にする。
最後に
全体的なwebアプリケーションの動作フローについて説明した。流れとしてはそこまで難しいものではなかったと思う。次回以降で実際にコードを書いていきたいと思う。