Web サイトや Web アプリ (Web アプリケーション) は、どのようにして私たちの PC (パソコン) やスマートフォンの画面に表示されているのでしょうか ? ここでは、そのしくみと、開発を始めるために必要な環境を整えましょう。
フロントエンドとバックエンド
Web アプリは、大きく分けて 2 つの部分から構成されています。
| フロントエンド (Frontend) | バックエンド (Backend) |
|---|---|
| ユーザーが直接触れる部分、つまり Web サイトやアプリの「見た目」と「動き」を担当します。 | ユーザーからは見えない部分で、データの保存 / 処理、ビジネスロジックの実行、セキュリティなどを担当します。 |
| HTML で骨格を作り、CSS で装飾し、JavaScript で動きを加えます。 | サーバー、データベースなどがこれにあたります。 |
| 例: Web サイトのボタン、入力フォーム、アニメーション | 例: ユーザー情報の管理、商品の在庫管理、決済処理 |
通常、フロントエンドがバックエンドに「このデータちょうだい」「この情報を保存して」といったリクエストを送り、バックエンドがそれに応答することで Web アプリは成り立っています。
構成図
ユーザー (ブラウザ)
|
| (操作 / 表示)
v
+-------------------+
| フロントエンド |
| (HTML/ CSS /JS) |
+-------------------+
|
| (API 通信 - データ要求 または 送信)
v
+-------------------+
| バックエンド |
| (サーバー/API/DB) |
+-------------------+
|
| (データの読み書き)
v
+-------------------+
| データベース |
+-------------------+