# Webアプリケーション

## Webアプリケーションとデスクトップアプリケーション

Webアプリケーションとデスクトップアプリケーションの違いは以下である。

| 項目 | Webアプリケーション | デスクトップアプリケーション |
|---|---|---|
| 動作環境 | ブラウザ上で動作する | PC にインストールする |
| インストール | 不要 | 必要 |
| データ管理 | サーバー上で管理 | ローカルで管理 |

## Webアプリケーションの実装
* 一般的なWebアプリケーション開発では、フロントエンド(UI)とバックエンド(データ処理)を分けて実装する場合が多い。

### フロントエンド
* フロントエンドはユーザが操作する部分であり、HTML/CSS/JavaScript(TypeScript) の3つの技術で構成される。

| 技術要素 | 役割 | 詳細 |
|---|---|---|
| HTML | テンプレート | 画面の構造を定義 |
| CSS | スタイル | デザインやレイアウトの定義 |
| JavaScript(TypeScript) | ロジック | データ処理やイベント管理を記述 |
* React、Vue、Angular のような フロントエンド開発向けの Webアプリケーションフレームワークを使用することが多い。
* フロントエンドを含めたローカルでの処理を総称してクライアントサイドと呼ぶ。

### バックエンド
* バックエンドはユーザが直接触れない部分であり、データベース、認証、APIなどの機能を持つ。JavaScript に限らず様々な言語が使用できる。
* 有名な言語(フレームワーク)として、Python(Django,Flask)、JavaScript(Node.js,express)、Java(Spring Boot)などがある。
* バックエンドを含めたサーバー上での処理を総称してサーバーサイドと呼ぶ。