D010 Webアプリの仕組み

Webアプリとは、正確な定義はありませんが、一般的なコーポレートサイトやブログサイトなどではなく、 ログインなどの高度な機能を持ったWEBサイトを指すことが一般的です。今回は、Webアプリについての詳細を紹介します。

Webアプリ

ネイティブアプリとの違い

ネイティブアプリとは、スマートフォン・PCなどの端末にインストールして利用するアプリケーションソフトウェアをいいます。対して、Webアプリとはネットワーク経由で利用するものになります。Webアプリでは、プログラム本体はネットワーク上のWEBサーバー内にあるのに対し、ネイティブアプリのプログラム本体が保存されるのは手元の端末内のみになります。

フロントエンド (クライアントサイド)

Webアプリにおいてフロントエンドとは、ユーザーがWebアプリにアクセスした際に、画面に表示されているユーザー自身が見える部分、直接操作できる部分を指すことが一般的です。Twitterを例にあげると、サイト自体のデザイン・見た目、投稿の検索やいいねボタンといった部分がフロントエンドになります。

フロントエンドの開発を行う際に使われるプログラム言語として以下が挙げられます。

バックエンド(サーバーサイド)

バックエンドはユーザーが見えない部分や直接操作できない部分を指すことが一般的です。具体的には検索条件に応じて適切な表示データをフロントエンドに返したり、問い合わせフォーム送信後に確認メールが届いたりといったユーザーが見えない部分のデータ処理などになります。

バックエンドの開発を行う際に使われるプログラム言語として以下が挙げられます。

バックエンドで使われる主なプログラム言語として、以下があげられます。

Webアプリのが動く仕組み

Webアプリを使用する際に稼働しているものを紹介します。諸学者に対して簡易的な表現を用いているので厳密な処理と完全に一致している訳ではないニュアンスも含まれておりますが概要として理解いただければと思います。

①クライアント(PCやスマホの端末)のブラウザ(Google ChromeやSafari)に表示したいWebアプリのドメインを入力する

②Webサーバーに適切やページを表示するためのファイルを返すようにリクエストをする

③Webサーバーからデータベースサーバーに必要なデータ処理を行うようにSQLに指示を出す

④データベースサーバーからデータベースへ処理を行う

⑤処理後のデータをデータベースサーバー経由でWebサーバーへ返す

⑥Webサーバーからクライアント(PCやスマホの端末)へ表示するためのファイルとデータを返し表示させる

エンジニアからのアドバイス

Webアプリという用語についての定義については意識的に覚える必要はありませんが、今回紹介した用語はとても重要なものとなっております。理解が甘い用語がありましたら自分でもよく調べて他人に説明ができるくらい用語理解を深めていきましょう。

---