この記事の内容について

　Web系エンジニアになるための必須知識の1つである「Web技術の仕組み」について、初学者でもわかりやすいと定評のある書籍「イラスト図解式この一冊で全部わかるWeb技術の基本」の要点を自分なりにまとめて、理解力の向上に努めていきます。
　私はまだエンジニア歴1年未満の初学者なので、間違い等があればご指摘いただけると幸いです。

Web技術の基本 (1) 〜 (7)

Web技術の基本(1) 〜Web技術とは〜
Web技術の基本(2) 〜Webとネットワーク技術〜
Web技術の基本(3) 〜HTTPでやりとりする仕組み〜
Web技術の基本(5) 〜Webアプリケーションの基本〜
Web技術の基本(6) Webのセキュリティと認証

1. Webアプリケーションの3層構造

Webアプリケーション

ネットワークを介してWebブラウザ上で動作するアプリケーション

Webアプリケーションの3層構造 (3層アーキテクチャ)

1 プレゼンテーション層

ユーザーインターフェース / クライアント・スクリプト

2 アプリケーション層

業務処理を行う / サーバサイド・スクリプト

3 データ層

データ処理や保管を行う　/ DBサーバー

3層構造のメリット

負荷分散および改修範囲の限定

2. MVCモデル

MVCモデル

Model (モデル)

アプリケーションの扱うデータと業務処理を担当

View (ビュー)

ユーザーへの出力を行う

Controller (コントローラ)

必要な処理をModelやViewに伝える

「3層構造」と「MVCモデル」の違い

3層構造

Webシステム全体の設計方針

MVCモデル

サーバサイド・スクリプトの設計方針

3. フレームワーク

フレームワークとは？

　一般的な流れを「雛形」として準備し、Webアプリケーションごとの独自の内容を開発者が埋めることでプログラムが開発できるようにしたもの。

フレームワークのメリット / デメリット

メリット

・　開発の手間の削減
・　開発者の力量の差による品質のバラつきの削減

デメリット

・　雛形に沿う形での開発しかできない

4. Webサーバー

Webサーバーの役割

静的コンテンツの配信
サーバーサイド・プログラムとの連携など

　Webサーバーが動かなくなると、様々な問題が発生するため、機器台数を増やし、負担の軽減や故障への対応など「冗長化構成」をとるのが一般的である。

5. Webクライアント

Webクライアントとは？

Webサーバーとやりとりを行い、Webシステムを利用するためのプログラムのこと

基本的な役割 (ユーザーとWebサーバーとの橋渡し)

・　ユーザの操作をWebサーバーへのリクエストの形に変換
・　Webサーバーのレスポンスを人間のわかりやすい形に変えて表示

Webブラウザとは？

Webクライアントとして最も利用されているもの
※ 現在ではクライアントサイド・スクリプトの実行やCookieの管理も行っている

クライアントプログラムとは？

地図、天気、ニュースなど特定の情報に特化した専用のクライアント
※ 代表的なものとして、FacebookやTwitterのアプリ、2ちゃんねる専用ブラウザなどがある

6. アプリケーションサーバー

アプリケーションサーバー(APサーバー)とは？

Webアプリケーションの中核となる業務処理を行うプログラム
・　サーバーサイドスクリプトの実行 / データの加工
・　データベースの加工、検索
・　Webサーバーへの応答など

セッション管理機能

　クライアントごとに発行したID(セッションID)を通信データに含め、同じクライアントからの通信を１つのセッションと呼ばれる単位で判別する。

トランザクション管理

　予約手続きのように「すべてのやり取りが成功するまで完了しない」処理を、トランザクション単位で管理すること。

7. データベース管理システム

データベース管理システム(DBMS)とは？

　Webアプリケーションに格納されるデータが格納されたデータベースを管理する役割を担う。DBMSを搭載したサーバー機器を一般にデータベースサーバーと呼ぶ。

データベースの主な冗長化の方法

ミラーリング

データの更新命令を受けたDBMSが複数のDBに対して同時に同じ更新を行う

レプリケーション

データの更新命令を受けたDBMSが別のDBMSに連携する

シェアードディスク

データベースを共用の機器にもち、複数のDBMSからそれを更新する

8. キャッシュサーバー

キャッシュサーバーとは？

静的コンテンツ、特に動画のようなコンテンツは読み込むのに時間がかかってしまう。
→ 「リクエストに対するレスポンス」を覚えておき、負荷を減らすためのプログラム

クエリキャッシュサーバー

DBサーバーの負荷を覚えておき、負荷を減らすためのプログラム

CDN

世界各地に設置されたコンテンツキャッシュサーバーで構成されるネットワーク

9. Ajax

同期通信とは？

クライアントとサーバーが交互に処理を行い、同調して通信を行う仕組み
→ サーバーに負担がかかり、全体としてページの更新に時間がかかる。

Ajaxとは？

　Webブラウザ上で、JavaScriptが直接Webサーバとやりとりを行い、表示するHTMLを更新する。更新に必要なデータのみをやりとりするため、サーバーへの負担が抑えられる。
　JavaScriptが通信を行うため、非同期通信が可能となる。

非同期通信とは？

　Webサーバーからレスポンスを待つ間、JavaScriptがHTMLの更新やユーザーからの入力を受けつけることができる。

10. Webプログラミング

Webプログラミングとは？

プログラミング言語を使って、Webアプリケーションを開発すること
サーバーサイド・スクリプトとクライアントサイド・スクリプトの2つに分かれる。

サーバーサイド・プログラミングで求められること

リクエストの素早い処理
効率的なDB処理
セキュリティの高さ

クライアントサイド・プログラミングで求められること

ブラウザごとの動作の違いや吸収
Ajaxであれば非同期処理の実装
スマートフォンアプリの知識
デスクトップアプリの知識

11. Web API

Web APIとは？

アプリケーションがWebサーバーの機能を利用するためのインターフェース
ユーザーがWebブラウザを操作しなくても、Webサービスを利用できる。

具体的なWeb API

「天気予報API」
緯度、経度などの位置情報から、対応場所の天気予報を返す
「Web検索API」
語句を送信すると、その語句のWeb検索結果を返す
「Twitter投稿API」
ログイン情報と文章を送信すると、Twitterでその文章が投稿がされる

12. マッシュアップ

マッシュアップとは？

複数のWebサービスを組み合わせて、新たなWebサービスを生み出すこと

マッシュアップの注意点

元になっているサービスが公開を終了すると、サービスを継続できない
仕様が変更された際に、それに合わせてサービスを変更する必要がある