フロントエンド＆バックエンド

さて、アプリケーションを把握し、基本的な分類を行い、Webアプリケーションの種類を整理しました。しかし、そもそもWebアプリケーションはどのように動作するのでしょうか？

ここで、非常に重要な用語が出てきます。

フロントエンドとバックエンド

最も単純な例として、演劇があります。私たちは公演を見に行き、ステージ上のアーティストを見て、拍手をして、お返しにお辞儀をします。そして同時に、演劇は客席の中だけでなく、舞台の上だけで完結しているわけではないことも、私たちはよく知っている。どこかで衣装が縫われ、楽屋で準備が進められ、どこかで演出家が指示を出している。それがなければ演劇は成り立たない。

それと同じように、Webアプリケーションでも、あらゆるものが整理されています。

私たちが見ることのできるレイヤーがあります。あるサイトを開いたときに表示されるページです。このページには、おそらく何らかのアニメーションがあり、クリックできるボタンもあります。

この目に見えるレイヤーを「フロントエンド」と呼びます。フロントエンドには、ユーザー側にあるものすべてが含まれます。デバイスの画面上に表示されるものすべてです。目に見え、感じることができるものです。

しかし、同時に、すべてがフロントエンドに限定されるものではないことも確かです。というのも、ごく最近、フロントエンドそのものが、画面にもコンピューター内のメモリーにも存在しなくなったのです。他のサイトを開こうと思い、そのアドレスをブラウザに入力したときに現れる。

そのサイトを表示するためのリクエストを行い、レスポンスを受け取る。どんなブロックがあり、どこにあり、どのように見えるか、どんなフォントが使われているか。私たちがボタンを押すと、その指令がサーバーに行き、何らかの情報を計算し、答えを出し、問題の解決策を提供する。このリクエストとレスポンスのシステム「リクエスト・レスポンス」は、すべてのウェブアプリケーションが機能するための基礎となるものです。

インターネット上のリクエストは、私たちの目には見えない側、「バックエンド」と呼ばれるサーバーに届きます。同時に、リクエスト自体もある種の情報を含んでおり、いくつかのパラメータを持っています。この情報をもとに、バックエンドはどのレスポンスを送信するかを決定します（あるいは、リクエストの受信を丁寧にうなずきながら、それ以上のデータを送信しないこともできます）。

HTTP

データ転送プロトコル自体は、HTTP- HyperText Transfer Protocolと呼ばれています。ブラウザのアドレスバーの最初にこの4文字が表示されています。これは、HTTPプロトコルを使ってやり取りが行われることを知らせています。つまり、どのような言語で通信を行うかについて、当事者間で合意していると言えます。

また、その名前に惑わされないでほしい。実際、インターネットの黎明期には、このプロトコルはハイパーテキスト専用に考案されたものでした。つまり、リンク付きのテキストで、別のページに移動したり、別のテキストを取得したりする機能である。現在では、Tik-Tokから面白い写真、歌、ダンスビデオなど、あらゆるデータを転送することができます。

このコースのさらなるモジュールでは、リクエストとレスポンスの構造を詳しく扱います。リクエストとレスポンス、そしてそれらを処理するためのロジックを作成します。この段階では、フロントエンドからバックエンドへのデータ転送の原理を理解するのに十分です。

データベース

ところで、データそのものは魔法で出現するわけではない。フロントエンド側でのリクエストの出現はわかりやすく、自分で入力することになります。しかし、情報を転送するためには、その保管や処理を何らかの方法で整理する必要があります。

そのために働くのが「データベース」（DB）です。データを構造化して保存するのです。そして、このデータを管理するシステム、DBMS（データベース管理システム）があります。DBMSでは、データベースに新しいデータを書き込んだり、そこからデータを取り出したり、変更したり、削除したりすることができる（これらをまとめてCRUD- Create, Read, Update, Deleteという略語で表現している）。これらについても、今後のモジュールで詳しく勉強していきます。データベースとは一般的にどのようなもので、どのように構成され、AppMaster.ioでどのように管理するのが簡単なのかを考えてみよう。