031.2 Webアプリケーションアーキテクチャ

Web Development Essentials | 2023/12/18

サーバとクライアントについて

これから、Web Development Essentialsを学習していく中で、「サーバ」や「クライアント」という用語が使われる事が多々あります。これらの用語から、なんとなく言葉の意味は分かるかと思いますが、Web開発において「サーバ」「クライアント」が具体的に何を指す用語なのか、理解する必要があります。

まずサーバとは「Serve :: 提供する」という英単語が基となった用語です。例えば、ビールを提供する装置は「ビールサーバ」と呼びますよね。

ITの世界では、サーバは「必要な情報やサービスを提供するコンピュータ」の事を指しており、サーバにはさまざまな種類がありますが、本章では「Webサーバ」「アプリケーションサーバ」「データベースサーバ」について紹介いたします。

一方で、サーバから提供された情報やサービスを受け取る事ができるコンピュータをクライアントと呼びます。クライアントを簡単に説明すると、皆さんが今使用して当記事を閲覧しているパソコンや携帯といった端末になります。

ところで皆さんは、なぜ皆さんの端末からWebサイトを閲覧することができるのか、仕組みをご存じですか？？

WebブラウザからWebサイトを表示しようとした際、Web上では、Webサイトを表示するために必要な画像やテキスト等のデータをWebサーバに要求しています。

この要求を受け取ったWebサーバは、クライアントへデータを提供して、ユーザーはWebサイトを閲覧することができています。このようにサーバに対して必要なデータを要求することをリクエストといい、要求に応じてデータを提供することをレスポンスと呼びます。

また上記のように、WebブラウザとWebサーバ間で、情報のやり取りをするために定められた通信規約のことをHTTP（Hypertext Transfer Protocol）と呼びます。

クライアントサーバモデルについて

クライアントサーバモデルとは、クライアントとサーバが役割を分担し、協力して処理を行います。例えばクライアントサーバモデルでは、クライアント側でWebページを表示する為に必要なデータ（HTML・CSS等）をローカルに一時保存し、再利用出来るような機能を実装しています。そのため、サーバはリクエストに対し適切なデータのみを提供することで負荷分散が可能となり、処理速度が向上しました。また、このモデルはトラブル時の原因追及や復旧が迅速に行えるという利点があります。

クライアントとWebサーバ間の通信の仕組みはWeb開発を行う上で習得しておかないといけない基礎知識になるので、本章でしっかり覚えましょう！

Webサーバとアプリケーションサーバについて

Web上で取り扱われるサーバの中には、「Webサーバ」と「アプリケーションサーバ」が存在します。

WebサーバはWebブラウザからのリクエストを処理し、テキストや画像といった「HTML・CSS・JavaScript」などの「静的なデータ」をレスポンスとしてWebブラウザに返します。アプリケーションサーバはWebブラウザのリクエストから「動的なデータ」を生成し、Webサーバを介してWebブラウザに返すサーバです。

では「静的なデータ」「動的なデータ]とは、具体的にどのようなデータ指すのでしょうか？

まず「静的なデータ」はどのWebブラウザでも同じ表示がされるデータを指します。本章の「Webアプリケーションアーキテクチャ」の記事は誰が見ても同じ表示が行われますよね？つまりこれは「静的なデータ」にあたります。

次に「動的なデータ」はWebサーバから受け取ったデータをPHPやPythonといったプログラミング言語を用いてデータを加工したり、計算した結果を返すサーバの事を指します。その結果、Webブラウザやユーザによって異なるWebページを表示することができます。

例えば、ショッピングサイトで購入した商品履歴にはアプリケーションサーバから各ユーザに合わしたデータを取得し、表示がされています。皆さんが購入した商品の履歴と、他のユーザーが購入した商品の履歴は異なった内容が表示されていますよね？

これは「動的なデータ」がレスポンスされた結果がWebサーバを介してWebブラウザに表示されているからです。なんとなくイメージがつきましたか？

Webブラウザとその働きについて

「VSCode(Visual Studio Code)を設定しよう」でWebブラウザの種類について簡単に紹介いたしましたが、本章ではWebブラウザについて少し深堀して紹介いたします。

Webブラウザは、サーバ上にあるWebページを表示するためのソフトウェアです。WebブラウザにはWebページなどを構成する要素(HTML、CSS)を描画するための必要な「レンダリングエンジン」とJavaScriptを実行する為の「JavaScriptエンジン」が搭載されています。「レンダリングエンジン」と「JavaScriptエンジン」によって、Webサーバからレスポンスしたデータ（HTML、CSS、JavaScript）が解析、実行されWebページが表示されます。

代表的なWebブラウザには「Google Chrome」「Microsoft Edge」「Microsoft Internet Explorer」「Mozilla Firefox」「Safari」がありますが、各Webブラウザは基本的には同じ役割を担っていますが、搭載されている「レンダリングエンジン」や「JavaScriptエンジン」が異なる為、動作が異なることもあります。

