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