【Web技術の基本 #5】Webアプリケーションの基本
はじめに
【Web技術の基本 #1】 Webとは
【Web技術の基本 #2 】ネットワーク技術について
【Web技術の基本 #3】HTTPでやりとりする仕組み
【Web技術の基本 #4】Webのさまざまなデータ形式
の続きです。
Webアプリケーションの基本
Webアプリケーションの3層構造
ネットワークを介してWebブラウザ上で動作するアプリケーションをWebアプリケーションと呼ぶ。Webアプリケーションを基本的に3層構造(3層アーキテクチャ) で構成されている。
- ユーザーインターフェースとなる「プレゼンテーション層」
- さまざまな処理を行う「アプリケーション層」
- データ処理や管理を行う「データ層」
それぞれの役割を担っているのは、
プレゼンテーション層はWebブラウザとWebサーバー
アプリケーション層はアプリケーションサーバー(APサーバー)
データ層はデータベースサーバー(DBサーバー)
「クライアントサーバシステム」と「Web三層構造」の仕組みとは
MVCモデル
MVCとは「Model」「View」「Controller」のこと
- Modelはデータの処理やさまざまな処理をする
- Viewは結果をユーザーに表示する
- ControllerはViewやModelに指示を出す役割
3層アーキテクチャはWebシステム全体の設計方針のことで、MVCモデルは3層アーキテクチャの中のアプリケーション層とデータ層の設計のことで、プレゼンテーション層はMVCモデルとユーザーとの間を仲介をしている。
MVCモデルにする利点
アプリケーションをMVCモデルにする利点は、それぞれの役割を分業することで開発や改修が効率的になる。仕様変更が別の要素へ影響を及ぼさないので、要素ごとに個別の開発が進められる。
フレームワーク
Webシステムにおけるプログラムの動作には共通した流れがある。具体的にはクライアントからデータを受け取り、データベースからデータを取得し、処理した後、データベースにデータを登録し結果を画面に表示させるといった流れ。
この一般的な流れを「雛形」にして落とし込んだものをフレームワークを呼ぶ。
フレームワークを利用すると、あらかじめ 用意された雛形に沿って開発を進めるため、手間を省けるだけでなく。開発者ごとの力量による品質の差が出にくくなるといったメリットがある。
| ベースの言語 | フレームワーク名 |
|---|---|
| Java | Java EE、Strurs、Spring Bootなど |
| PHP | Laravel、 CakePHPなど |
| Ruby | Ruby on Rails、Sinatraなど |
| Python | Django、Flaskなど |
| JavaScript | React、Vue.js、AngularJSなど |
Webクライアント
Webクライアントの基本的な機能は、Webサーバーへリクエストを送り、Webサーバーから返ってくるレスポンスを解釈し、ユーザーに分かりやすい形で表示すること。ユーザーとWebサーバーの橋渡しの役割。
代表的なWebクライアントはWebブラウザ、スマートフォンアプリのような専用クライアントもある。
Webサーバー
Webサーバーの基本的な機能は、Webクライアントから送られてくるリクエストを受け取り、静的なコンテンツを返したり、動的処理が必要であればアプリケーションサーバーに処理を依頼し、作成されたHTMLファイルなどをWebクライアントへ送信すること。
アプリケーションサーバー
Webアプリケーションサーバー(APサーバー)の基本的な機能は、Webサーバーから送られてきたデータを受け取り、プログラム実装することで、データベースのデータを取得したり、加工した後、Webサーバーに処理結果を返すこと。
セッション管理
HTTPはステートレスなプロトコルのため、ログイン情報などを維持できない。ステートフルな処理を行う場合はAPサーバーがセッションIDを発行して、セッションIDのやりとりにはCookieを利用して管理することが一般的。
データベース管理システム
Webアプリケーションのデータはデータベース(DB) で格納されるが、そのDBを管理するのがデータベース管理システム(DBMS:Database Management System)。APサーバーからのデータの検索や更新命令を受け、それに従ってデータを管理している。DBMSを搭載したサーバーをデータベースサーバー(DBサーバ) と呼ぶ。
キャッシュサーバー
WebブラウザからのリクエストとWebサーバーのレスポンスを組み合わせて記憶し、、特定のリクエストに対するレスポンスを覚えておく役割を実現するのがキャッシュサーバー。「リクエストに対するレスポンスの記憶」のことをキャッシュと呼ぶ。キャッシュサーバーがあることで、サーバーの負担を減らすことができる。
Ajax
Ajaxでは、JavaScriptが直接Webサーバーと通信を行い、データを取得し、HTMLを更新することができる。Webブラウザの代わりにWebブラウザ上で動くJavaScriptが通信を行うため、非同期通信が可能になる。
対して、クライアントとサーバーが交互に処理を行い、同調して通信を行うことを同期通信と呼ぶ。
非同期通信によって同期通信のレスポンスを待つ間にHTMLを更新したり、ユーザーからの入力を受け付けることができるのでベージ更新がより早くなる。
Web API
Webを通じて、ユーザーではなくプログラムが直接サービスを利用するためのインターフェースがAPI(Application Program Interface)。「自分の住んでいる地域を送信すれば、その地域の天気予報が送信されるAPI」や「気になったニュースのTwitter投稿ボタンを押せば、そのニュースがTwitterに投稿されるAPI」という処理ができる。
Discussion