上記は各ブラウザの特徴を簡単にまとめた表になります。試験対策としては各ブラウザの名前と特徴を覚えていれば問題ないかなと思います。例えば、【Google ChromeはBlinkを採用した多機能な拡張機能がある】といった具合です。文中の「Blink」や「Chromium」といった用語は試験には含まれていない為、現段階では特に機能や意味を覚える必要はありませんが、気になる方や、他のエンジニア初心者と差別化を図りたい方は是非調べてみてくださいね！

Web開発技術

近年では技術の進歩とともに、より快適にWeb上でコンテンツが楽しめる様にWeb開発技術も進化しています。これからの項目では、Webの世界で発展したシステムや新たな技術について紹介いたします。

WebAssemblyの知識。

従来、Webブラウザ上で幅広く使用されていたプログラミング言語はJavaScriptでしたが、JavaScriptはインタープリタ言語であるため、都度ソースコードを解析し、実行可能なプログラムに変換する必要があり、複雑なWebアプリケーションの処理が追いつかない問題がありました。この課題を解決する1つの手段として、WebAssembly（略称：Wasm）が登場しました。

WebAssemblyはWebブラウザ上で動作するバイナリコードの仕様を定めたものです。　「C」「C++」「Rust」等のプログラミング言語をWasm形式のバイナリに変換し、Webページ上で高速に動作することができるようになりました。

WebAssemblyの登場により、Webブラウザ上で動作する汎用言語としての選択肢が広がり、パフォーマンスの向上が期待されています。（※コンパイル型とインタープリタ型についてはこちらで詳しく説明していますので、忘れてしまった方はもう一度読み直して見てくださいね！）

Web APIについて

API（略称：Application Programming Interface）は異なるソフトウェアやアプリケーションが連携して機能する仕組みです。Web API はHTTP通信を利用したAPIのことで、クライアントはAPIとして機能するサーバにリクエストし、データや処理結果を受け取ります。

例えば、Web APIを使用すると現在位置から最短距離で移動できる経路を地図上に表示したり、交通情報から移動時間を算出するといった情報等も取得できます。

RESTとGraphQLの知識。

RESTとは「Web API」の仕組みの一つで、ソフトウェア間で情報の操作を行うことが出来ます。

RESTは基本的にHTTPが提供している「GET・PUT・POST・DELETE」という命令と扱う情報をまとめたURI（ユーアールアイ）を使って要求に答えます。RESTを使って作られたシステムは「RESTfulシステム」と呼びます。

REST以外にも、Web上で情報を取得する手段の一つとして、GraphQLがあります。GraphQLとは、データを取得・送信するための柔軟なクエリ言語です。GraphQLはクライアントが指定したデータのみを返すため、効率的に取り扱うことができます。
（※クエリ言語とはSQLというデータベース言語の命令文を指します。クエリやSQLといった内容は【035.5 SQLの基礎(今後記事作成予定)】にて取り扱いますので、現段階では覚える必要はありません。）

シングルページアプリケーション(SPA)の知識。

SPA（略称：Single Page Application）はページ遷移を伴わずに単一のWebページ内で動作するページの作り方です。SPAはJavaScriptでHTMLの一部を差し替えて、必要な部分だけを読み込むんで動的に変化させます。

その為、ユーザーはサーバとの通信量が減少したり、画面遷移などのブラウザの挙動に縛られず、様々なコンテンツを楽しむことが出来ます。

コンテンツマネージメントシステム(CMS)の知識。

コンテンツマネジメントシステム（CMS：Contents Management System）は、テキストデータや画像・動画等をデータベースに保存し、必要な情報をデータベースから取り出しWebページを作成するシステムを指します。通常、Webサイト上で文章や挙動を追加・変更したい場合は「HTML」「CSS」「JavaScript」といった言語の専門知識が必要となります。

しかしコンテンツマネジメントシステムを導入しているサイトでは、このような知識を必要とせずに、テータベースに保存されたテキストや画像を組み合わせてページの修正や追加を行う事ができます。

試験出題内容としては、Web開発技術の中で紹介したWeb APIやSPAなどといった各項目の名称と、特徴について問われると思いますので、本試験に備えてしっかり覚えていきましょうね！

データベースとの連動

データベースとは、言葉だけでなんとなく意味は伝わるかと思いますが、正確に表すと

特定のデータを収集し、使いやすい形で格納させたデータの集合体になります。データベースにはいくつか種類があり、それぞれに特徴はありますが、本章では現在幅広く利用されているリレーショナルデータベース(RDB：Relational Database)と、近年注目を集めているNoSQLについて紹介いたします。

リレーショナルデータベースは列と行で構成された表形式でデータの管理を行うデータベースです。表形式の複数データを結合したり関連付けたりできるので、データの検索や集計等を柔軟に行うことが出来ます。このような管理を行うソフトウェアのことをリレーショナルデータベース管理システム(RDBMS：Relational Database Management System)と呼び、主なソフトとして「SQLite」「MySQL」「MariaDB」「PostgreSQL」等が存在します。

またリレーショナルデータベース以外のデータベースはNoSQLと呼びます。NoSQLはデータの保存やアクセスをより柔軟に行えることに重点を置いており、データを処理する動作はソフトウェアにより異なります。主なソフトとしては「MongoDB」「CouchDB」「Redis」があり、それぞれ以下のような特徴があります。